/* ===================================================================== NOS MURS — RÉGLAGES VISUELS --------------------------------------------------------------------- Toutes les couleurs, polices, tailles et espacements du site sont ici. Changer une valeur ici la change partout sur le site. Le style choisi (atelier, calque, etabli, panorama ou standard) ajoute ses propres réglages dans assets/css/styles/.css. Couleurs : code hexadécimal (#RRGGBB). ===================================================================== */ :root { /* ---------- COULEURS DE LA MARQUE (reprises du logo) ---------- */ --c-orange: #ED5B38; /* boutons, accents */ --c-orange-clair: #F47C5A; /* orange lisible sur fond anthracite, survols */ --c-brique: #B2442A; /* orange foncé (ombre des briques du logo) */ --c-texte-sur-orange: #FFFFFF;/* texte posé sur l'orange des boutons */ --c-action: #CC4422; /* fond des boutons principaux : blanc dessus = 4,75:1 */ --c-action-survol: #B3391B; /* survol : plus profond (5,6:1) */ /* ---------- FOND DU SITE : sauge-gris ---------- (version ivoire essayée : fond #FFFEF8, bandes #E3ECE6 → #F0EEDE) */ --c-sauge: #DCE6E6; /* fond principal */ --c-sauge-clair: #EAF0F0; /* zones plus claires */ --c-sauge-fonce: #CBD8D8; /* bandes, blocs mis en avant */ --c-sable: #D3DEDC; /* l'autre extrémité des dégradés (très discret) */ --degrade: linear-gradient(100deg, var(--c-sauge-fonce) 0%, var(--c-sable) 100%); --c-trait-clair: #B9C8C8; /* filets et bordures sur fond clair */ --c-blanc: #FFFFFF; --c-papier: var(--c-sauge); --c-texte: #151917; /* texte principal : presque noir */ --c-gris: #4C534F; /* texte secondaire sur fond clair */ --c-lien: #A23B21; /* liens dans le texte */ --c-fond-survol: #F4DACF; /* fond pâle qui glisse au survol des encadrés-liens */ /* ---------- ZONES CONTRASTÉES (autrefois anthracite, désormais claires) ---------- Les noms « nuit » sont gardés pour ne rien casser ; les valeurs sont claires. */ --c-nuit: #C8D5D5; /* sauge soutenu : méthode, appel final, pied de page */ --c-nuit-2: #FFFFFF; /* blanc : prestations, simulateur */ --c-nuit-3: #F2F6F6; /* cartes posées sur ces zones */ --c-trait-sombre: rgba(30, 36, 36, 0.13); --c-texte-sombre: #1E2424; --c-gris-sombre: #4A5656; --c-cote: #5E8F98; /* traits techniques */ /* ---------- ANTHRACITE (sections fortes : tarifs, méthode) ---------- */ --c-anthracite: #1E1C1B; /* anthracite chaud */ --c-anthracite-carte: #2A2826; --c-anthracite-trait: rgba(255, 255, 255, 0.13); --c-anthracite-texte: #F1F1EE; --c-anthracite-doux: #B4BCBC; /* ---------- PASTILLES PASTEL (fonds des icônes, en alternance) ---------- */ --p-jaune: #FFE38A; --p-vert: #CDEBA3; --p-bleu: #C7DDF3; --p-rose: #F8CBDA; --p-peche: #FAD3BE; /* ---------- COULEURS D'ACCOMPAGNEMENT ---------- */ --c-email: #1F3B6F; /* bleu des plaques émaillées */ --c-email-filet: #2F7A55; /* liseré vert des plaques */ --c-postit: #FFD54F; /* jaune post-it */ --c-soleil: #FFC321; /* jaune d'accent (scotch, repères) */ --c-crayon: #3A4040; /* trait de crayon */ --c-succes: #2F8F5F; --c-erreur: #C62F2F; /* ---------- POLICES ---------- */ --f-titre: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif; --f-texte: "Inter", "Segoe UI", system-ui, sans-serif; --f-tech: "JetBrains Mono", ui-monospace, Consolas, monospace; --f-main: "Kalam", "Segoe Print", cursive; /* écriture à la main */ /* ---------- TAILLES DE TEXTE ---------- */ --t-texte: 16px; --t-petit: 14px; --t-mini: 12px; --t-h1: clamp(2.4rem, 1.4rem + 3.4vw, 4.4rem); --t-h2: clamp(1.8rem, 1.3rem + 1.7vw, 2.8rem); --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); --t-chapo: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); /* ---------- RÈGLES DE LECTURE (validées le 13/10/2026) ---------- */ --interligne: 1.5; --esp-paragraphe: 28px; --esp-avant-h2: 96px; --esp-sous-h2: 24px; --esp-avant-h3: 48px; --largeur-texte: 740px; /* ---------- MISE EN PAGE ---------- */ --largeur-site: 1360px; --gouttiere: clamp(16px, 4vw, 40px); --esp-section: clamp(44px, 5vw, 80px); --hauteur-entete: 88px; /* ---------- FORMES ---------- */ --rayon: 16px; --rayon-petit: 10px; --rayon-bouton: 999px; /* ---------- EN-TÊTE ---------- */ --entete-fond: rgba(220, 230, 230, 0.82); --entete-texte: #1E2424; --entete-doux: #3E4A4A; /* ---------- EFFETS ---------- */ --lueur: 0 10px 30px -12px rgba(237, 91, 56, 0.7); --ombre: 0 1px 2px rgba(30, 36, 36, 0.06), 0 14px 34px -14px rgba(30, 36, 36, 0.28); --transition: 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); } /* ===================================================================== MODE NUIT (bouton lune / soleil de l'en-tête) Les mêmes noms de couleurs, avec des valeurs sombres. ===================================================================== */ :root[data-theme="nuit"] { --c-sauge: #141A1A; --c-sauge-clair: #1C2424; --c-sauge-fonce: #0E1313; --c-sable: #161C1A; --c-trait-clair: #2F3B3B; --c-blanc: #1D2525; /* les « feuilles » et cartes deviennent sombres */ --c-texte: #E7EDED; --c-gris: #A9B6B6; --c-lien: #F58B6B; --c-fond-survol: #3A2721; --c-nuit: #0E1313; --c-nuit-2: #1D2525; --c-nuit-3: #243030; --c-trait-sombre: rgba(255, 255, 255, 0.12); --c-texte-sombre: #E7EDED; --c-gris-sombre: #A9B6B6; --c-cote: #8FC3CC; --c-crayon: #C7D2D2; --c-anthracite: #0A0D0D; --c-anthracite-carte: #161D1D; --entete-fond: rgba(20, 26, 26, 0.86); --entete-texte: #E7EDED; --entete-doux: #B7C3C3; --ombre: 0 1px 2px rgba(0,0,0,.3), 0 14px 34px -14px rgba(0,0,0,.6); } /* ===================================================================== NOS MURS — STYLES DU SITE Les valeurs (couleurs, tailles, espacements) viennent de reglages.css. Pour changer l'apparence, modifiez d'abord reglages.css. ===================================================================== */ /* ---------- Polices hébergées sur le site ---------- */ @font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; } @font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Kalam"; src: url("../fonts/kalam-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hauteur-entete) + 16px); } body { margin: 0; font-family: var(--f-texte); font-size: var(--t-texte); line-height: var(--interligne); color: var(--c-texte); background: var(--c-papier); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } h1, h2, h3, h4 { font-family: var(--f-titre); line-height: 1.08; letter-spacing: -0.025em; margin: 0; font-weight: 700; text-wrap: balance; } p { margin: 0; } a { color: inherit; } button, input, select, textarea { font: inherit; color: inherit; } ::selection { background: var(--c-orange); color: #fff; } :focus-visible { outline: 2px solid var(--c-orange); outline-offset: 3px; border-radius: 4px; } .ico { width: 1.25em; height: 1.25em; flex: none; } .conteneur { width: 100%; max-width: var(--largeur-site); margin-inline: auto; padding-inline: var(--gouttiere); } .visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--c-orange); color: #fff; padding: 10px 16px; border-radius: var(--rayon-petit); } .lien-evitement:focus { top: 12px; } /* Étiquette technique façon plan d'ingénieur : [ 01 ] BUREAU D'ÉTUDES */ .surtitre { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-tech); font-size: var(--t-mini); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-lien); } .section--sombre .surtitre, .section--nuit .surtitre, .simulateur .surtitre, .simple .surtitre { color: var(--c-orange-clair); } .surtitre::before { content: ""; width: 22px; height: 1px; background: currentColor; } /* ---------- Boutons ---------- */ .btn { --btn-fond: var(--c-action); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--rayon-bouton); font-family: var(--f-titre); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform var(--transition), box-shadow var(--transition), background var(--transition); } .btn .ico { transition: transform var(--transition); } .btn:hover .ico { transform: translateX(4px); } .btn--primaire { background: var(--btn-fond); color: var(--c-texte-sur-orange); font-weight: 700; box-shadow: 0 8px 22px -12px rgba(178, 68, 42, 0.9); } .btn--primaire:hover { background: var(--c-action-survol); box-shadow: 0 12px 26px -12px rgba(150, 50, 25, .85); transform: translateY(-1px); } .btn--fantome { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; } .btn--fantome:hover { background: rgba(127, 127, 127, .1); } .btn--clair { background: var(--c-blanc); color: var(--c-texte); box-shadow: inset 0 0 0 1px var(--c-trait-clair); } .btn--clair:hover { box-shadow: inset 0 0 0 1px var(--c-texte); } .btn--petit { min-height: 42px; padding: 0 18px; font-size: 14px; } .btn--large { width: 100%; } .btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; } /* Lien seul sur sa ligne : petit encadré d'action (règle de lecture) */ .lien-action { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 18px; min-width: min(100%, 320px); border: 1px solid var(--c-trait-clair); border-radius: var(--rayon-petit); font-weight: 700; text-decoration: none; color: var(--c-texte); background: var(--c-blanc); transition: border-color var(--transition); } .lien-action::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-fond-survol); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .lien-action .ico { width: 18px; height: 18px; stroke-width: 1.3; color: var(--c-lien); transition: transform var(--transition); } .lien-action:hover { border-color: var(--c-lien); } .lien-action:hover::before { transform: scaleX(1); } .lien-action:hover .ico { transform: translateX(5px); } .lien-action--sombre { background: transparent; color: var(--c-texte-sombre); border-color: var(--c-trait-sombre); } .lien-action--sombre::before { background: color-mix(in srgb, var(--c-orange) 12%, transparent); } .lien-action--sombre .ico { color: var(--c-orange); } /* Listes de liens : pas soulignées, soulignées au survol */ .liste-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .liste-liens a { text-decoration: none; } .liste-liens a:hover { text-decoration: underline; text-underline-offset: 4px; } .liste-liens--ligne { display: flex; flex-wrap: wrap; gap: 8px 24px; } /* ===================================================================== EN-TÊTE ===================================================================== */ .entete { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--hauteur-entete); color: var(--entete-texte); background: transparent; border-bottom: 1px solid transparent; transition: background var(--transition), border-color var(--transition); } .entete::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--entete-fond); -webkit-backdrop-filter: blur(32px) saturate(120%); backdrop-filter: blur(32px) saturate(120%); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .entete::before { background: var(--c-fond); } } .entete.est-defile { border-color: rgba(30, 36, 36, .12); box-shadow: 0 10px 30px -24px rgba(30,36,36,.6); } .entete .logo-clair { display: none; } .entete__barre { height: 100%; display: flex; align-items: center; gap: 28px; } .entete__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; } .entete__burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(127,127,127,.12); color: inherit; align-items: center; justify-content: center; cursor: pointer; } .entete__burger .ico-fermer { display: none; } .nav { display: flex; align-items: center; gap: 24px; margin-left: auto; } .nav__liste { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; } .nav__lien { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--entete-doux); text-decoration: none; cursor: pointer; border-radius: var(--rayon-petit); white-space: nowrap; transition: color var(--transition); } .nav__lien:hover, .nav__lien[aria-current], .nav__lien[aria-expanded="true"] { color: var(--entete-texte); } .nav__chevron { width: 12px; transition: transform var(--transition); } .nav__lien[aria-expanded="true"] .nav__chevron { transform: rotate(180deg); } .nav__tel { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-tech); font-size: 14px; font-weight: 600; color: var(--entete-texte); text-decoration: none; white-space: nowrap; } .nav__tel .ico { color: var(--c-orange); width: 18px; } .nav__item--deroulant { position: relative; } .sous-menu { position: absolute; top: calc(100% + 12px); left: -12px; width: 340px; padding: 8px; background: var(--c-nuit-3); border: 1px solid var(--c-trait-sombre); border-radius: var(--rayon); box-shadow: 0 24px 50px -20px rgba(30,36,36,.35); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--transition); } .nav__item--deroulant.est-ouvert .sous-menu { opacity: 1; visibility: visible; transform: none; } .sous-menu__lien { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: var(--rayon-petit); text-decoration: none; transition: background var(--transition); } .sous-menu__lien:hover { background: var(--c-sauge-clair); } .sous-menu__lien strong { display: block; font-size: 15px; color: var(--c-texte-sombre); } .sous-menu__lien small { display: block; font-size: 13px; color: var(--c-gris-sombre); } .sous-menu__ico { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: color-mix(in srgb, var(--c-orange) 10%, transparent); color: var(--c-orange); flex: none; } .sous-menu__ico .ico { width: 22px; height: 22px; } @media (max-width: 920px) { .entete__burger { display: inline-flex; } .nav { /* hauteur explicite : le flou de l'en-tête sert de repère au menu fixe */ position: fixed; top: var(--hauteur-entete); left: 0; right: 0; height: calc(100dvh - var(--hauteur-entete)); z-index: 49; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 16px var(--gouttiere) 120px; overflow-y: auto; background: var(--c-nuit); visibility: hidden; opacity: 0; transform: translateY(-8px); transition: all var(--transition); } .nav-ouverte .nav { visibility: visible; opacity: 1; transform: none; } .nav-ouverte .entete__burger .ico-ouvrir { display: none; } .nav-ouverte .entete__burger .ico-fermer { display: block; } .nav-ouverte { overflow: hidden; } .nav__liste { flex-direction: column; } .nav__lien { width: 100%; justify-content: space-between; padding: 18px 0; font-size: 18px; border-bottom: 1px solid var(--c-trait-sombre); border-radius: 0; color: var(--c-texte-sombre); } .sous-menu { position: static; width: auto; padding: 4px 0 12px; background: none; border: 0; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; } .nav__item--deroulant.est-ouvert .sous-menu { display: block; } .nav__tel { display: inline-flex; margin-top: 28px; font-size: 18px; color: var(--c-texte-sombre); } .nav__lien:hover, .nav__lien[aria-current], .nav__lien[aria-expanded="true"] { color: var(--c-lien); } .entete__actions .btn { display: none; } } /* ===================================================================== SECTIONS ===================================================================== */ .section { padding-block: var(--esp-section); position: relative; } .section--sombre { background: var(--c-nuit-2); color: var(--c-texte-sombre); } .section--nuit { background: var(--c-nuit); color: var(--c-texte-sombre); } .section--blanche { background: var(--c-blanc); } /* Quadrillage de plan d'ingénieur, en fond des zones sombres */ .quadrillage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(143, 211, 230, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 211, 230, 0.07) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 30%, transparent 100%); } .section > .conteneur { position: relative; } .entete-section { max-width: none; margin-bottom: clamp(28px, 3vw, 40px); } .entete-section h2:first-child { margin-top: 0; } .entete-section h2 { font-size: var(--t-h2); margin-top: 18px; } .entete-section p { margin-top: 18px; font-size: var(--t-chapo); color: var(--c-gris); } .section--sombre .entete-section p, .section--nuit .entete-section p { color: var(--c-gris-sombre); } .entete-section--centre { margin-inline: auto; text-align: center; } /* ===================================================================== BANDEAU D'ACCUEIL ===================================================================== */ .accueil { position: relative; overflow: hidden; padding: calc(var(--hauteur-entete) + clamp(36px, 5vw, 72px)) 0 clamp(64px, 8vw, 110px); background: radial-gradient(60% 60% at 78% 30%, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent 70%), radial-gradient(50% 50% at 10% 100%, rgba(143, 211, 230, 0.08), transparent 70%), var(--c-nuit); color: var(--c-texte-sombre); } .accueil__grille { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .accueil h1 { font-size: var(--t-h1); font-weight: 680; margin-top: 22px; } .accueil h1 em { font-style: normal; color: var(--c-orange); } .accueil__chapo { margin-top: 24px; max-width: 560px; font-size: var(--t-chapo); color: var(--c-gris-sombre); } .accueil__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; } .atouts { list-style: none; margin: 40px 0 0; padding: 24px 0 0; border-top: 1px solid var(--c-trait-sombre); display: flex; flex-wrap: wrap; gap: 14px 28px; } .atouts li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--c-texte-sombre); } .atouts .ico { width: 20px; height: 20px; color: var(--c-orange); } /* Schéma animé du mur */ .schema { position: relative; } .schema__cadre { position: relative; border-radius: 22px; padding: 18px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); border: 1px solid var(--c-trait-sombre); box-shadow: 0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06); } .schema__barre { display: flex; justify-content: space-between; align-items: center; padding: 2px 6px 14px; font-family: var(--f-tech); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris-sombre); } .schema__barre i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c-succes); margin-right: 8px; box-shadow: 0 0 10px var(--c-succes); animation: clignote 2s infinite; } .schema svg { width: 100%; height: auto; border-radius: 12px; background: rgba(8, 10, 14, .55); } .schema__fiche { position: absolute; left: -18px; bottom: -26px; width: min(250px, 62%); padding: 16px 18px; border-radius: var(--rayon); background: rgba(26, 32, 43, .92); border: 1px solid color-mix(in srgb, var(--c-orange) 35%, transparent); box-shadow: var(--lueur); backdrop-filter: blur(10px); animation: flotte 6s ease-in-out infinite; } .schema__fiche small { display: block; font-family: var(--f-tech); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris-sombre); } .schema__fiche strong { display: block; margin-top: 4px; font-family: var(--f-titre); font-size: 28px; font-weight: 650; color: var(--c-texte); } .schema__fiche span { display: block; margin-top: 2px; font-size: 13px; color: var(--c-gris-sombre); } /* Animation du schéma : le mur, l'ouverture, la poutre, les charges */ .sch-brique { fill: color-mix(in srgb, var(--c-orange) 13%, transparent); stroke: color-mix(in srgb, var(--c-orange) 45%, transparent); stroke-width: 1; } .sch-trait { fill: none; stroke: var(--c-cote); stroke-width: 1; opacity: .75; } .sch-texte { font-family: var(--f-tech); font-size: 11px; fill: var(--c-cote); letter-spacing: .06em; } .sch-ouverture { fill: rgba(8, 10, 14, .95); stroke: var(--c-cote); stroke-width: 1.2; stroke-dasharray: 6 5; } .sch-poutre { fill: var(--c-orange); } .sch-poutre-ame { fill: none; stroke: #fff; stroke-opacity: .35; } .sch-charge { stroke: var(--c-orange); stroke-width: 1.6; fill: none; } .sch-etai { stroke: var(--c-gris-sombre); stroke-width: 1.2; stroke-dasharray: 3 3; } .schema .sch-ouverture { animation: decoupe 1.2s .4s both cubic-bezier(.2,.7,.2,1); transform-origin: center; transform-box: fill-box; } .schema .sch-poutre-g { animation: pose 1s 1.3s both cubic-bezier(.16,1,.3,1); } .schema .sch-cote { stroke-dasharray: 400; animation: trace 1.4s 1.8s both ease-out; } .schema .sch-cote-texte, .schema .sch-etais { animation: apparait .6s 2.4s both; } .schema .sch-charge { animation: charge 2.4s 2.2s infinite ease-in-out; } .schema .sch-charge:nth-of-type(2) { animation-delay: 2.5s; } .schema .sch-charge:nth-of-type(3) { animation-delay: 2.8s; } .schema .sch-charge:nth-of-type(4) { animation-delay: 3.1s; } @keyframes decoupe { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: none; } } @keyframes pose { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: none; } } @keyframes trace { from { stroke-dashoffset: 400; } to { stroke-dashoffset: 0; } } @keyframes apparait { from { opacity: 0; } to { opacity: 1; } } @keyframes charge { 0%, 100% { transform: translateY(-4px); opacity: .35; } 50% { transform: translateY(4px); opacity: 1; } } @keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes clignote { 50% { opacity: .35; } } /* ===================================================================== CARTES DE PRESTATIONS ===================================================================== */ .cartes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .carte { position: relative; isolation: isolate; display: flex; flex-direction: column; padding: 26px 24px 24px; border-radius: var(--rayon); background: var(--c-nuit-3); border: 1px solid var(--c-trait-sombre); transition: transform var(--transition), border-color var(--transition); } .carte::after { /* halo orange au survol */ content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; opacity: 0; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c-orange) 22%, transparent), transparent 60%); transition: opacity var(--transition); } .carte:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c-orange) 45%, transparent); } .carte:hover::after { opacity: 1; } .carte__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: color-mix(in srgb, var(--c-orange) 10%, transparent); color: var(--c-orange); border: 1px solid color-mix(in srgb, var(--c-orange) 25%, transparent); } .carte__ico .ico { width: 28px; height: 28px; } .carte h3 { margin-top: 22px; font-size: var(--t-h3); color: var(--c-texte); } .carte p { margin-top: 10px; font-size: 15px; color: var(--c-gris-sombre); } .carte__prix { margin-top: auto; padding-top: 22px; font-family: var(--f-tech); font-size: 13px; color: var(--c-gris-sombre); } .carte__prix strong { display: block; font-family: var(--f-titre); font-size: 26px; font-weight: 650; color: var(--c-texte); letter-spacing: -0.02em; } .carte__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .carte__actions .btn { width: 100%; } .carte__lien { font-size: 14px; color: var(--c-gris-sombre); text-decoration: none; text-align: center; } .carte__lien:hover { color: var(--c-texte-sombre); text-decoration: underline; text-underline-offset: 4px; } /* ===================================================================== LIVRABLES (ce que vous recevez) ===================================================================== */ .livrables { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; } .livrables__liste { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 4px; } .livrables__liste li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--c-trait-clair); } .livrables__liste li:last-child { border-bottom: 1px solid var(--c-trait-clair); } .livrables__num { font-family: var(--f-tech); font-size: 13px; color: var(--c-orange); padding-top: 3px; } .livrables__liste strong { display: block; font-family: var(--f-titre); font-size: 17px; font-weight: 620; } .livrables__liste span { display: block; margin-top: 4px; font-size: 15px; color: var(--c-gris); } .dossier { position: relative; aspect-ratio: 1 / 1; max-width: 520px; margin-inline: auto; width: 100%; } .dossier__feuille { position: absolute; width: 68%; aspect-ratio: 0.72; padding: 22px; background: var(--c-blanc); border: 1px solid var(--c-trait-clair); border-radius: 10px; box-shadow: var(--ombre); transition: transform .6s cubic-bezier(.2,.7,.2,1); } .dossier__feuille:nth-child(1) { left: 0; top: 10%; transform: rotate(-8deg); } .dossier__feuille:nth-child(2) { left: 16%; top: 5%; transform: rotate(-2deg); } .dossier__feuille:nth-child(3) { right: 0; top: 0; transform: rotate(5deg); } .dossier:hover .dossier__feuille:nth-child(1) { transform: rotate(-12deg) translateX(-12px); } .dossier:hover .dossier__feuille:nth-child(3) { transform: rotate(9deg) translateX(12px); } .dossier__entete { display: flex; justify-content: space-between; font-family: var(--f-tech); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); padding-bottom: 12px; border-bottom: 1px solid var(--c-trait-clair); } .dossier__titre { margin-top: 14px; font-family: var(--f-titre); font-size: 15px; font-weight: 650; } .dossier__lignes { margin-top: 14px; display: grid; gap: 8px; } .dossier__lignes i { display: block; height: 6px; border-radius: 3px; background: #ECE8E1; } .dossier__lignes i:nth-child(2n) { width: 82%; } .dossier__lignes i:nth-child(3n) { width: 64%; } .dossier__plan { margin-top: 16px; } .dossier__tampon { position: absolute; right: 18px; bottom: 18px; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--c-orange); color: var(--c-orange); font-family: var(--f-tech); font-size: 9px; font-weight: 700; text-align: center; line-height: 1.2; transform: rotate(-14deg); } /* ===================================================================== MÉTHODE (étapes) ===================================================================== */ .etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; counter-reset: etape; } .etape { position: relative; padding: 28px 24px; border-radius: var(--rayon); border: 1px solid var(--c-trait-sombre); background: linear-gradient(180deg, rgba(255,255,255,.035), transparent); } .etape::before { counter-increment: etape; content: "0" counter(etape); font-family: var(--f-tech); font-size: 13px; color: var(--c-lien); display: inline-flex; padding: 4px 10px; border-radius: 99px; border: 1px solid rgba(162,59,33,.35); } .etape h3 { margin-top: 22px; font-size: var(--t-h3); color: var(--c-texte); } .etape p { margin-top: 10px; font-size: 15px; color: var(--c-gris-sombre); } .etape__ligne { position: absolute; top: 42px; left: calc(100% - 8px); width: 32px; height: 1px; background: linear-gradient(90deg, var(--c-orange), transparent); } .etape:last-child .etape__ligne { display: none; } /* ===================================================================== ENCADRÉ (copropriété, mise en garde…) et APPEL À L'ACTION ===================================================================== */ .encadre { display: grid; grid-template-columns: auto 1fr; gap: 20px; padding: 28px; border-radius: var(--rayon); background: var(--c-blanc); border: 1px solid var(--c-trait-clair); } .encadre__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--c-fond-survol); color: var(--c-lien); } .encadre__titre { font-family: var(--f-titre); font-size: 18px; font-weight: 650; } .encadre p:not(.encadre__titre) { margin-top: 8px; color: var(--c-gris); } .appel { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; padding: clamp(28px, 4vw, 44px); border-radius: 20px; background: radial-gradient(80% 140% at 100% 0%, color-mix(in srgb, var(--c-orange) 35%, transparent), transparent 60%), var(--c-nuit-2); color: var(--c-texte-sombre); } .appel::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(143,211,230,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(143,211,230,.06) 1px, transparent 1px); background-size: 32px 32px; } .appel__titre { font-family: var(--f-titre); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 650; line-height: 1.2; color: var(--c-texte); } .appel__texte { margin-top: 8px; color: var(--c-gris-sombre); } .appel__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .appel__tel { font-family: var(--f-tech); font-size: 14px; color: var(--c-gris-sombre); text-align: center; text-decoration: none; } .appel__tel:hover { color: var(--c-texte); } /* Grand appel final */ .final { text-align: center; } .final h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.6rem); max-width: 860px; margin: 18px auto 0; } .final p { max-width: 560px; margin: 20px auto 0; color: var(--c-gris-sombre); font-size: var(--t-chapo); } .final .accueil__actions { justify-content: center; } .final::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 70%; height: 60%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, var(--c-orange) 28%, transparent), transparent 70%); pointer-events: none; } /* ===================================================================== QUESTIONS FRÉQUENTES ===================================================================== */ .faq { max-width: 860px; margin-inline: auto; border-top: 1px solid var(--c-trait-clair); } .faq details { border-bottom: 1px solid var(--c-trait-clair); } .faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; cursor: pointer; list-style: none; font-family: var(--f-titre); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); font-weight: 600; } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--c-lien); } .faq__reponse { padding: 0 0 28px; color: var(--c-gris); max-width: 720px; } .faq__reponse p + p { margin-top: 14px; } /* ===================================================================== PAGES DE CONTENU : bandeau + article (règles de lecture) ===================================================================== */ .bandeau { position: relative; overflow: hidden; padding: calc(var(--hauteur-entete) + clamp(40px, 6vw, 80px)) 0 clamp(48px, 6vw, 80px); background: var(--c-sauge-fonce); color: var(--c-texte); } .bandeau__grille { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: end; } .fil-ariane { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 24px; padding: 0; font-size: 13px; color: var(--c-gris); } .fil-ariane li + li::before { content: "/"; margin-right: 8px; opacity: .5; } .fil-ariane a { text-decoration: none; } .fil-ariane a:hover { text-decoration: underline; color: var(--c-texte); } .bandeau h1 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); margin-top: 18px; } .bandeau__chapo { margin-top: 22px; font-size: var(--t-chapo); color: var(--c-gris); max-width: none; } .bandeau__prix { padding: 24px; border-radius: var(--rayon); background: var(--c-blanc); box-shadow: var(--ombre); } .bandeau__prix small { font-family: var(--f-tech); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--c-gris); } .bandeau__prix strong { display: block; margin: 6px 0 18px; font-family: var(--f-titre); font-size: 40px; font-weight: 700; color: var(--c-texte); letter-spacing: -.03em; } .bandeau__prix strong span { font-size: 16px; font-weight: 500; color: var(--c-gris); letter-spacing: 0; } .bandeau__prix .btn { width: 100%; } .article-grille { display: grid; grid-template-columns: minmax(0, var(--largeur-texte)) 300px; gap: clamp(40px, 6vw, 80px); justify-content: center; } .article-cote { position: relative; } .article-cote__colle { position: sticky; top: calc(var(--hauteur-entete) + 24px); display: grid; gap: 16px; } .mini-appel { padding: 22px; border-radius: var(--rayon); background: var(--c-nuit-2); color: var(--c-texte-sombre); } .mini-appel p { font-family: var(--f-titre); font-weight: 600; font-size: 17px; line-height: 1.3; } .mini-appel .btn { width: 100%; margin-top: 16px; } /* ---- Le texte des articles : règles de lecture ---- */ .prose { font-size: var(--t-texte); line-height: var(--interligne); color: var(--c-texte); } .prose > * + * { margin-top: var(--esp-paragraphe); } .prose p, .prose li { text-align: justify; hyphens: none; -webkit-hyphens: none; } .prose h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem); margin-top: var(--esp-avant-h2); } .prose h2::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 18px; border-radius: 2px; background: var(--c-orange); } .prose h2 + * { margin-top: var(--esp-sous-h2); } .prose > :first-child { margin-top: 0; } .prose h3 { font-size: var(--t-h3); margin-top: var(--esp-avant-h3); } .prose h3 + * { margin-top: 14px; } .prose ul, .prose ol { padding-left: 1.3em; margin-top: 36px; margin-bottom: 36px; } .prose li + li { margin-top: 6px; } /* puces serrées entre elles */ .prose li::marker { color: var(--c-orange); } .prose ul + *, .prose ol + * { margin-top: 0; } .prose strong { font-weight: 700; } .prose .appel, .prose .encadre { margin-block: 56px; } .prose .lien-action { margin-top: var(--esp-paragraphe); } .prose .signature { font-size: var(--t-petit); color: var(--c-gris); margin-top: 64px; padding-top: 20px; border-top: 1px solid var(--c-trait-clair); text-align: left; } /* Tableau simple */ .tableau { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--c-blanc); border-radius: var(--rayon-petit); overflow: hidden; border: 1px solid var(--c-trait-clair); } .tableau th, .tableau td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--c-trait-clair); vertical-align: top; } .tableau th { font-family: var(--f-titre); font-weight: 700; background: var(--c-sauge-clair); } .tableau tr:last-child td { border-bottom: 0; } .tableau td:last-child { font-family: var(--f-tech); white-space: nowrap; } .tableau--texte td:last-child { font-family: inherit; white-space: normal; } .tableau--texte td:first-child { white-space: nowrap; font-weight: 600; } .tableau--comparatif { table-layout: fixed; } .tableau--comparatif th:first-child { width: 38%; } .tableau--comparatif th, .tableau--comparatif td, .tableau--comparatif td:last-child { white-space: normal; overflow-wrap: break-word; font-family: inherit; line-height: 1.55; } .tableau--comparatif td:first-child { font-weight: 600; } @media (max-width: 640px) { .tableau--comparatif th, .tableau--comparatif td { padding: 12px 10px; font-size: 14px; } } /* ===================================================================== PIED DE PAGE ===================================================================== */ .pied { background: var(--c-nuit); color: var(--c-gris-sombre); padding: 80px 0 32px; font-size: 15px; border-top: 1px solid var(--c-trait-sombre); } .pied__grille { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; } .pied__marque p { margin: 20px 0 24px; max-width: 360px; } .pied__titre { font-family: var(--f-tech); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--c-texte-sombre); margin-bottom: 18px; } .pied a { color: var(--c-gris-sombre); } .pied a:hover { color: var(--c-texte-sombre); } .pied__contact { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pied__contact li { display: flex; gap: 12px; align-items: flex-start; } .pied__contact .ico { width: 18px; height: 18px; color: var(--c-orange); margin-top: 3px; } .pied__contact a { text-decoration: none; } .pied__bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--c-trait-sombre); font-size: 13px; } /* Barre d'action fixe en bas de l'écran (téléphone) */ .barre-mobile { display: none; } @media (max-width: 720px) { .barre-mobile { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; gap: 10px; padding: 8px; border-radius: 99px; background: rgba(18, 22, 30, .9); backdrop-filter: blur(12px); border: 1px solid var(--c-trait-sombre); transform: translateY(140%); transition: transform var(--transition); } .barre-mobile.est-visible { transform: none; } .barre-mobile .btn { flex: 1; min-height: 48px; } .barre-mobile__tel { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; } .pied { padding-bottom: 110px; } } /* ===================================================================== APPARITION AU DÉFILEMENT ===================================================================== */ .js [data-apparait] { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--delai, 0s); } .js [data-apparait].est-visible { opacity: 1; transform: none; } /* ===================================================================== ADAPTATION AUX ÉCRANS ===================================================================== */ @media (max-width: 1100px) { .cartes { grid-template-columns: repeat(2, 1fr); } .etapes { grid-template-columns: repeat(2, 1fr); } .etape__ligne { display: none; } } @media (max-width: 960px) { .accueil__grille, .livrables, .bandeau__grille { grid-template-columns: 1fr; } .schema { max-width: 560px; } .article-grille { grid-template-columns: minmax(0, 1fr); } .article-cote { display: none; } .pied__grille { grid-template-columns: 1fr 1fr; } .pied__marque { grid-column: 1 / -1; } .appel { grid-template-columns: 1fr; } } @media (max-width: 640px) { .cartes, .etapes { grid-template-columns: 1fr; } .pied__grille { grid-template-columns: 1fr; } .accueil__actions .btn { width: 100%; } .schema__fiche { left: 8px; bottom: -30px; } .schema__barre span:last-child { display: none; } .encadre { grid-template-columns: 1fr; } .prose p, .prose li { text-align: left; } /* colonne trop étroite pour justifier */ .dossier { aspect-ratio: 1 / 1.05; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .js [data-apparait] { opacity: 1; transform: none; } } /* Titre de section hors .entete-section */ .titre-section { font-size: var(--t-h2); margin-top: 18px; } /* Cartes des outils sur l'accueil */ .outils-accueil { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .outil-carte { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 20px; padding: 28px; border-radius: var(--rayon); border: 1px solid var(--c-trait-clair); background: var(--c-papier); text-decoration: none; transition: border-color var(--transition), transform var(--transition); } .outil-carte::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-fond-survol); transform: scaleX(0); transform-origin: left; transition: transform var(--transition); } .outil-carte:hover { border-color: var(--c-lien); transform: translateY(-2px); } .outil-carte:hover::before { transform: scaleX(1); } .outil-carte__ico { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 14px; background: var(--c-nuit-2); color: var(--c-orange); } .outil-carte__ico .ico { width: 28px; height: 28px; } .outil-carte__texte { flex: 1; } .outil-carte__texte strong { display: block; font-family: var(--f-titre); font-size: 20px; font-weight: 650; } .outil-carte__texte small { display: block; margin-top: 4px; font-size: 14px; color: var(--c-gris); } .outil-carte__fleche .ico { width: 22px; height: 22px; color: var(--c-lien); transition: transform var(--transition); } .outil-carte:hover .outil-carte__fleche .ico { transform: translateX(5px); } @media (max-width: 760px) { .outils-accueil { grid-template-columns: 1fr; } .outil-carte { padding: 20px; } } /* ===================================================================== OUTILS GRATUITS (quiz dans un article ; styles des réponses dans simulateur.css) ===================================================================== */ .outil { display: grid; gap: 28px; padding: clamp(22px, 4vw, 36px); border-radius: 20px; background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--c-orange) 18%, transparent), transparent 60%), var(--c-nuit-2); color: var(--c-texte-sombre); box-shadow: 0 30px 60px -30px rgba(12,15,20,.6); } .prose .outil p, .prose .appel p, .prose .encadre p, .prose .source { text-align: left; } .prose .outil { margin-block: 8px 56px; } .outil .question { padding-top: 24px; } .outil__etiquette { font-family: var(--f-tech); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-orange); } .outil__attente { font-size: 14px; color: var(--c-gris-sombre); padding: 16px; border: 1px dashed var(--c-trait-sombre); border-radius: var(--rayon-petit); text-align: center !important; } .outil__resultat { padding: 24px; border-radius: var(--rayon); border: 1px solid; animation: entree .5s cubic-bezier(.2,.7,.2,1); } .outil__resultat p + p { margin-top: 8px; color: var(--c-gris-sombre); } .outil__resultat .btn { margin-top: 18px; } .outil__resultat-titre { font-family: var(--f-titre); font-size: 22px; font-weight: 650; color: var(--c-texte); } .outil__resultat--0 { border-color: rgba(47,163,107,.5); background: rgba(47,163,107,.08); } .outil__resultat--1 { border-color: rgba(240,180,60,.55); background: rgba(240,180,60,.08); } .outil__resultat--2 { border-color: color-mix(in srgb, var(--c-orange) 70%, transparent); background: color-mix(in srgb, var(--c-orange) 12%, transparent); } .outil__avertissement { font-size: 13px; color: #7C8392; } .source { font-size: var(--t-petit); color: var(--c-gris); } @keyframes entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } /* ===================================================================== PAGES SIMPLES (merci, contact, 404) ===================================================================== */ .simple { position: relative; min-height: 88vh; padding: calc(var(--hauteur-entete) + clamp(40px, 6vw, 88px)) 0 var(--esp-section); background: radial-gradient(50% 50% at 80% 10%, color-mix(in srgb, var(--c-orange) 16%, transparent), transparent 70%), var(--c-nuit); color: var(--c-texte-sombre); } .simple__boite { max-width: 820px; } .simple h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); margin-top: 16px; } .simple__chapo { margin-top: 18px; font-size: var(--t-chapo); color: var(--c-gris-sombre); max-width: 640px; } .simple__pastille { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; border-radius: 50%; background: rgba(47, 163, 107, .14); color: var(--c-succes); box-shadow: 0 0 0 8px rgba(47, 163, 107, .06); } .simple__pastille .ico { width: 30px; height: 30px; stroke-width: 2; } .recap { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .recap > div { flex: 1 1 220px; padding: 18px 20px; border-radius: var(--rayon); background: var(--c-nuit-3); border: 1px solid var(--c-trait-sombre); } .recap small { display: block; font-family: var(--f-tech); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris-sombre); } .recap strong { display: block; margin-top: 6px; font-family: var(--f-titre); font-size: 22px; font-weight: 650; color: var(--c-texte); } .suite { list-style: none; margin: 40px 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .suite li { display: flex; gap: 14px; padding: 20px; border-radius: var(--rayon); border: 1px solid var(--c-trait-sombre); } .suite span { font-family: var(--f-tech); font-size: 13px; color: var(--c-orange); } .suite strong { color: var(--c-texte); } .suite p { margin-top: 4px; font-size: 14px; color: var(--c-gris-sombre); } .contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 80px); align-items: start; } .contact__infos { list-style: none; margin: 36px 0; padding: 0; display: grid; gap: 18px; } .contact__infos li { display: flex; gap: 16px; align-items: center; } .contact__infos .ico { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: color-mix(in srgb, var(--c-orange) 10%, transparent); color: var(--c-orange); } .contact__infos small { display: block; font-family: var(--f-tech); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris-sombre); } .contact__infos a, .contact__infos span { font-size: 17px; font-weight: 600; color: var(--c-texte); text-decoration: none; } .contact__infos a:hover { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 860px) { .contact, .suite { grid-template-columns: 1fr; } } /* Espace privé « Demandes reçues » */ .admin-connexion { max-width: 440px; margin-inline: auto; } .admin-tete { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 28px; } .admin-nb { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; margin-left: 8px; border-radius: 99px; background: var(--c-orange); font-size: 18px; vertical-align: middle; } .admin-alerte { margin-bottom: 20px; padding: 14px 18px; border-radius: var(--rayon-petit); background: rgba(217,58,58,.15); border: 1px solid rgba(217,58,58,.5); color: #FFB4A8; } .admin-liste { display: grid; gap: 10px; } .admin-demande { border-radius: var(--rayon); background: var(--c-nuit-3); border: 1px solid var(--c-trait-sombre); } .admin-demande[open] { border-color: color-mix(in srgb, var(--c-orange) 50%, transparent); } .admin-demande summary { display: grid; grid-template-columns: 130px 1fr 1.4fr auto; gap: 16px; align-items: center; padding: 16px 20px; cursor: pointer; list-style: none; color: var(--c-gris-sombre); } .admin-demande summary::-webkit-details-marker { display: none; } .admin-demande summary strong { color: var(--c-texte); } .admin-demande__date { font-family: var(--f-tech); font-size: 13px; } .admin-demande__prix { font-family: var(--f-tech); color: var(--c-lien); } .admin-demande__corps { display: grid; gap: 14px; padding: 0 20px 20px; font-size: 15px; } .admin-demande__corps a { color: var(--c-texte); } .admin-demande__corps ul { margin: 0; padding-left: 18px; color: var(--c-gris-sombre); display: grid; gap: 4px; } .admin-demande__corps strong { color: var(--c-texte-sombre); } .admin-message { padding: 14px; border-radius: var(--rayon-petit); background: var(--c-sauge-clair); } .admin-suppr { justify-self: start; padding: 0; border: 0; background: none; color: #FF8A7A; font-size: 13px; cursor: pointer; text-decoration: underline; } @media (max-width: 760px) { .admin-demande summary { grid-template-columns: 1fr auto; } .admin-demande__date { grid-column: 1 / -1; } } /* Sélecteur de style (aperçu seulement, désactivé dans config.php) */ .apercu-styles { position: fixed; left: 12px; bottom: 12px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-radius: 12px; background: #1E1E1E; color: #fff; font-size: 13px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.5); } .apercu-styles span { padding: 0 8px; opacity: .7; } .apercu-styles a { padding: 7px 12px; border-radius: 8px; text-decoration: none; } .apercu-styles a:hover { background: rgba(255,255,255,.12); } .apercu-styles a[aria-current] { background: var(--c-orange); color: var(--c-texte-sur-orange); font-weight: 700; } @media (max-width: 720px) { .apercu-styles { bottom: 84px; } } /* ===================================================================== ÉLÉMENTS COMMUNS AUX TROIS STYLES (accueil) ===================================================================== */ /* ---- Mini-simulateur ---- */ .mini-sim { display: grid; gap: 22px; border: 0; margin: 0; } .mini-sim fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } .mini-sim__etiquette { display: block; padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 700; color: var(--c-gris); } .mini-sim__projets { display: flex; flex-wrap: wrap; gap: 8px; } .mini-sim__projets legend { width: 100%; } .mini-sim__projet { position: relative; cursor: pointer; } .mini-sim__projet input { position: absolute; opacity: 0; pointer-events: none; } .mini-sim__projet span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--c-trait-clair); background: var(--c-blanc); font-weight: 700; font-size: 15px; transition: border-color var(--transition), background var(--transition); } .mini-sim__projet:hover span { border-color: var(--c-texte); } .mini-sim__projet input:checked + span { border-color: var(--c-texte); background: var(--c-texte); color: #fff; } .mini-sim__projet input:focus-visible + span { outline: 2px solid var(--c-orange); outline-offset: 2px; } .mini-sim__largeur { display: grid; grid-template-columns: 1fr auto; align-items: end; } .mini-sim__largeur .mini-sim__etiquette { margin: 0; } .mini-sim__valeur { font-family: var(--f-titre); font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; } .mini-sim__piste { --pos: 30%; grid-column: 1 / -1; width: 100%; height: 34px; margin: 4px 0 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; } .mini-sim__piste::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-orange) var(--pos), var(--c-trait-clair) var(--pos)); } .mini-sim__piste::-moz-range-track { height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-orange) var(--pos), var(--c-trait-clair) var(--pos)); } .mini-sim__piste::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; border-radius: 50%; background: var(--c-blanc); border: 5px solid var(--c-texte); box-shadow: 0 3px 8px rgba(30,36,36,.3); } .mini-sim__piste::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--c-blanc); border: 5px solid var(--c-texte); } .mini-sim__resultat { display: grid; gap: 2px; padding-top: 18px; border-top: 1.5px dashed var(--c-trait-clair); } .mini-sim__resultat .mini-sim__etiquette { margin: 0; } .mini-sim__prix { font-family: var(--f-titre); font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .mini-sim__prix.vient-de-changer { animation: prix-change .5s cubic-bezier(.2,.7,.2,1); } @keyframes prix-change { 30% { color: var(--c-brique); transform: translateY(-3px); } } .mini-sim__resultat small { font-size: 13px; color: var(--c-gris); } .mini-sim__bouton { width: 100%; } /* ---- Ruban défilant des prestations ---- */ .ruban { overflow: hidden; padding: 16px 0; background: var(--c-nuit-2); color: var(--c-texte-sombre); } .ruban__piste { display: flex; width: max-content; animation: defile 40s linear infinite; } .ruban span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--f-titre); font-size: 20px; font-weight: 700; white-space: nowrap; } .ruban span::after { content: ""; width: 10px; height: 10px; background: var(--c-orange); transform: rotate(45deg); } @keyframes defile { to { transform: translateX(-50%); } } .ruban:hover .ruban__piste { animation-play-state: paused; } /* ---- Lignes de tarifs (prestations) ---- */ .tarifs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--c-trait-sombre); } .tarif { display: grid; grid-template-columns: 56px 1fr auto auto; gap: 24px; align-items: center; padding: 26px 0; border-bottom: 1px solid var(--c-trait-sombre); transition: background var(--transition); } .tarif:hover { background: var(--c-sauge-clair); } .tarif__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: color-mix(in srgb, var(--c-orange) 12%, transparent); color: var(--c-lien); } .tarif__ico .ico { width: 28px; height: 28px; } .tarif h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); color: var(--c-texte); } .tarif h3 a { text-decoration: none; } .tarif h3 a:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } .tarif__texte p { margin-top: 4px; color: var(--c-gris-sombre); } .tarif__prix { font-family: var(--f-titre); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); font-weight: 800; color: var(--c-texte); white-space: nowrap; font-variant-numeric: tabular-nums; } .tarif__prix small { font-family: var(--f-texte); font-size: 14px; font-weight: 600; color: var(--c-gris-sombre); } /* ---- Bloc « ouverture de baie à Paris » ---- */ .bloc-local__grille { display: block; } .bloc-local .titre-section { margin-bottom: 24px; } .bloc-local__texte { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 40px; } .bloc-local__texte p { color: var(--c-gris); font-size: 17px; } .bloc-local__texte p + p { margin-top: 0; } .bloc-local__liens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-column: 1 / -1; gap: 12px; margin-top: 6px; } .bloc-local__liens .lien-action { width: 100%; min-width: 0; } .bloc-local { padding-bottom: 24px; } .bloc-local + .avant-apres { padding-top: 32px; } /* ---- Bande professionnels ---- */ .section--courte { padding-block: clamp(32px, 4vw, 48px); } .bande-pros { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(24px, 4vw, 36px); border-radius: var(--rayon); background: var(--c-sauge-fonce); } .bande-pros__titre { font-family: var(--f-titre); font-size: 22px; font-weight: 700; } .bande-pros p:not(.bande-pros__titre) { margin-top: 6px; color: var(--c-gris); max-width: 620px; } /* ---- Réalisations ---- */ .realisations { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; } .realisation img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); } .realisation__lieu { margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--c-lien); } .realisation h3 { margin-top: 4px; font-size: var(--t-h3); } .realisation p:last-child { margin-top: 6px; color: var(--c-gris); } /* ---- Icônes des livrables ---- */ .livrables__num { color: var(--c-lien); padding-top: 0; } .livrables__num .ico { width: 26px; height: 26px; } @media (max-width: 860px) { .tarif { grid-template-columns: 44px 1fr; gap: 12px 16px; } .tarif__ico { width: 44px; height: 44px; } .tarif__prix { grid-column: 2; } .tarif__action { grid-column: 2; justify-self: start; } .bloc-local__texte, .bloc-local__liens { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ruban__piste { animation: none; } } /* Les éléments inclinés (ruban) ne créent pas de défilement horizontal */ main { overflow-x: clip; } /* Moins de vide entre le bandeau d'une page et son contenu */ .bandeau + .section { padding-top: clamp(40px, 6vw, 72px); } @media (max-width: 720px) { .apercu-styles { left: 8px; right: 8px; bottom: 76px; justify-content: center; font-size: 12px; padding: 4px; } .apercu-styles span { display: none; } .apercu-styles a { padding: 6px 9px; } } /* ===================================================================== LOGO : icône de briques qui tourne sur elle-même, puis le nom ===================================================================== */ .logo { display: inline-flex; align-items: center; gap: 12px; } .logo__texte { height: 40px; width: auto; } .entete__logo { display: inline-flex; } @media (max-width: 640px) { .logo3d { --u: .48px; } .logo__texte { height: 32px; } } /* ===================================================================== DESSIN À LA MAIN : croquis animé, post-it, fiche scotchée, soulignement ===================================================================== */ .souligne { position: relative; display: inline-block; margin-top: .12em; font-size: .6em; letter-spacing: -.02em; white-space: nowrap; } .souligne svg { position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .32em; overflow: visible; } .souligne path { fill: none; stroke: var(--c-orange); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: trait-main 1s .3s cubic-bezier(.3,.7,.2,1) forwards; } @keyframes trait-main { to { stroke-dashoffset: 0; } } /* Fiche du mini-simulateur, scotchée sur le carnet */ .fiche { position: relative; margin-top: 32px; max-width: 540px; padding: 26px 26px 24px; background: var(--c-blanc); border-radius: 4px; transform: rotate(-.6deg); box-shadow: 0 2px 3px rgba(30,36,36,.08), 0 22px 40px -22px rgba(30,36,36,.45); } .fiche__scotch { position: absolute; top: -14px; left: 50%; width: 120px; height: 28px; margin-left: -60px; background: rgba(247, 220, 111, .75); transform: rotate(-3deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* Croquis du mur */ .croquis { position: relative; margin: 0; } .croquis svg { width: 100%; height: auto; overflow: visible; } .croquis__trait path, .croquis__trait { fill: none; stroke: var(--c-crayon); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .croquis__briques path { stroke-width: 1.4; opacity: .55; } .croquis__charges path { stroke: var(--c-orange); stroke-width: 2.4; } .croquis__ouverture { fill: rgba(255, 255, 255, .55); stroke: var(--c-crayon); stroke-width: 2; stroke-dasharray: 9 7; transition: x .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1); } .croquis__poutre { fill: var(--c-orange); stroke: var(--c-brique); stroke-width: 1.5; transition: x .45s cubic-bezier(.2,.7,.2,1), width .45s cubic-bezier(.2,.7,.2,1), y .45s, height .45s; } .croquis__etai { stroke: var(--c-crayon); stroke-width: 1.6; stroke-dasharray: 4 5; fill: none; } .croquis__cote { stroke: var(--c-brique); stroke-width: 2; fill: none; } .croquis__fleche { stroke: var(--c-brique); stroke-width: 1.8; fill: none; } .croquis__fissure { fill: none; stroke: var(--c-brique); stroke-width: 3; stroke-linejoin: round; } .croquis__main { font-family: var(--f-main); font-size: 22px; fill: var(--c-brique); } .croquis__main--cote { font-size: 30px; font-weight: 700; } .croquis__main--titre { font-size: 18px; fill: var(--c-gris); } .postit { position: absolute; right: -2%; top: 9%; width: 200px; padding: 16px 18px 14px; background: var(--c-postit); transform: rotate(3deg); box-shadow: 0 4px 6px rgba(0,0,0,.08), 0 22px 30px -18px rgba(60,50,10,.55); font-family: var(--f-main); color: #3B3317; } .postit span { display: block; font-size: 18px; } .postit strong { display: block; font-size: 40px; line-height: 1.05; color: var(--c-brique); font-weight: 700; } .postit small { font-size: 16px; } /* Titres de section : trait à la main */ .entete-section h2, .titre-section { position: relative; } .entete-section h2::after, .titre-section::after { content: ""; display: block; width: 90px; height: 10px; margin-top: 14px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 10'%3E%3Cpath d='M2 6 C 20 2, 40 9, 60 5 S 82 3, 88 6' fill='none' stroke='%23ED5B38' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E"); } .entete-section--centre h2::after { margin-inline: auto; } .titre-accentue { position: relative; } .entete-section h2.titre-accentue::after, .titre-section.titre-accentue::after, .prose h2.titre-accentue::after, .entete-section h2.titre-sans-trait::after { content: none; } .souligne.souligne--mot { display: inline-block; margin-top: 0; font-size: 1em; letter-spacing: inherit; color: inherit; } .souligne--mot svg { bottom: -.16em; height: .27em; } .souligne--mot path { animation: none; stroke-dashoffset: 0; } .js .souligne--mot path { stroke-dashoffset: 340; } .js .souligne--mot.est-surligne path { animation: trait-main .7s cubic-bezier(.3,.7,.2,1) forwards; } @media (prefers-reduced-motion: reduce) { .js .souligne--mot path { stroke-dashoffset: 0; animation: none; } } /* ===================================================================== MÉLANGE CARNET + STANDARD : feuille de dessin, scotch, réglages compacts ===================================================================== */ .accueil-mix { padding: calc(var(--hauteur-entete) + clamp(28px, 4vw, 56px)) 0 clamp(48px, 6vw, 80px); } .accueil-mix h1 { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; } .accueil-mix .souligne { display: inline-block; color: var(--c-brique); } .accueil-mix__chapo { margin-top: 22px; max-width: 580px; font-size: var(--t-chapo); color: var(--c-gris); } .lien-tel { display: inline-flex; align-items: center; gap: 10px; color: var(--c-texte); text-decoration: none; } .lien-tel .ico { width: 20px; height: 20px; color: var(--c-lien); } .lien-tel:hover strong { text-decoration: underline; text-underline-offset: 4px; } /* Feuille de papier quadrillé (seul endroit où le quadrillage apparaît) */ .feuille { position: relative; padding: 18px 22px 24px; border-radius: 6px; background-color: var(--c-blanc); background-image: linear-gradient(rgba(58,100,108,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(58,100,108,.09) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 2px 3px rgba(30,36,36,.06), 0 26px 46px -26px rgba(30,36,36,.5); } .scotch { position: absolute; top: -12px; width: 104px; height: 26px; background: rgba(247, 220, 111, .78); box-shadow: 0 1px 2px rgba(0,0,0,.08); } .scotch--g { left: 28px; transform: rotate(-5deg); } .scotch--d { right: 28px; transform: rotate(4deg); } /* Réglages compacts : le prix est sur le post-it du croquis */ .mini-sim--compact { gap: 14px; } .mini-sim--compact .mini-sim__resultat { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .mini-sim--compact .mini-sim__projet span { padding: 8px 14px; font-size: 14px; } .mini-sim--compact .mini-sim__valeur { font-size: 24px; } .mini-sim--compact .mini-sim__etiquette { margin-bottom: 6px; } @media (max-width: 640px) { .postit { width: 150px; padding: 12px 14px; right: 0; } .postit strong { font-size: 30px; } .postit span, .postit small { font-size: 14px; } .croquis__main { font-size: 26px; } } /* Liste d'atouts cochés (bandeaux d'accueil) */ .atouts-standard { list-style: none; margin: 28px 0 32px; padding: 0; display: grid; gap: 10px; } .atouts-standard li { display: flex; align-items: center; gap: 10px; font-weight: 700; } .atouts-standard .ico { width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--c-texte); color: #fff; stroke-width: 2.4; } .accueil-etabli .feuille--dessin .croquis svg { max-height: 400px; } /* ---- Outil de dessin : compléments (étages, silhouette, avant / après, tracé) ---- */ [hidden] { display: none !important; } .croquis__charges path { fill: none; stroke: var(--c-orange); stroke-linecap: round; stroke-linejoin: round; } .croquis__etage-sup path { fill: none; stroke: var(--c-crayon); stroke-width: 1.4; stroke-dasharray: 6 7; opacity: .55; } .croquis__main--doux { font-size: 18px; fill: var(--c-gris); } .croquis__main--petit { font-size: 15px; fill: var(--c-gris); } .croquis__personne circle, .croquis__personne path { fill: none; stroke: var(--c-crayon); stroke-width: 2; stroke-linecap: round; opacity: .75; } .croquis__personne { transition: transform .45s cubic-bezier(.2,.7,.2,1); } .croquis__etai--poteau { stroke: var(--c-brique); stroke-width: 2.4; stroke-dasharray: 8 6; } .croquis__apres { transition: opacity .35s; } /* Le croquis se trace au crayon à l'arrivée sur la page */ .croquis--trace .croquis__trait path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tracer 1.4s .15s cubic-bezier(.4,.1,.2,1) forwards; } .croquis--trace .croquis__briques path { animation-delay: .9s; } @keyframes tracer { to { stroke-dashoffset: 0; } } /* Compteur d'étages du mini-simulateur */ .mini-sim__etages { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .mini-sim__etages .mini-sim__etiquette { margin: 0; } .mini-sim__compteur { display: inline-flex; align-items: center; gap: 6px; } .mini-sim__compteur button { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--c-trait-clair); background: var(--c-blanc); font-size: 20px; line-height: 1; cursor: pointer; transition: border-color var(--transition); } .mini-sim__compteur button:hover:not(:disabled) { border-color: var(--c-texte); } .mini-sim__compteur button:disabled { opacity: .35; cursor: default; } .mini-sim__compteur output { min-width: 2ch; text-align: center; font-family: var(--f-titre); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; } .postit small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.25; } @media (prefers-reduced-motion: reduce) { .croquis--trace .croquis__trait path { animation: none; stroke-dashoffset: 0; } } /* Option « jusqu'au plafond » du mini-simulateur */ .mini-sim__option { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 600; font-size: 15px; } .mini-sim__option input { position: absolute; opacity: 0; } .mini-sim__case { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--c-trait-clair); background: var(--c-blanc); display: grid; place-items: center; transition: background var(--transition), border-color var(--transition); } .mini-sim__option input:checked + .mini-sim__case { background: var(--c-texte); border-color: var(--c-texte); } .mini-sim__option input:checked + .mini-sim__case::after { content: ""; width: 10px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-1px) rotate(-45deg); } .mini-sim__option input:focus-visible + .mini-sim__case { outline: 2px solid var(--c-orange); outline-offset: 2px; } .mini-sim__option small { margin-left: auto; font-size: 13px; font-weight: 700; color: var(--c-lien); } /* Suppression : appuis hachurés et mur supprimé en pointillés légers */ .croquis__appui { fill: rgba(58,64,64,.18); stroke: var(--c-crayon); stroke-width: 1.8; } .croquis__ouverture--supprime { fill: none; stroke-dasharray: 3 9; opacity: .55; } /* Vignettes dessinées des réponses (forme des fissures) */ .reponses--dessins { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .reponses--dessins .reponse { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px; text-align: center; } .reponse__dessin { width: 100%; height: auto; border-radius: 8px; background: var(--c-sauge-clair); } .reponse__dessin .d-mur { fill: #EFEAE2; stroke: #B9B2A6; stroke-width: 1; } .reponse__dessin .d-brique { fill: none; stroke: #CFC7BA; stroke-width: 1; } .reponse__dessin .d-ouverture { fill: #CFE0E4; stroke: #6F7C7C; stroke-width: 1.5; } .reponse__dessin .d-plafond { fill: none; stroke: #6F7C7C; stroke-width: 3; } .reponse__dessin .d-fissure { fill: none; stroke: #2B2B2B; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .reponse__dessin .d-fine { stroke-width: 1.1; } .reponses--dessins .reponse:has(input:checked) .reponse__dessin { background: #FBE3DA; } .reponses--dessins .reponse__texte { font-size: 14px; } /* ===================================================================== LOGO EN 3D : 8 briques (pavés à 6 faces) qui tournent dans une vraie perspective ===================================================================== */ .logo3d { display: block; --u: .56px; --tilt: -14deg; flex: none; width: calc(100 * var(--u)); height: calc(96 * var(--u)); perspective: calc(380 * var(--u)); } .logo3d__mur { display: block; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: logo3d 9s linear infinite; } @keyframes logo3d { from { transform: rotateX(var(--tilt)) rotateY(0deg); } to { transform: rotateX(var(--tilt)) rotateY(360deg); } } .brique { --W: calc(var(--l) * var(--u)); --H: calc(21 * var(--u)); --D: calc(22 * var(--u)); position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: var(--W); height: var(--H); transform-style: preserve-3d; } .brique i { position: absolute; display: block; } .brique .av { inset: 0; background: var(--c-orange); transform: translateZ(calc(var(--D) / 2)); } .brique .ar { inset: 0; background: color-mix(in srgb, var(--c-orange) 86%, #000); transform: rotateY(180deg) translateZ(calc(var(--D) / 2)); } .brique .g, .brique .d { top: 0; height: 100%; width: var(--D); left: calc((var(--W) - var(--D)) / 2); background: var(--c-brique); } .brique .g { transform: rotateY(-90deg) translateZ(calc(var(--W) / 2)); } .brique .d { transform: rotateY(90deg) translateZ(calc(var(--W) / 2)); background: color-mix(in srgb, var(--c-brique) 88%, #000); } .brique .h, .brique .b { left: 0; width: 100%; height: var(--D); top: calc((var(--H) - var(--D)) / 2); } .brique .h { background: #F37A5B; transform: rotateX(90deg) translateZ(calc(var(--H) / 2)); } .brique .b { background: #8E3420; transform: rotateX(-90deg) translateZ(calc(var(--H) / 2)); } .pied__marque .logo3d { --u: .5px; } .entete__logo:hover .logo3d__mur { animation-duration: 3s; } @media (prefers-reduced-motion: reduce) { .logo3d__mur { animation: none; transform: rotateX(var(--tilt)) rotateY(32deg); } } /* ===================================================================== VERSION CLAIRE : ruban, barre mobile, logo du pied, appel final, pied de page ===================================================================== */ .logo .logo-clair { display: none; } .ruban { background: var(--c-sauge-fonce); color: var(--c-texte); border-block: 1px solid var(--c-trait-clair); } .ruban span { font-size: 18px; font-weight: 600; } .ruban span::after { background: var(--c-orange); width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg); } @media (max-width: 720px) { .barre-mobile { background: rgba(255,255,255,.94); border-color: var(--c-trait-clair); box-shadow: 0 10px 30px -12px rgba(30,36,36,.4); } .barre-mobile__tel { background: var(--c-sauge-clair); color: var(--c-texte); } } .simple { background: var(--c-sauge); } .quadrillage::before { display: none; } /* Appel final : une grande feuille scotchée, comme en haut de page */ .final { background: var(--c-sauge); } .final::after { display: none; } .final__feuille { position: relative; max-width: 980px; margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 64px); border-radius: 6px; text-align: center; background-color: var(--c-blanc); background-image: linear-gradient(rgba(58,100,108,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(58,100,108,.08) 1px, transparent 1px); background-size: 22px 22px; box-shadow: 0 2px 3px rgba(30,36,36,.06), 0 30px 60px -34px rgba(30,36,36,.5); transform: rotate(-.4deg); } .final__feuille h2 { margin-top: 0; } .final__feuille .accueil__actions { justify-content: center; } /* Pied de page clair, posé sur un sauge soutenu */ .pied { background: var(--c-sauge-fonce); color: var(--c-gris); border-top: 0; } .pied a { color: var(--c-gris); } .pied a:hover { color: var(--c-texte); } .pied__titre { color: var(--c-texte); } .pied__contact .ico { color: var(--c-lien); } .pied__bas { border-color: rgba(30,36,36,.14); } .pied .lien-action--sombre { background: var(--c-blanc); border-color: transparent; color: var(--c-texte); } .pied .lien-action--sombre .ico { color: var(--c-lien); } /* ---- Démonstration guidée du mini-simulateur ---- */ .mini-sim__largeur { position: relative; } .mini-sim__indice { position: absolute; left: 58%; top: -4px; transform: translateX(-50%); z-index: 2; padding: 6px 12px; border-radius: 8px; background: var(--c-texte); color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; animation: indice-entre .4s cubic-bezier(.2,.7,.2,1); } .mini-sim__indice::after { content: ""; position: absolute; left: calc(50% - 6px); bottom: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--c-texte); } @keyframes indice-entre { from { opacity: 0; } } .mini-sim__piste.est-guidee::-webkit-slider-thumb { animation: pouce 1s ease-out infinite; } .mini-sim__piste.est-guidee::-moz-range-thumb { animation: pouce 1s ease-out infinite; } @keyframes pouce { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-orange) 55%, transparent), 0 3px 8px rgba(30,36,36,.3); } 100% { box-shadow: 0 0 0 14px color-mix(in srgb, var(--c-orange) 0%, transparent), 0 3px 8px rgba(30,36,36,.3); } } .mini-sim__bouton.est-mise-en-avant { animation: bouton-appel 1.1s ease-in-out 2; } @keyframes bouton-appel { 50% { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-orange) 22%, transparent), 0 14px 26px -12px rgba(178,68,42,.9); } } /* ===================================================================== SECTIONS ANTHRACITE : des temps forts, pas tout le site ===================================================================== */ .section--anthracite { background: var(--c-anthracite); color: var(--c-anthracite-texte); } .section--anthracite .entete-section p { color: var(--c-anthracite-doux); } .section--anthracite .tarifs { border-color: var(--c-anthracite-trait); } .section--anthracite .tarif { border-color: var(--c-anthracite-trait); } .section--anthracite .tarif:hover { background: rgba(255,255,255,.04); } .section--anthracite .tarif h3, .section--anthracite .tarif__prix { color: #fff; } .section--anthracite .tarif__texte p, .section--anthracite .tarif__prix small { color: var(--c-anthracite-doux); } .section--anthracite .tarif__ico { background: color-mix(in srgb, var(--c-orange) 16%, transparent); color: var(--c-orange-clair); } .section--anthracite .etape { background: var(--c-anthracite-carte); border-color: var(--c-anthracite-trait); } .section--anthracite .etape h3 { color: #fff; } .section--anthracite .etape p { color: var(--c-anthracite-doux); } .section--anthracite .etape::before { color: var(--c-orange-clair); border-color: rgba(244,124,90,.45); } /* ---- Bouton mode nuit / jour : petit bouton flottant, discret ---- */ .bouton-theme { position: fixed; left: 16px; bottom: 16px; z-index: 45; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--c-trait-clair); border-radius: 50%; background: var(--c-sauge-clair); color: var(--c-gris); cursor: pointer; opacity: .72; box-shadow: 0 6px 16px -10px rgba(30,36,36,.6); transition: opacity var(--transition), color var(--transition), transform var(--transition); } .bouton-theme:hover, .bouton-theme:focus-visible { opacity: 1; color: var(--c-texte); transform: translateY(-1px); } .bouton-theme .ico { width: 18px; height: 18px; } .bouton-theme .ico-soleil, [data-theme="nuit"] .bouton-theme .ico-lune { display: none; } [data-theme="nuit"] .bouton-theme .ico-soleil { display: block; } @media (max-width: 720px) { .bouton-theme { left: 12px; bottom: 16px; width: 38px; height: 38px; } .barre-mobile ~ .bouton-theme { bottom: 84px; } } /* ---- Exceptions du mode nuit (couleurs écrites en dur ailleurs) ---- */ [data-theme="nuit"] .logo .logo-fonce { display: none; } [data-theme="nuit"] .logo .logo-clair { display: block; } [data-theme="nuit"] .mini-sim__projet input:checked + span, [data-theme="nuit"] .atouts-standard .ico, [data-theme="nuit"] .mini-sim__indice { color: var(--c-sauge); } [data-theme="nuit"] .mini-sim__indice::after { border-top-color: var(--c-texte); } [data-theme="nuit"] .mini-sim__option input:checked + .mini-sim__case::after { border-color: var(--c-sauge); } [data-theme="nuit"] .mini-sim__piste::-webkit-slider-thumb { background: var(--c-sauge); } [data-theme="nuit"] .croquis__ouverture { fill: rgba(255,255,255,.05); } [data-theme="nuit"] .croquis__main { fill: var(--c-orange-clair); } [data-theme="nuit"] .croquis__main--doux, [data-theme="nuit"] .croquis__main--petit { fill: var(--c-gris); } [data-theme="nuit"] .croquis__appui { fill: rgba(255,255,255,.08); } [data-theme="nuit"] .dossier__lignes i { background: #2C3636; } [data-theme="nuit"] .scotch, [data-theme="nuit"] .fiche__scotch { background: rgba(247, 220, 111, .55); } [data-theme="nuit"] .reponse__dessin { filter: brightness(.88); } [data-theme="nuit"] .feuille, [data-theme="nuit"] .final__feuille { background-image: linear-gradient(rgba(143,195,204,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(143,195,204,.07) 1px, transparent 1px); } [data-theme="nuit"] img.logo__texte { filter: none; } [data-theme="nuit"] ::selection { color: #141A1A; } /* ===================================================================== PALETTE IVOIRE : bandes en dégradé sauge → sable, accents jaunes ===================================================================== */ .ruban, .bande-pros, .pied, .bandeau, .section--blanche { background: var(--degrade); } .ruban { border-block: 0; } .section--blanche + .section--blanche { background: var(--c-sauge); } .scotch, .fiche__scotch { background: rgba(255, 195, 33, .6); } .surtitre, .mini-sim__indice { --accent: var(--c-soleil); } .etape::before { background: var(--c-soleil); color: #151917; border-color: transparent; } .feuille, .final__feuille, .fiche { box-shadow: 0 1px 2px rgba(21,25,23,.05), 0 24px 50px -30px rgba(60,70,50,.45); } .mini-sim__projet input:checked + span { background: #151917; border-color: #151917; } [data-theme="nuit"] .mini-sim__projet input:checked + span { background: var(--c-texte); border-color: var(--c-texte); color: var(--c-sauge); } /* ===================================================================== PASTILLES PASTEL : chaque icône a sa couleur, en alternance ===================================================================== */ .tarif__ico, .outil-carte__ico, .livrables__num, .encadre__ico, .contact__infos .ico, .sous-menu__ico { background: var(--pastille, var(--p-peche)); color: #1E1C1B; } .section--anthracite .tarif__ico { background: var(--pastille, var(--p-peche)); color: #1E1C1B; } .tarif:nth-child(5n+1), .outil-carte:nth-child(5n+1), .livrables__liste li:nth-child(5n+1), .contact__infos li:nth-child(5n+1), .sous-menu__lien:nth-child(5n+1) { --pastille: var(--p-jaune); } .tarif:nth-child(5n+2), .outil-carte:nth-child(5n+2), .livrables__liste li:nth-child(5n+2), .contact__infos li:nth-child(5n+2), .sous-menu__lien:nth-child(5n+2) { --pastille: var(--p-vert); } .tarif:nth-child(5n+3), .outil-carte:nth-child(5n+3), .livrables__liste li:nth-child(5n+3), .contact__infos li:nth-child(5n+3), .sous-menu__lien:nth-child(5n+3) { --pastille: var(--p-bleu); } .tarif:nth-child(5n+4), .livrables__liste li:nth-child(5n+4), .contact__infos li:nth-child(5n+4), .sous-menu__lien:nth-child(5n+4) { --pastille: var(--p-rose); } .livrables__num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; } .livrables__num .ico { width: 22px; height: 22px; } .livrables__liste li { grid-template-columns: 56px 1fr; align-items: start; } .encadre__ico { --pastille: var(--p-jaune); } .tarif__ico, .outil-carte__ico { border-radius: 14px; } [data-theme="nuit"] .tarif__ico, [data-theme="nuit"] .outil-carte__ico, [data-theme="nuit"] .livrables__num, [data-theme="nuit"] .encadre__ico, [data-theme="nuit"] .contact__infos .ico, [data-theme="nuit"] .sous-menu__ico { filter: saturate(.85) brightness(.92); } /* ===================================================================== PHOTOS (et leurs emplacements vides, visibles seulement en aperçu local) ===================================================================== */ .photo { position: relative; margin: 0; overflow: hidden; border-radius: var(--rayon); background: var(--c-sauge-clair); } .photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .photo--paysage { aspect-ratio: 3 / 2; } .photo--carre { aspect-ratio: 1; } .photo--portrait { aspect-ratio: 4 / 5; } .photo--vide { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; border: 2px dashed var(--c-trait-clair); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(30,36,36,.03) 14px 28px), var(--c-sauge-clair); color: var(--c-gris); } .photo--vide > .ico { width: 30px; height: 30px; opacity: .7; } .photo--vide figcaption strong { display: block; font-size: 14px; color: var(--c-texte); } .photo--vide figcaption small { display: block; margin-top: 2px; font-family: var(--f-tech); font-size: 11px; } .photo--scotch { overflow: visible; border-radius: 6px; box-shadow: 0 2px 3px rgba(21,25,23,.06), 0 24px 46px -28px rgba(60,70,50,.5); transform: rotate(-.8deg); } .photo--scotch img { border-radius: 6px; } .photo--scotch::before { content: ""; position: absolute; top: -12px; left: 50%; z-index: 1; width: 110px; height: 26px; margin-left: -55px; background: rgba(255, 195, 33, .6); transform: rotate(-3deg); } /* Contact humain dans le bandeau d'accueil */ .contact-humain { display: inline-flex; align-items: center; gap: 14px; margin-top: 20px; color: var(--c-texte); text-decoration: none; } .contact-humain span { font-size: 15px; color: var(--c-gris); } .contact-humain strong { display: block; font-family: var(--f-titre); font-size: 20px; color: var(--c-texte); } .contact-humain:hover strong { color: var(--c-lien); } .contact-humain__photo { flex: none; width: 58px; border-radius: 50%; } .contact-humain__photo.photo--vide { padding: 4px; border-radius: 50%; } .contact-humain__photo.photo--vide figcaption { display: none; } .contact-humain__photo.photo--vide > .ico { width: 20px; height: 20px; } /* Étapes de la méthode : une photo en tête de carte */ .etape__photo { margin: -28px -24px 18px; border-radius: var(--rayon) var(--rayon) 0 0; } .section--anthracite .etape__photo.photo--vide { border-color: var(--c-anthracite-trait); background: rgba(255,255,255,.04); color: var(--c-anthracite-doux); } .section--anthracite .etape__photo.photo--vide figcaption strong { color: #fff; } /* Numéros au-dessus des photos : même repère pour les quatre étapes. */ #methode .etape { padding-bottom: 26px; } #methode .etape::before { position: absolute; top: 14px; left: 14px; z-index: 2; display: grid; place-items: center; width: 38px; height: 32px; padding: 0; border: 1px solid rgba(30,36,36,.18); border-radius: 8px; background: #FFE17A; color: #1E2424; font-family: var(--f-texte); font-size: 16px; font-weight: 750; line-height: 1; font-variant-numeric: tabular-nums; } #methode .etape:first-child { padding-top: 60px; } #methode .etape__ligne { display: none; } #methode .etape h3 { color: #fff; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.25; } #methode .etape p { color: #D9DEDD; font-size: 17px; line-height: 1.6; } /* Section « Des ingénieurs, pas un logiciel » */ .equipe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; } .equipe__texte p { margin-top: 18px; font-size: 17px; color: var(--c-gris); } .equipe__texte .lien-action { margin-top: 26px; } .bureau-photos { position: relative; min-width: 0; padding-bottom: 20px; } .bureau-photos--discret { padding-bottom: 0; } .projet-reprise, .projet-contexte { padding: 16px 18px; margin-bottom: 22px; border: 1px solid var(--c-trait-clair); border-radius: 12px; background: var(--c-sauge-clair); color: var(--c-texte); } .projet-reprise p, .projet-contexte p { margin: 0; font-size: 14px; line-height: 1.55; } .projet-reprise__actions { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 8px; } .projet-action, .outil__copier { padding: 6px 0; border: 0; background: transparent; color: var(--c-texte); font: 600 14px/1.5 var(--f-texte); text-align: left; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; } .projet-action:hover, .outil__copier:hover { color: var(--c-lien); } .projet-action:focus-visible, .outil__copier:focus-visible { outline: 2px solid var(--c-lien); outline-offset: 4px; } .projet-action[hidden] { display: none; } .projet-pieces { margin: 10px 0 16px; color: var(--c-texte); } .projet-pieces, .projet-contexte, .fc-depot, .fc-depot__liste, .fc-depot__fichier { min-width: 0; } .fc-depot { grid-template-columns: minmax(0, 1fr); } .fc-depot__zone > span:last-child { min-width: 0; overflow-wrap: anywhere; } .projet-pieces p { margin: 0 0 8px; font-size: 14px; font-weight: 600; } .projet-pieces ol { padding-left: 22px; margin: 0; font-size: 14px; line-height: 1.6; } .projet-pieces li + li { margin-top: 4px; } .outil__fiche { margin: 18px 0; text-align: left; } .outil__fiche summary { cursor: pointer; font-weight: 650; } .outil__fiche dl { margin: 16px 0; } .outil__fiche dt { font-size: 14px; margin-top: 12px; } .outil__fiche dd { margin: 2px 0 0; font-weight: 600; } .outil__fiche [data-inconnues] { font-size: 14px; } .outil__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 16px; } .outil__actions .lien-action { margin: 0; } .outil__statut { font-size: 14px; margin: 8px 0 0; } .outil__statut:empty { display: none; } .outil__resultat { overflow-wrap: anywhere; } .prose .bureau-photos { margin: 28px 0; } .prose .bureau-photos figure { margin: 0; } .bureau-photos .photo { isolation: isolate; } .bureau-photos .photo img { position: absolute; inset: 0; } .bureau-photos__entrante { z-index: 1; } .bureau-photos__commandes { position: absolute; z-index: 3; right: 16px; bottom: 0; display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--c-trait-clair); border-radius: 24px; background: var(--c-fond, #DCE6E6); color: var(--c-texte); } .bureau-photos__commandes[hidden] { display: none; } .bureau-photos__commandes button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; font: 26px/1 var(--f-texte); cursor: pointer; } .bureau-photos__commandes button:hover { background: var(--c-texte); color: var(--c-fond, #DCE6E6); } .bureau-photos__commandes button:focus-visible { outline: 2px solid var(--c-lien); outline-offset: 2px; } .bureau-photos__commandes span { min-width: 42px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; } .bureau-photos__commandes svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .bureau-jouer { display: none; } [data-bureau-pause][aria-pressed="true"] .bureau-pause { display: none; } [data-bureau-pause][aria-pressed="true"] .bureau-jouer { display: block; } @media (pointer: coarse) { .bureau-photos__commandes button { width: 44px; height: 44px; } } .equipe:not(:has(.photo)) { grid-template-columns: minmax(0, 760px); } /* Pages de prestation et contact */ .photo--contact { margin: 8px 0 28px; max-width: 440px; } @media (max-width: 860px) { .equipe { grid-template-columns: 1fr; } } /* ===================================================================== LIENS ANIMÉS - dans le texte : souligné fin qui s'épaissit en surlignage pâle au survol ; - pied de page et listes : soulignement qui se trace de gauche à droite. ===================================================================== */ /* Liens DANS les textes (comme sur le site DPE) : le texte garde sa couleur, un trait orange épais dessous ; les lettres qui descendent (p, y, g…) passent par-dessus le trait, qui s'interrompt autour d'elles. Au survol : un fond brique monte du trait jusqu'en haut des mots et le texte passe en blanc. Boutons, encadrés d'action et cartes ne sont jamais concernés. */ .prose a:not(.lien-action):not(.btn):not(.appel__tel):not(.carte-lire), .faq__reponse a:not(.lien-action):not(.btn), .encadre a:not(.lien-action):not(.btn), .bloc-local__texte a:not(.lien-action):not(.btn), .fc-accord a { color: var(--c-texte); padding: 0; text-decoration-line: underline; text-decoration-color: var(--c-orange); text-decoration-thickness: .12em; text-underline-offset: .07em; text-decoration-skip-ink: auto; background-image: linear-gradient(var(--c-brique), var(--c-brique)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 0; border-radius: .2em; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .3s cubic-bezier(.65,0,.35,1), text-decoration-color .2s ease, color .2s ease .05s; } .prose a:not(.lien-action):not(.btn):not(.appel__tel):not(.carte-lire):hover, .faq__reponse a:not(.lien-action):not(.btn):hover, .encadre a:not(.lien-action):not(.btn):hover, .bloc-local__texte a:not(.lien-action):not(.btn):hover, .fc-accord a:hover { color: #fff; text-decoration-color: transparent; background-size: 100% 100%; } [data-theme="nuit"] .prose a:not(.lien-action):not(.btn):not(.appel__tel):not(.carte-lire) { color: var(--c-texte); } @media (prefers-reduced-motion: reduce) { .prose a, .faq__reponse a, .encadre a, .bloc-local__texte a { transition: none; } } /* Soulignement animé : une vraie bordure (toujours calée sur un pixel entier de l'écran, donc la même épaisseur sous chaque lien), dont seule la largeur s'anime. Au survol : ancrée à gauche, elle se trace vers la droite ; en partant : ancrée à droite, elle s'efface de gauche à droite. */ .pied a:not(.lien-action), .liste-liens a, .fil-ariane a, .tarif h3 a, .encart__secondaire span { position: relative; text-decoration: none !important; background: none; } .pied a:not(.lien-action)::after, .liste-liens a::after, .fil-ariane a::after, .tarif h3 a::after, .encart__secondaire span::after { content: ""; position: absolute; right: 0; bottom: -3px; width: 0; height: 0; border-top: 2px solid currentColor; pointer-events: none; transition: width .35s cubic-bezier(.2,.7,.2,1); } .pied a:not(.lien-action):hover::after, .liste-liens a:hover::after, .fil-ariane a:hover::after, .tarif h3 a:hover::after, .encart__secondaire:hover span::after { left: 0; right: auto; width: 100%; } .pied__contact a:hover { text-decoration: none; } /* Icônes : petit mouvement au survol de leur carte */ .tarif__ico .ico, .outil-carte__ico .ico, .sous-menu__ico .ico { transition: transform .35s cubic-bezier(.2,.7,.2,1); } .tarif:hover .tarif__ico .ico, .outil-carte:hover .outil-carte__ico .ico { transform: translateY(-2px) scale(1.08); } /* ===================================================================== ARTICLES : sommaire, encart, images, appels (repris du site DPE) ===================================================================== */ /* Sommaire : une fenêtre compacte, qui défile d'elle-même si l'article est long */ .sommaire { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--rayon); background: var(--c-blanc); max-height: min(32rem, calc(100dvh - var(--hauteur-entete) - 18rem)); } .sommaire__titre { position: relative; flex-shrink: 0; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--c-trait-clair); font-family: var(--f-titre); font-size: 17px; font-weight: 700; color: var(--c-texte); } /* Avancement de la lecture (site.js pose --progression, de 0 à 1) */ .sommaire__progression { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #F7B8A3, var(--c-orange)); clip-path: inset(0 calc((1 - var(--progression, 0)) * 100%) 0 0 round 0 3px 3px 0); transition: clip-path .15s linear; } .sommaire__liste { overflow-y: auto; overscroll-behavior: contain; padding: 10px 10px 14px 14px; scrollbar-width: thin; scrollbar-color: var(--c-trait-clair) transparent; } .sommaire__parties { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: partie; } .sommaire__parties > li { position: relative; counter-increment: partie; } /* le fil qui relie les numéros */ .sommaire__parties > li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; left: 15px; top: 28px; bottom: -3px; width: 2px; border-radius: 1px; background: var(--c-trait-clair); pointer-events: none; } .sommaire__parties a { position: relative; z-index: 1; display: block; padding: 6px 8px 6px 38px; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--c-texte); text-decoration: none; /* survol : un fond pâle glisse de gauche à droite derrière le titre */ background: linear-gradient(90deg, var(--c-fond-survol), var(--c-fond-survol)) no-repeat 0 0 / 0% 100%; transition: background-size .35s cubic-bezier(.65,0,.35,1), color .2s ease; } .sommaire__parties a::before { content: counter(partie); position: absolute; left: 4px; top: 5px; display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; border: 2px solid var(--c-trait-clair); background: var(--c-blanc); font-size: 11px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--c-gris); transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.25,.8,.25,1); } .sommaire__parties a:hover { background-size: 100% 100%; color: var(--c-lien); } .sommaire__parties a:hover::before { border-color: var(--c-orange); color: var(--c-orange); } .sommaire__parties a[aria-current="true"] { background-size: 100% 100%; color: var(--c-texte); font-weight: 700; } .sommaire__parties a[aria-current="true"]::before { background: var(--c-orange); border-color: var(--c-orange); color: #fff; transform: scale(1.08); } /* Encart sous le sommaire : pictogramme et titre, phrase, bouton, lien discret, rappel */ .encart { display: grid; gap: 14px; padding: 24px; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-orange) 11%, var(--c-blanc)); } .encart p { margin: 0; line-height: 1.5; font-size: 15px; color: var(--c-gris); } .encart__tete { display: flex; align-items: center; gap: 12px; } .encart__picto { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-blanc); color: var(--c-orange); } .encart__picto .ico { width: 22px; height: 22px; } .encart .encart__titre { font-family: var(--f-titre); font-size: 18px; font-weight: 700; line-height: 1.25; color: var(--c-texte); } .encart__bouton { width: 100%; justify-content: center; } .encart__bouton .ico { transition: transform .25s cubic-bezier(.22,1,.36,1); } .encart__bouton:hover .ico { transform: translateX(3px); } .encart__secondaire { justify-self: center; font-size: 15px; font-weight: 700; color: var(--c-lien); text-decoration: none; } .encart__rappel { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 10px 12px; border-radius: 16px; background: var(--c-blanc); color: var(--c-texte); text-decoration: none; transition: background-color .2s ease; } .encart__rappel:hover { background: color-mix(in srgb, var(--c-blanc) 85%, var(--c-orange)); } .encart__rappel > span:last-child { display: grid; line-height: 1.3; } .encart__rappel small { font-size: 13px; color: var(--c-gris); } .encart__rappel strong { font-size: 15px; color: var(--c-lien); } .encart__telephone { flex: none; display: block; width: 44px; height: 44px; filter: drop-shadow(0 4px 8px color-mix(in srgb, var(--c-orange) 30%, transparent)); } .encart__telephone svg { display: block; width: 100%; height: 100%; } .encart__telephone-corps { transform-box: fill-box; transform-origin: 50% 85%; } .encart__telephone-ondes { opacity: .85; transition: opacity .3s ease; } .encart__rappel:hover .encart__telephone-ondes { opacity: 1; } @keyframes sonnerie { 0%, 100% { transform: rotate(0); } 15%, 45%, 75% { transform: rotate(-9deg); } 30%, 60% { transform: rotate(9deg); } } a:hover [data-sonnerie] { animation: sonnerie .9s cubic-bezier(.36,.07,.19,.97) both; } /* Images : mise en avant (en tête) et dans le corps */ .photo--large { aspect-ratio: 16 / 9; } .photo--article { margin-bottom: calc(var(--esp-paragraphe) * 1.6); box-shadow: 0 2px 3px rgba(21,25,23,.06), 0 24px 46px -30px rgba(60,70,50,.45); } .photo.photo--legendee { aspect-ratio: auto; overflow: visible; background: transparent; box-shadow: none; } .photo--legendee img { height: auto; aspect-ratio: 3 / 2; border-radius: var(--rayon); } .photo--legendee.photo--large img { aspect-ratio: 16 / 9; } .photo .photo__legende { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--c-gris); text-align: left; } .prose .photo--corps { margin-block: var(--esp-sous-h2) var(--esp-paragraphe); } /* Appel au fil du texte : bandeau teinté, une phrase et le bouton */ .prose .appel-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-block: var(--esp-paragraphe) 0; padding: 18px 20px 18px 24px; border-radius: var(--rayon); background: color-mix(in srgb, var(--c-orange) 11%, var(--c-blanc)); } .prose .appel-ligne p { flex: 1 1 18rem; margin: 0; font-weight: 700; line-height: 1.45; text-align: left; color: var(--c-texte); } .prose .appel-ligne .btn { flex: none; } .prose .appel-ligne .btn .ico { transition: transform .25s cubic-bezier(.22,1,.36,1); } .prose .appel-ligne .btn:hover .ico { transform: translateX(3px); } .appel-final { margin-top: calc(var(--esp-paragraphe) * 2); } .appel-final--photo { display: grid; grid-template-columns: minmax(170px, .8fr) minmax(0, 1.4fr); gap: 0; overflow: hidden; border-radius: 10px; background: var(--c-blanc); } .appel-final__photo { display: block; width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 40% center; } .appel-final--photo .appel { margin: 0; border: 0; border-radius: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 24px; } .appel-final--photo .appel__actions { width: 100%; } @media (max-width: 640px) { .appel-final--photo { grid-template-columns: minmax(0, 1fr); } .appel-final__photo { height: 190px; min-height: 0; } } /* ===================================================================== FAQ : ouverture en douceur (site.js) et signe « + » dessiné ===================================================================== */ .faq summary > span:first-child { flex: 1; } .faq__signe { position: relative; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--c-blanc); box-shadow: inset 0 0 0 1px var(--c-trait-clair); color: var(--c-texte); transition: background-color .2s ease, box-shadow .2s ease; } /* Un même dessin vectoriel, sans rotation ni changement d'échelle. */ .faq__signe svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; fill: currentColor; shape-rendering: geometricPrecision; } .faq__barre-v { transition: opacity .14s ease; } .faq summary:hover .faq__signe { color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 8%, var(--c-blanc)); box-shadow: inset 0 0 0 1px var(--c-orange); } .faq details.est-ouvert > summary .faq__signe { background: var(--c-orange); color: #fff; box-shadow: none; } .faq details.est-ouvert .faq__barre-v { opacity: 0; } .faq summary:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; border-radius: 4px; } .faq__reponse { overflow: hidden; } /* ===================================================================== PAGE GUIDES : filtre par thème (comme le site DPE) et cartes ===================================================================== */ .section--guides { padding-top: 48px; } .bandeau--guides { padding-top: calc(var(--hauteur-entete) + clamp(24px, 3vw, 40px)); padding-bottom: 32px; } .bandeau--guides .fil-ariane { margin-bottom: 16px; } .bandeau--guides h1 { margin-top: 0; } .bandeau--guides .bandeau__chapo { max-width: none; margin-top: 16px; } .bandeau--guides .partage { margin-top: 16px; } .bandeau--guides + .section--guides { padding-top: 32px; } .section--guides .filtre { margin-bottom: 24px; } /* Filtre : des étiquettes « # » indépendantes, qui passent proprement à la ligne. Thème choisi : étiquette foncée, « # » orange. */ .filtre { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 36px; } .filtre__libelle { font-family: var(--f-tech); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris); } .onglets { display: flex; flex-wrap: wrap; gap: 10px; } .onglets__pastille { display: none; } .onglet { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 7px 0 15px; border: 1.5px solid var(--c-trait-clair); border-radius: 999px; background: var(--c-blanc); color: var(--c-texte); cursor: pointer; font: inherit; font-size: 15px; font-weight: 650; white-space: nowrap; transition: background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .onglet__diese { margin-right: -6px; color: var(--c-orange); font-weight: 700; } .onglet__nombre { display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--c-sauge); color: var(--c-gris); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; transition: background-color .25s ease, color .25s ease; } .onglet:hover { border-color: var(--c-orange); transform: translateY(-2px); box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--c-orange) 55%, transparent); } .onglet[aria-pressed="true"] { background: var(--c-anthracite); border-color: var(--c-anthracite); color: #fff; transform: none; box-shadow: 0 10px 22px -12px rgba(30, 28, 27, .7); } .onglet[aria-pressed="true"] .onglet__diese { color: var(--c-orange-clair); } .onglet[aria-pressed="true"] .onglet__nombre { background: var(--c-orange); color: #fff; } .onglet:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; } [data-theme="nuit"] .onglet[aria-pressed="true"] { background: var(--c-texte); border-color: var(--c-texte); color: var(--c-sauge); } @media (max-width: 640px) { /* téléphone : les thèmes défilent sur une ligne, au doigt */ .filtre { display: block; } .filtre__libelle { display: block; margin-bottom: 10px; } .onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding: 4px 16px 10px; } .onglets::-webkit-scrollbar { display: none; } .onglet { flex: none; } } @media (prefers-reduced-motion: reduce) { .onglet { transition: none; } .onglet:hover { transform: none; } } .liste-guides { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-content: start; } .liste-guides > li { min-width: 0; } .liste-guides[data-maconnerie] { display: block; width: 100%; } .liste-guides[data-maconnerie] > li { position: absolute; top: 0; left: 0; } .carte-guide { display: grid; gap: 8px; padding: 16px 16px 22px; border-radius: var(--rayon); background: var(--c-blanc); color: var(--c-texte); text-decoration: none; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .carte-guide:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,36,36,.12); } .carte-guide strong { padding-inline: 6px; font-family: var(--f-titre); font-size: 21px; line-height: 1.25; transition: color .2s ease; } .carte-guide:hover strong { color: var(--c-lien); } .carte-guide__themes { padding-inline: 6px; font-size: 13px; font-weight: 700; color: var(--c-lien); } .carte-guide__resume { padding-inline: 6px; font-size: 15px; line-height: 1.5; color: var(--c-gris); } .couverture { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 12px; margin-bottom: 6px; } .couverture--dessin { display: grid; place-items: center; color: #1E1C1B; background: linear-gradient(rgba(30,28,27,.07) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(30,28,27,.07) 1px, transparent 1px) 0 0 / 22px 22px, var(--fond); } .couverture--dessin .ico { width: 34%; height: auto; max-width: 92px; stroke-width: 1.3; transition: transform .45s cubic-bezier(.22,1,.36,1); } .carte-guide:hover .couverture--dessin .ico { transform: translateY(-4px) rotate(-4deg) scale(1.06); } [data-theme="nuit"] .couverture--dessin { filter: saturate(.85) brightness(.92); } @media (prefers-reduced-motion: reduce) { .carte-guide, .onglets__pastille, .onglet { transition: none; } .carte-guide:hover { transform: none; } } /* Étiquettes « # » en tête des articles */ .etiquettes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 22px 0 0; padding: 0; } .etiquettes a { display: inline-block; padding: 5px 12px; border-radius: 999px; background: var(--c-blanc); font-size: 13px; font-weight: 700; color: var(--c-lien); text-decoration: none; transition: background-color .2s ease, color .2s ease; } .etiquettes a:hover { background: var(--c-orange); color: #fff; } /* Menu « Guides » : lien vers tous les guides */ .sous-menu__tous { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 6px; padding: 10px 12px; border-radius: 10px; background: var(--c-sauge-clair); font-size: 14px; font-weight: 700; color: var(--c-lien); text-decoration: none; } .sous-menu__tous .ico { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.22,1,.36,1); } .sous-menu__tous:hover .ico { transform: translateX(3px); } /* FAQ en bas des articles */ .prose .faq--article { max-width: none; margin-top: var(--esp-sous-h2); } .prose .faq--article summary { padding: 20px 0; font-size: 18px; text-align: left; } .prose .faq--article .faq__reponse { padding-bottom: 22px; text-align: left; } .prose .faq--article .faq__reponse p { margin: 0; } /* À lire aussi, en fin d'article */ .prose .lire-aussi { margin-top: calc(var(--esp-paragraphe) * 2.5); } .prose .lire-aussi__titre { margin: 0 0 18px; font-family: var(--f-titre); font-size: 24px; font-weight: 700; color: var(--c-texte); text-align: left; } .prose .lire-aussi ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .prose .lire-aussi li { margin: 0; padding: 0; } .prose .lire-aussi li::before { content: none; } .prose .lire-aussi li a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px 10px 16px; border-radius: var(--rayon); background: var(--c-blanc); color: var(--c-texte); text-decoration: none; background-image: none; text-align: left; transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .prose .lire-aussi li a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(30,36,36,.12); } .prose .lire-aussi .couverture { margin-bottom: 4px; border-radius: 10px; } .prose .lire-aussi .couverture--dessin .ico { max-width: 52px; } .prose .lire-aussi strong { padding-inline: 4px; font-family: var(--f-titre); font-size: 16px; line-height: 1.3; } .prose .lire-aussi li a:hover strong { color: var(--c-lien); } .prose .lire-aussi a > span:not(.couverture) { padding-inline: 4px; font-size: 13px; line-height: 1.45; color: var(--c-gris); } .prose .lire-aussi .lien-action { margin-top: 18px; } @media (max-width: 720px) { .prose .lire-aussi ul { grid-template-columns: 1fr; } } /* ===================================================================== FORMULAIRE DE CONTACT (repris du site DPE) - pastilles de choix : la coche se dessine de gauche à droite ; - champs : le libellé est écrit dans la case, il monte sur le bord au clic ou une fois rempli ; - champ bien rempli : petite coche verte ; mal rempli (après saisie) : trait rouge. ===================================================================== */ .fc-colonne { display: grid; gap: 20px; min-width: 0; } .fc { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 22px; background: var(--c-blanc); box-shadow: 0 2px 3px rgba(21,25,23,.05), 0 30px 60px -36px rgba(40,50,50,.45); } .fc__titre { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 22px; } .fc__titre:not(:first-of-type) { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--c-trait-clair); } .fc__titre span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c-orange) 14%, var(--c-blanc)); color: var(--c-lien); font-size: 16px; } .fc__groupe { display: grid; gap: 12px; margin: 0; padding: 0; border: 0; min-width: 0; } .fc__question { padding: 0 0 12px; font-weight: 700; font-size: 16px; } .fc__options { display: flex; flex-wrap: wrap; gap: 8px; } .fc__ligne { display: flex; flex-wrap: wrap; gap: 16px; } .fc__ligne > * { flex: 1 1 220px; } .fc__ligne > .fc-champ--court { flex: 0 1 170px; } .fc__facultatif { font-weight: 500; color: var(--c-gris); } /* Pastilles de choix : au clic, elle s'enfonce puis rebondit ; choisie, elle devient foncée et son rond se change en coche orange, dessinée de gauche à droite. */ .fc-option { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 18px 6px 10px; border-radius: 999px; background: var(--c-sauge-clair); border-bottom: 1.5px solid var(--c-trait-clair); font-size: 15px; font-weight: 600; color: var(--c-texte); cursor: pointer; user-select: none; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, scale .3s cubic-bezier(.25,.8,.25,1); } .fc-option:hover { background: var(--c-sauge); } .fc-option:active { scale: .95; transition-duration: .2s, .2s, .2s, .08s; } .fc-option input { appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 1.5px solid #9AABAB; border-radius: 50%; background-color: #fff; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='xMinYMid slice'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8.5' fill='none' stroke='%23ED5B38' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size .15s ease-in, border-color .2s ease; } .fc-option:hover input { border-color: var(--c-gris); } .fc-option:has(input:checked) { background: var(--c-anthracite); color: #fff; border-bottom-color: transparent; box-shadow: 0 10px 20px -12px rgba(30,28,27,.8); } .fc-option input:checked { border-color: #fff; background-size: 100% 100%; transition: background-size .3s cubic-bezier(.65,0,.35,1) .03s, border-color .2s ease; } .fc-option:has(input:focus-visible) { outline: 3px solid var(--c-orange); outline-offset: 2px; } .fc-option input:focus-visible { outline: none; } /* Champs : fond pâle, fin trait dessous ; au clic, fond blanc et contour orange */ .fc-champ { position: relative; min-width: 0; } .fc-champ input, .fc-champ textarea { display: block; width: 100%; min-height: 58px; padding: 22px 16px 8px; border: 0; border-bottom: 1.5px solid #9AABAB; border-radius: 12px; background: var(--c-sauge-clair); color: var(--c-texte); font: inherit; font-size: 16px; transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease; } .fc-champ textarea { min-height: 140px; padding-top: 28px; resize: vertical; line-height: 1.5; } .fc-champ input:hover, .fc-champ textarea:hover { background: var(--c-sauge); } .fc-champ input:focus, .fc-champ textarea:focus { outline: 2px solid var(--c-orange); outline-offset: -2px; border-bottom-color: transparent; background: var(--c-blanc); box-shadow: 0 10px 26px -16px color-mix(in srgb, var(--c-orange) 60%, transparent); } .fc-champ input:user-invalid, .fc-champ textarea:user-invalid { border-bottom-color: #C62828; box-shadow: inset 0 -1px 0 #C62828; } /* Bien rempli : une petite coche verte à droite, quand on a quitté le champ */ .fc-champ input:not(:placeholder-shown):valid:not(:focus) { padding-right: 44px; background-repeat: no-repeat; background-position: right 16px center; background-size: 18px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%232F9E5B'/%3E%3Cpath d='m7 12.5 3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Le libellé, écrit dans la case, monte sur le bord en petite pastille */ .fc-champ label { position: absolute; left: 12px; top: 29px; translate: 0 -50%; max-width: calc(100% - 24px); padding: 1px 4px; border-radius: 999px; pointer-events: none; transform-origin: left center; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--c-gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: top .25s cubic-bezier(.22,1,.36,1), scale .25s cubic-bezier(.22,1,.36,1), color .2s ease, background-color .2s ease, padding .25s ease; } .fc-champ input:focus + label, .fc-champ input:not(:placeholder-shown) + label, .fc-champ textarea:focus + label, .fc-champ textarea:not(:placeholder-shown) + label { top: 0; scale: .82; max-width: calc((100% - 24px) / .82); padding-inline: 8px; background: var(--c-blanc); font-weight: 700; color: var(--c-texte); } .fc-champ input:focus + label, .fc-champ textarea:focus + label { color: var(--c-lien); } .fc-champ input:user-invalid + label, .fc-champ textarea:user-invalid + label { color: #C62828; } /* Accord : la case se remplit d'orange et la coche blanche se dessine */ .fc-accord { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--c-gris); cursor: pointer; } .fc-accord input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid #9AABAB; border-radius: 6px; background-color: #fff; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='xMinYMid slice'%3E%3Cpath d='m4.5 10.5 3.5 3.5 7.5-8.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%; transition: background-size .15s ease-in, background-color .2s ease, border-color .2s ease; } .fc-accord:hover input { border-color: var(--c-orange); } .fc-accord input:checked { background-color: var(--c-orange); border-color: var(--c-orange); background-size: 100% 100%; transition: background-size .3s cubic-bezier(.65,0,.35,1) .05s, background-color .15s ease, border-color .15s ease; } .fc-accord input:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 2px; } .fc-accord a { color: var(--c-lien); } .fc__erreur { margin: 0; padding: 12px 16px; border-radius: 12px; background: #FDECEA; color: #8E1F14; font-weight: 600; font-size: 15px; } .fc__envoyer { justify-self: start; } .fc__envoyer .ico { transition: transform .25s cubic-bezier(.22,1,.36,1); } .fc__envoyer:hover .ico { transform: translateX(3px); } .fc__envoyer:disabled { opacity: .6; cursor: progress; } /* Ce qui s'affiche selon la demande choisie (sans :has, tout reste affiché) */ @supports selector(:has(a)) { .fc:not(:has(input[name="objet"][value="rappel"]:checked)) [data-pour~="rappel"] { display: none; } .fc:has(input[name="objet"][value="rappel"]:checked) [data-sauf~="rappel"] { display: none; } } /* Et ensuite ? */ .fc-ensuite { padding: 26px clamp(22px, 3vw, 32px); border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--c-orange) 12%, var(--c-blanc)), var(--c-blanc)); } .fc-ensuite h2 { margin: 0 0 18px; font-size: 20px; } .fc-ensuite ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; counter-reset: etape; } .fc-ensuite li { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; counter-increment: etape; } .fc-ensuite li::before { content: counter(etape); grid-row: 1 / span 2; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-orange); color: #fff; font-family: var(--f-titre); font-weight: 800; } .fc-ensuite strong { font-size: 16px; } .fc-ensuite span { font-size: 14px; line-height: 1.5; color: var(--c-gris); } [data-theme="nuit"] .fc-option input, [data-theme="nuit"] .fc-accord input { background-color: var(--c-sauge-clair); } [data-theme="nuit"] .fc-option:has(input:checked) { background: var(--c-texte); color: var(--c-sauge); } @media (prefers-reduced-motion: reduce) { .fc-option, .fc-option input, .fc-champ label, .fc-accord input { transition: none; } } /* Fichiers joints du formulaire de contact : zone de dépôt et liste */ .fc-depot { display: grid; gap: 10px; } .fc-depot .fc__question { margin: 0; padding: 0; } .fc-depot__zone { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 14px; border: 1.5px dashed #9AABAB; background: var(--c-sauge-clair); cursor: pointer; font-size: 15px; color: var(--c-texte); transition: border-color .2s ease, background-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .fc-depot__zone input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; } .fc-depot__zone small { display: block; margin-top: 3px; font-size: 13px; color: var(--c-gris); } .fc-depot__zone u { color: var(--c-lien); text-underline-offset: 3px; } .fc-depot__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--c-blanc); color: var(--c-orange); transition: transform .3s cubic-bezier(.22,1,.36,1); } .fc-depot__ico .ico { width: 22px; height: 22px; } .fc-depot__zone:hover, .fc-depot__zone:focus-within, .fc-depot.est-survole .fc-depot__zone { border-color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 7%, var(--c-blanc)); } .fc-depot.est-survole .fc-depot__zone { transform: scale(1.015); } .fc-depot__zone:hover .fc-depot__ico, .fc-depot.est-survole .fc-depot__ico { transform: translateY(-3px) rotate(-8deg); } .fc-depot__zone:focus-within { outline: 3px solid var(--c-orange); outline-offset: 2px; } .fc-depot__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .fc-depot__liste:empty { display: none; } .fc-depot__fichier { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; border-radius: 12px; background: var(--c-sauge-clair); font-size: 14px; animation: fichier-arrive .35s cubic-bezier(.22,1,.36,1); } @keyframes fichier-arrive { from { opacity: 0; transform: translateY(-6px); } } .fc-depot__type { flex: none; padding: 4px 7px; border-radius: 6px; background: var(--c-anthracite); color: #fff; font-family: var(--f-tech); font-size: 11px; font-weight: 700; } .fc-depot__nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .fc-depot__fichier small { flex: none; color: var(--c-gris); } .fc-depot__fichier button { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--c-blanc); color: var(--c-texte); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .2s ease, color .2s ease; } .fc-depot__fichier button:hover { background: var(--c-orange); color: #fff; } .fc-depot__alerte { padding: 8px 12px; border-radius: 10px; background: #FDECEA; color: #8E1F14; font-size: 13px; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .fc-depot__fichier { animation: none; } } /* ===================================================================== PAGE CONTACT : titre et photo scotchée, 4 cartes, formulaire en deux colonnes, « Et ensuite ? » en bandeau (mise en page du site DPE, matières Nos Murs) ===================================================================== */ .contact-page { padding-bottom: clamp(56px, 8vw, 96px); } .contact-page > .conteneur { display: grid; gap: 28px; } .contact-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 56px; align-items: center; } .contact-tete h1 { margin-top: 0; } .contact-tete h1 .souligne { margin-top: 0; font-size: 1em; color: var(--c-brique, var(--c-orange)); } .contact-tete .simple__chapo { max-width: 760px; } .contact-tete__photo { width: 300px; transform: rotate(2.2deg); } .contact-cartes { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .contact-cartes li { padding: 16px 18px; border-radius: 18px; background: var(--c-blanc); box-shadow: 0 1px 2px rgba(21,25,23,.04), 0 14px 30px -24px rgba(40,50,50,.45); transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; } .contact-cartes li:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(21,25,23,.04), 0 20px 36px -22px rgba(40,50,50,.5); } .contact-cartes li > div { min-width: 0; } .contact-cartes a, .contact-cartes span { font-size: 15px; overflow-wrap: anywhere; } .contact-cartes .ico { flex: none; } .fc--large { position: relative; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 56px); padding: clamp(26px, 3.4vw, 44px); } .fc__col { display: grid; gap: 22px; align-content: start; min-width: 0; } .fc--large .fc__titre:not(:first-of-type) { margin-top: 0; padding-top: 0; border-top: 0; } .fc__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 24px; border-top: 1px solid var(--c-trait-clair); } .fc__pied .fc-accord { flex: 1 1 420px; max-width: 760px; } .fc__pied .fc__erreur { flex-basis: 100%; order: -1; } .fc--large .scotch { top: -13px; } .fc--large .scotch--g { left: 44px; } .fc--large .scotch--d { right: 44px; } .fc-ensuite--large { padding: clamp(24px, 3vw, 36px) clamp(24px, 3.4vw, 44px); } .fc-ensuite--large ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; } .fc-ensuite--large .lien-action { margin-top: 24px; } @media (max-width: 1100px) { .contact-cartes { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .contact-tete { grid-template-columns: 1fr; } .contact-tete__photo { width: min(100%, 420px); } .fc--large { grid-template-columns: 1fr; row-gap: 28px; } .fc--large .fc__col + .fc__col { padding-top: 24px; border-top: 1px solid var(--c-trait-clair); } .fc-ensuite--large ol { grid-template-columns: 1fr; } } @media (max-width: 560px) { .contact-cartes { grid-template-columns: 1fr; } } /* ===================================================================== MINI-SIMULATEUR : le choix des étages, bien visible ===================================================================== */ .mini-sim__etages { padding: 8px 10px 8px 16px; border-radius: 14px; background: color-mix(in srgb, var(--p-bleu) 55%, var(--c-blanc)); border: 1px solid color-mix(in srgb, var(--p-bleu) 80%, #8FB3D6); } .mini-sim__etages-texte { display: grid; gap: 2px; min-width: 0; } .mini-sim__aide { font-size: 13px; line-height: 1.35; color: var(--c-gris); } .mini-sim__compteur { gap: 8px; } .mini-sim__compteur .mini-sim__plus { background: var(--c-orange); border-color: var(--c-orange); color: #fff; animation: invite-plus 1.6s 2.6s cubic-bezier(.3,.7,.3,1) 3; } .mini-sim__compteur .mini-sim__plus:hover:not(:disabled) { border-color: var(--c-brique); background: var(--c-brique); } .mini-sim__compteur button:active:not(:disabled) { transform: scale(.92); } @keyframes invite-plus { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-orange) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--c-orange) 0%, transparent); } } /* Petite pile d'étages : toit, étages, mur (avec sa poutre orange) */ .mini-sim__pile { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; width: 26px; height: 46px; gap: 2px; } .mini-sim__pile i { display: block; width: 22px; height: 4px; border-radius: 1px; background: #5B6B7A; flex: none; } .mini-sim__pile .mini-sim__toit { width: 0; height: 0; border-radius: 0; background: none; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 7px solid #5B6B7A; } .mini-sim__pile .mini-sim__mur { width: 26px; height: 5px; background: var(--c-orange); } .mini-sim__pile i.est-neuf { animation: etage-tombe .45s cubic-bezier(.16,1,.3,1); } @keyframes etage-tombe { from { transform: translateY(-10px); opacity: 0; } } .croquis__etage-sup path.est-neuf { animation: etage-pose .5s cubic-bezier(.16,1,.3,1); } @keyframes etage-pose { from { transform: translateY(-16px); opacity: 0; } } [data-theme="nuit"] .mini-sim__etages { background: color-mix(in srgb, var(--p-bleu) 12%, var(--c-blanc)); border-color: var(--c-trait-clair); } [data-theme="nuit"] .mini-sim__pile i, [data-theme="nuit"] .mini-sim__pile .mini-sim__toit { background-color: #A9B6B6; border-bottom-color: #A9B6B6; } [data-theme="nuit"] .mini-sim__pile .mini-sim__toit { background: none; } @media (prefers-reduced-motion: reduce) { .mini-sim__compteur .mini-sim__plus, .mini-sim__pile i.est-neuf, .croquis__etage-sup path.est-neuf { animation: none; } } .mini-sim__effet { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--c-blanc); font-style: normal; font-size: 12px; font-weight: 700; color: #2F7A4B; vertical-align: 1px; transition: background-color .25s ease, color .25s ease; } .mini-sim__effet.est-payant { background: var(--c-orange); color: #fff; } /* ===================================================================== MÉGA-MENU « NOS ÉTUDES » : colonnes titrées et carte d'appel ===================================================================== */ .entete__barre { position: relative; } .nav__item--mega { position: static; } .sous-menu.mega { left: 0; right: 0; width: auto; top: calc(100% - 6px); display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; padding: 22px; border-radius: 22px; background: var(--c-blanc); border: 1px solid var(--c-trait-clair); box-shadow: 0 30px 60px -28px rgba(30,36,36,.45); } /* pont invisible : la souris peut descendre vers le panneau sans le refermer */ .sous-menu.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .mega__colonnes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 18px; } .mega__colonne { display: grid; align-content: start; gap: 2px; min-width: 0; } .mega__titre { margin: 0 0 8px; padding: 0 10px 10px; border-bottom: 1px solid var(--c-trait-clair); font-family: var(--f-tech); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-gris); } .mega__lien { display: flex; gap: 11px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--c-texte); transition: background-color .2s ease; } .mega__lien:hover, .mega__lien[aria-current] { background: var(--c-sauge-clair); } .mega__lien strong { display: block; font-size: 14px; line-height: 1.3; } .mega__lien small { display: block; font-size: 12.5px; line-height: 1.35; color: var(--c-gris); } .mega__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--pastille, var(--p-peche)); color: #1E1C1B; } .mega__ico .ico { width: 18px; height: 18px; transition: transform .35s cubic-bezier(.2,.7,.2,1); } .mega__colonne:nth-child(1) { --pastille: var(--p-jaune); } .mega__colonne:nth-child(2) { --pastille: var(--p-rose); } .mega__colonne:nth-child(3) { --pastille: var(--p-bleu); } .mega__colonne:nth-child(4) { --pastille: var(--p-vert); } .mega__carte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border-radius: 16px; background: var(--c-anthracite); color: #fff; } .mega__carte-titre { margin: 0; font-family: var(--f-titre); font-size: 19px; font-weight: 700; line-height: 1.25; } .mega__carte p:not(.mega__carte-titre) { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.72); } .mega__rappel, .mega__tous { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; } .mega__rappel .ico { width: 16px; height: 16px; color: var(--c-orange-clair); } .mega__tous { margin-top: auto; padding-top: 12px; color: var(--c-orange-clair); } .mega__tous .ico { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.22,1,.36,1); } .mega__tous:hover .ico { transform: translateX(3px); } .mega__rappel:hover, .mega__tous:hover { text-decoration: underline; text-underline-offset: 4px; } [data-theme="nuit"] .mega__ico { filter: saturate(.85) brightness(.92); } @media (max-width: 1180px) and (min-width: 921px) { .sous-menu.mega { grid-template-columns: 1fr; } .mega__carte { flex-direction: row; flex-wrap: wrap; align-items: center; } .mega__tous { margin: 0 0 0 auto; padding: 0; } } @media (max-width: 920px) { .sous-menu.mega { display: none; grid-template-columns: 1fr; padding: 4px 0 16px; background: none; border: 0; box-shadow: none; } .nav__item--deroulant.est-ouvert .sous-menu.mega { display: grid; } .mega__colonnes { grid-template-columns: 1fr; gap: 14px; } .mega__titre { border-bottom: 0; padding-bottom: 0; } .mega__lien strong { color: var(--c-texte-sombre); } } /* ===================================================================== CITATIONS ET COUPS DE MARQUEUR DANS LES ARTICLES ===================================================================== */ .prose .citation { position: relative; max-width: 620px; margin: calc(var(--esp-paragraphe) * 2) auto; padding: 8px 12px 0; text-align: center; } .prose .citation::before { content: "\201D"; position: absolute; left: -18px; top: -54px; z-index: -1; font-family: Georgia, "Times New Roman", serif; font-size: 170px; line-height: 1; color: var(--c-sauge-fonce); pointer-events: none; } .prose .citation blockquote { margin: 0; padding: 0; border: 0; } .prose .citation p { margin: 0; font-family: var(--f-titre); font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); font-weight: 500; line-height: 1.38; letter-spacing: -.01em; color: var(--c-texte); text-align: center; hyphens: none; } .prose .citation p::before { content: "« "; } .prose .citation p::after { content: " »"; } .prose .citation figcaption { margin-top: 18px; font-family: var(--f-tech); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--c-gris); } .prose .citation figcaption::before { content: ""; display: block; width: 26px; height: 1px; margin: 0 auto 12px; background: var(--c-gris); opacity: .6; } /* Coups de marqueur : surlignage pastel ; il se trace de gauche à droite à l'arrivée dans l'écran */ .prose mark { --m: #C6F2DA; color: inherit; padding: .06em .32em; margin: 0 -.06em; border-radius: 3px; background: linear-gradient(var(--m), var(--m)) no-repeat left center / 100% 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 1s cubic-bezier(.6,.05,.2,1) .15s; } .prose mark.m-vert { --m: #C6F2DA; } .prose mark.m-peche { --m: #FCDCC2; } .prose mark.m-jaune { --m: #FFE7A0; } .prose mark.m-bleu { --m: #CFE3F7; } .surligneur .prose mark:not(.est-surligne) { background-size: 0% 100%; } [data-theme="nuit"] .prose mark { --m: rgba(198, 242, 218, .22); } [data-theme="nuit"] .prose mark.m-peche { --m: rgba(252, 220, 194, .22); } [data-theme="nuit"] .prose .citation::before { color: var(--c-trait-clair); } @media (prefers-reduced-motion: reduce) { .prose mark { transition: none; } } /* Méga-menu : apparition en cascade, comme sur le site DPE. Le panneau monte de 18 px ; puis les liens glissent du bas vers le haut, colonne par colonne : dans une colonne, chaque ligne 30 ms après celle du dessus ; la colonne suivante démarre quand la précédente a fini (0,24 s) ; la carte d'appel en dernier. */ @keyframes mega-ouvre { from { opacity: 0; transform: translateY(18px); } } @keyframes mega-element { from { opacity: 0; transform: translateY(12px); } } .nav__item--mega.est-ouvert .sous-menu.mega { animation: mega-ouvre .22s cubic-bezier(.2,.8,.2,1); } .nav__item--mega.est-ouvert .mega__titre { animation: mega-element .15s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.02s + var(--g, 0) * .24s); } .nav__item--mega.est-ouvert .mega__lien { animation: mega-element .15s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.04s + var(--g, 0) * .24s + (var(--i, 0) + 1) * .03s); } .nav__item--mega.est-ouvert .mega__carte { animation: mega-element .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.04s + var(--g, 0) * .24s); } @media (prefers-reduced-motion: reduce) { .nav__item--mega.est-ouvert .sous-menu.mega, .nav__item--mega.est-ouvert .mega__titre, .nav__item--mega.est-ouvert .mega__lien, .nav__item--mega.est-ouvert .mega__carte { animation: none; } } /* Menus « Outils gratuits » et « Guides » : le menu Guides tient sur deux colonnes ; les liens arrivent en cascade, comme dans le méga-menu (30 ms entre deux lignes). */ .sous-menu__liens { display: grid; gap: 2px; } .sous-menu--large { width: 600px; left: -160px; } .sous-menu--large .sous-menu__liens { grid-template-columns: 1fr 1fr; } .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) { animation: mega-ouvre .22s cubic-bezier(.2,.8,.2,1); } .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) :is(.sous-menu__lien, .sous-menu__tous) { animation: mega-element .15s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.04s + var(--i, 0) * .03s); } @media (max-width: 920px) { .sous-menu--large { width: auto; } .sous-menu--large .sous-menu__liens { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega), .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) :is(.sous-menu__lien, .sous-menu__tous) { animation: none; } } /* ===================================================================== EN-TÊTE, FINITIONS : liens plus grands, trait orange au survol, téléphone lisible avec sa pastille, actions dans le menu mobile ===================================================================== */ .nav__liste { gap: 2px; } .nav__lien { position: relative; padding: 10px 14px; font-size: 16px; font-weight: 600; letter-spacing: -.005em; } /* trait orange qui se trace de gauche à droite sous le lien survolé, ouvert ou de la page en cours */ .nav__lien::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; /* Le fond révèle le trait sans mettre à l'échelle sa couche rasterisée. */ background: linear-gradient(var(--c-orange), var(--c-orange)) right center / 0% 2px no-repeat; transition: background-size .35s cubic-bezier(.2,.7,.2,1); } .nav__lien:hover::after, .nav__lien:focus-visible::after, .nav__lien[aria-expanded="true"]::after, .nav__lien[aria-current]::after { background-size: 100% 2px; background-position: left center; } .nav__lien:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; } .nav__chevron { width: 14px; height: 14px; } .nav__chevron path { stroke-width: 1.75; } .nav__tel { gap: 10px; font-family: var(--f-texte); color: var(--entete-texte); } .nav__tel-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c-orange) 14%, transparent); color: var(--c-orange); transition: background-color .25s ease, color .25s ease; } .nav__tel-ico .ico { width: 20px; height: 20px; } .nav__tel-texte { display: grid; line-height: 1.15; } .nav__tel-texte small { font-size: 12px; font-weight: 500; color: var(--entete-doux); } .nav__tel-texte strong { font-size: 17px; font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; } .nav__tel:hover .nav__tel-ico { background: var(--c-orange); color: #fff; } .nav__tel:hover .nav__tel-ico .ico { animation: sonnerie .9s cubic-bezier(.36,.07,.19,.97) both; } .nav__tel:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 4px; border-radius: 999px; } .entete__actions .btn--petit { min-height: 46px; padding: 0 22px; font-size: 15px; } .nav__actions { display: none; } @media (max-width: 1240px) and (min-width: 921px) { .nav__tel-texte small { display: none; } .nav__lien { padding-inline: 11px; } .nav__lien::after { left: 11px; right: 11px; } } /* écran moyen : le téléphone se réduit à sa pastille, puis s'efface (il reste dans le menu mobile et le pied de page) */ @media (max-width: 1180px) and (min-width: 921px) { .nav__tel-texte { display: none; } .entete__barre { gap: 20px; } .nav { gap: 14px; } } @media (max-width: 1000px) and (min-width: 921px) { .nav__tel { display: none; } } @media (max-width: 920px) { .nav__lien::after { display: none; } .nav__lien { padding: 18px 0; font-size: 18px; } .nav__tel { margin-top: 28px; } .nav__tel-texte strong { font-size: 22px; color: var(--c-texte-sombre); } .nav__tel-texte small { font-size: 13px; } .nav__tel-ico { width: 48px; height: 48px; } .nav__actions { display: grid; gap: 10px; margin-top: 24px; } .nav__actions .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { .nav__lien::after { transition: none; } .nav__tel:hover .nav__tel-ico .ico { animation: none; } } .nav__chevron { flex: none; } @media (max-width: 1000px) and (min-width: 921px) { .logo__texte { height: 34px; } .logo3d { --u: .5px; } } /* Menu Guides : « Tous nos guides » en carte mise en avant */ .sous-menu__vedette { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 14px 16px; border-radius: 14px; background: var(--c-anthracite); color: #fff; text-decoration: none; transition: background-color .25s ease; } .sous-menu__vedette:hover { background: #2E2B29; } .sous-menu__vedette-ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--c-action); color: #fff; } .sous-menu__vedette-ico .ico { width: 20px; height: 20px; } .sous-menu__vedette strong { display: block; font-size: 16px; } .sous-menu__vedette small { display: block; font-size: 13px; color: rgba(255,255,255,.72); } .sous-menu__vedette > .ico { width: 18px; height: 18px; margin-left: auto; color: var(--c-orange-clair); transition: transform .25s cubic-bezier(.22,1,.36,1); } .sous-menu__vedette:hover > .ico { transform: translateX(4px); } @media (max-width: 920px) { .sous-menu__vedette { margin-top: 6px; } } /* Méga-menu : trois colonnes */ .mega__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mega__colonne:nth-child(3) { --pastille: var(--p-vert); } .mega__carte .btn .ico { width: 16px; height: 16px; } /* Accueil : section « Nos guides » */ .entete-section--ligne { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 40px; margin-bottom: 36px; } .entete-section--ligne > div { max-width: 720px; } .entete-section--ligne p { margin-top: 14px; color: var(--c-gris); font-size: 17px; } .guides-accueil { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .guides-accueil .carte-guide { height: 100%; align-content: start; } @media (max-width: 960px) { .guides-accueil { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .guides-accueil { grid-template-columns: 1fr; } } /* Haut de l'accueil épuré : plus d'air autour de l'introduction */ .accueil-panorama .accueil-mix__chapo { font-size: 18px; line-height: 1.55; } .accueil-panorama .atouts-standard--ligne { margin-top: 22px; } .guides-accueil .couverture { aspect-ratio: 2 / 1; } .guides-accueil .couverture--dessin .ico { max-width: 64px; } /* « + » et « − » dessinés, centrés dans leurs cercles */ .mini-sim__compteur button, .compteur__bouton { display: inline-grid; place-items: center; padding: 0; } .signe { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; } /* Téléphone de l'en-tête : l'icône reste visible (blanche) quand la pastille devient orange */ .nav__tel .nav__tel-ico .ico { color: inherit; } .nav__tel:hover .nav__tel-ico { color: #fff; } /* Accueil : lien « Être rappelé » à côté de la photo de l'ingénieur */ .contact-humain strong { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; } .contact-humain strong .ico { width: 16px; height: 16px; color: var(--c-lien); transition: transform .25s cubic-bezier(.22,1,.36,1); } .contact-humain:hover strong .ico { transform: translateX(4px); } .contact-humain > span { display: grid; gap: 2px; } /* Liens des menus (méga-menu, Outils, Guides) : survol comme sur le site DPE — pastille de fond pâle, le lien glisse de 3 px, la vignette passe à l'orange et bascule, une flèche arrive */ .mega__lien, .sous-menu__lien { transition: background-color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .mega__lien > span:nth-child(2), .sous-menu__lien > span:nth-child(2) { flex: 1; min-width: 0; } .mega__ico, .sous-menu__ico { transition: background-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .menu-fleche { flex: none; display: grid; place-items: center; color: var(--c-action); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .menu-fleche .ico { width: 16px; height: 16px; } .mega__lien:hover, .mega__lien:focus-visible, .sous-menu__lien:hover, .sous-menu__lien:focus-visible { background: color-mix(in srgb, var(--c-orange) 10%, var(--c-blanc)); } .mega__lien:hover strong, .sous-menu__lien:hover strong { color: var(--c-lien); } .mega__lien:hover .mega__ico, .sous-menu__lien:hover .sous-menu__ico { background: var(--c-action); color: #fff; } .mega__lien:hover .mega__ico .ico, .sous-menu__lien:hover .sous-menu__ico .ico { transform: none; } .mega__lien:hover .menu-fleche, .mega__lien:focus-visible .menu-fleche, .sous-menu__lien:hover .menu-fleche, .sous-menu__lien:focus-visible .menu-fleche { opacity: 1; transform: none; } .mega__lien:focus-visible, .sous-menu__lien:focus-visible { outline: 2px solid var(--c-orange); outline-offset: -2px; } [data-theme="nuit"] .mega__lien:hover, [data-theme="nuit"] .sous-menu__lien:hover { background: color-mix(in srgb, var(--c-orange) 14%, var(--c-blanc)); } @media (max-width: 920px) { .menu-fleche { display: none; } .mega__lien:hover, .sous-menu__lien:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .mega__lien, .sous-menu__lien, .mega__ico, .sous-menu__ico, .menu-fleche { transition: none; } .mega__lien:hover, .sous-menu__lien:hover { transform: none; } } /* ===================================================================== MENUS : UN FOND PARTAGÉ (à la manière de hub.liquid-themes.com) À l'ouverture, le fond blanc se déplie depuis le haut (légère bascule en perspective) ; d'un menu à l'autre, il glisse et prend la taille du nouveau contenu, qui arrive du côté où l'on se déplace ; une petite pointe suit le menu ouvert. Sur téléphone : menus dépliants. ===================================================================== */ .nav__fond, .nav__pointe { display: none; } @media (min-width: 921px) { .nav__fond { display: block; position: absolute; top: 0; left: 0; width: 0; height: 0; z-index: 1; pointer-events: none; border-radius: 22px; background: var(--c-blanc); border: 1px solid var(--c-trait-clair); box-shadow: 0 2px 4px rgba(21,25,23,.04), 0 30px 60px -28px rgba(30,36,36,.45); opacity: 0; transition: opacity .2s ease, left .5s cubic-bezier(.19,1,.22,1), top .5s cubic-bezier(.19,1,.22,1), width .5s cubic-bezier(.19,1,.22,1), height .5s cubic-bezier(.19,1,.22,1); } .nav__fond.est-actif { opacity: 1; } .nav__fond.sans-glisse { transition: opacity .2s ease; } /* ouverture, comme sur le thème Ohio : le panneau bascule depuis son bord haut (volet qui se rabat), de -10° en perspective jusqu'à plat, en devenant opaque ; 0,35 s, accélère puis ralentit */ .nav__fond { transform-origin: 50% 0; } .nav__fond.est-revele { animation: volet .35s cubic-bezier(.645,.045,.355,1) backwards; } @keyframes volet { from { opacity: 0; transform: perspective(1000px) rotateX(-10deg); } to { opacity: 1; transform: perspective(1000px) rotateX(0); } } .nav__pointe { display: block; position: absolute; top: 0; left: 0; z-index: 3; width: 14px; height: 14px; margin-left: -7px; pointer-events: none; background: var(--c-blanc); border-top: 1px solid var(--c-trait-clair); border-left: 1px solid var(--c-trait-clair); border-radius: 3px 0 0 0; transform: rotate(45deg) scale(0); opacity: 0; transition: left .5s cubic-bezier(.19,1,.22,1), transform .3s cubic-bezier(.19,1,.22,1), opacity .2s ease; } .nav__pointe.est-actif { transform: rotate(45deg) scale(1); opacity: 1; } .nav__pointe.sans-glisse { transition: transform .3s cubic-bezier(.19,1,.22,1), opacity .2s ease; } /* les panneaux deviennent transparents : c'est le fond partagé qui dessine la boîte */ .sous-menu, .sous-menu.mega { z-index: 2; background: transparent; border-color: transparent; box-shadow: none; transition: opacity .2s ease, visibility .2s; transform: none; } .nav__item--deroulant.est-ouvert > .sous-menu { animation: none; } .nav__item--deroulant.est-ouvert > .sous-menu[data-entree="revele"], .nav__item--mega.est-ouvert .sous-menu.mega[data-entree="revele"] { transform-origin: 50% 0; animation: volet .35s cubic-bezier(.645,.045,.355,1) backwards; } .nav__item--deroulant.est-ouvert > .sous-menu[data-entree="droite"], .nav__item--deroulant.est-ouvert > .sous-menu[data-entree="gauche"], .nav__item--mega.est-ouvert .sous-menu.mega[data-entree="droite"], .nav__item--mega.est-ouvert .sous-menu.mega[data-entree="gauche"] { animation: none; } .sous-menu[data-entree="droite"] > * { animation: contenu-droite .45s cubic-bezier(.19,1,.22,1) both; } .sous-menu[data-entree="gauche"] > * { animation: contenu-gauche .45s cubic-bezier(.19,1,.22,1) both; } @keyframes contenu-droite { from { opacity: 0; transform: translateX(36px); } } @keyframes contenu-gauche { from { opacity: 0; transform: translateX(-36px); } } } @media (prefers-reduced-motion: reduce) { .nav__fond, .nav__pointe { transition: opacity .15s ease !important; animation: none !important; } .sous-menu[data-entree] > * { animation: none !important; } } /* le contenu du menu qu'on quitte s'efface aussitôt : pas de superposition pendant que le fond glisse */ @media (min-width: 921px) { .nav__item--deroulant:not(.est-ouvert) > .sous-menu { transition: none; } } /* ===================================================================== PIED DE PAGE FIXE, RÉVÉLÉ PAR EN DESSOUS (comme essentials.pixfort.com) Le pied de page reste posé au fond de l'écran, derrière la page ; en arrivant en bas, la page glisse vers le haut comme un rideau et le découvre. Un voile sombre s'efface et son contenu monte légèrement en s'éclaircissant (--pied-revele, de 0 à 1, posé par site.js). Seulement sur grand écran, et si le pied de page tient dans la fenêtre. ===================================================================== */ .pied-fixe main { position: relative; z-index: 1; background: var(--c-sauge); margin-bottom: var(--hauteur-pied, 0px); } .pied-fixe .pied { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; } /* Le pied reste masqué tant que le contenu le recouvre : son passage en position fixe au démarrage ne doit pas devenir un déplacement visible. */ .pied-fixe:not(.pied-decouvert) .pied { visibility: hidden; } /* le voile couleur de la marque (brique → orange → jaune soleil) qui recouvre le pied de page et s'estompe complètement pendant qu'on descend (--pied-voile, posé par site.js) */ .pied-fixe .pied::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to right, #F85A40, #F48924, #FFC845); opacity: var(--pied-voile, 0); } @media (prefers-reduced-motion: reduce) { .pied-fixe .pied::after { opacity: 0; } } /* Pied de page plus compact : la liste « Outils et guides » sur deux colonnes */ @media (min-width: 961px) { .pied { padding-top: 64px; } .pied__grille { grid-template-columns: 1.15fr 1.05fr 1.9fr 1.05fr; gap: 28px; align-items: start; } .pied__grille > div { min-width: 0; } .pied__guides .liste-liens { display: block; columns: 2; column-gap: 24px; } .pied__guides .liste-liens li { break-inside: avoid; margin-bottom: 12px; } } .pied__grille .liste-liens { line-height: 1.5; } .pied__marque p { text-align: left; line-height: 1.55; } .pied__marque .lien-action { padding-inline: 18px; gap: 12px; } /* Pied de page : icônes de contact plus grandes, à l'orange du logo, dans une pastille */ .pied__contact { gap: 12px; } .pied__contact li { align-items: center; gap: 14px; } .pied__contact .ico { flex: none; width: 38px; height: 38px; margin: 0; padding: 9px; border-radius: 50%; color: var(--c-orange); background: color-mix(in srgb, var(--c-orange) 13%, transparent); } .pied a.pied__civigo { font-weight: 600; color: var(--c-texte); background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: right bottom; background-size: 0% 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding-bottom: 3px; transition: background-size .35s cubic-bezier(.2,.7,.2,1); } .pied a.pied__civigo::after { content: none; } .pied a.pied__civigo:is(:hover, :focus-visible) { background-position: left bottom; background-size: 100% 2px; } .pied__bas p a { font-weight: 600; color: var(--c-texte); } /* Menus, d'un menu à l'autre : le fond se forme d'abord (0,35 s), puis le contenu arrive d'un bloc, juste avant la fin du glissement (jamais de contenu qui dépasse un fond pas encore formé) */ @media (min-width: 921px) { .nav__fond { transition: opacity .2s ease, left .35s cubic-bezier(.19,1,.22,1), top .35s cubic-bezier(.19,1,.22,1), width .35s cubic-bezier(.19,1,.22,1), height .35s cubic-bezier(.19,1,.22,1); } .nav__pointe { transition: left .35s cubic-bezier(.19,1,.22,1), transform .3s cubic-bezier(.19,1,.22,1), opacity .2s ease; } .sous-menu[data-entree="droite"] > *, .sous-menu[data-entree="gauche"] > * { animation-duration: .3s; animation-delay: .22s; animation-fill-mode: both; } .sous-menu[data-entree="droite"] :is(.sous-menu__lien, .mega__lien, .mega__titre), .sous-menu[data-entree="gauche"] :is(.sous-menu__lien, .mega__lien, .mega__titre) { animation: none !important; } /* le bandeau « Tous nos guides » entre avec le reste du menu, pas avant */ .nav__item--deroulant.est-ouvert > .sous-menu[data-entree="revele"] .sous-menu__vedette { animation: none; } /* méga-menu : carte d'appel compacte, centrée verticalement avec les colonnes */ .sous-menu.mega { align-items: stretch; } .mega__carte { justify-content: center; gap: 12px; padding: 22px; } .nav__item--mega.est-ouvert[class] .mega__carte { animation: mega-element .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; } } /* ===================================================================== MENUS : CHACUN SON FOND, QUI SE DÉPLIE COMME UN RIDEAU (thème Ohio) Plus de fond partagé qui glisse d'un menu à l'autre. À l'ouverture, le panneau bascule depuis son bord haut (-10° en perspective → à plat) en devenant opaque, en 0,35 s. Un pont invisible relie le lien au panneau : on peut descendre sans que le menu se ferme. ===================================================================== */ .nav__fond, .nav__pointe { display: none !important; } @media (min-width: 921px) { .sous-menu, .sous-menu.mega { background: var(--c-blanc); border: 1px solid var(--c-trait-clair); border-radius: 22px; box-shadow: 0 2px 4px rgba(21,25,23,.04), 0 30px 60px -28px rgba(30,36,36,.45); transform: none; } .sous-menu { padding: 10px; } .sous-menu.mega { padding: 22px; } .sous-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; } .nav__item--deroulant.est-ouvert > .sous-menu, .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega), .nav__item--mega.est-ouvert .sous-menu.mega { transform-origin: 50% 0; animation: volet .35s cubic-bezier(.645,.045,.355,1) backwards; } .sous-menu > *, .sous-menu.mega > * { animation-delay: 0s; } } /* ===================================================================== PETITS TITRES PLUS LISIBLES (pied de page, menus, accueil…) ===================================================================== */ .accueil-cle { font-size: 15px; letter-spacing: .08em; } .pied__titre { font-family: var(--f-titre); font-size: 17px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--c-texte); margin-bottom: 16px; } .mega__titre { font-size: 12.5px; letter-spacing: .1em; color: var(--c-texte); opacity: .75; } .contact__infos small { font-size: 12.5px; } .filtre__libelle { font-size: 13px; } .bandeau__prix small { font-size: 13px; } .outil__etiquette { font-size: 13px; } .prose .citation figcaption { font-size: 12.5px; } .recap small { font-size: 12.5px; } /* ===================================================================== ARTICLES : LE TEXTE SUR UNE FEUILLE BLANCHE (les 3 mises en page) Sur le fond sauge, marqueurs, liens et encadrés ressortaient mal : l'article est posé sur une feuille blanche, comme sur le site DPE. ===================================================================== */ .page-article .article-grille { grid-template-columns: minmax(0, calc(var(--largeur-texte) + 112px)) 300px; gap: clamp(32px, 4vw, 56px); } .page-article .prose[data-lecture] { background: var(--c-blanc); border-radius: 24px; padding: clamp(24px, 4vw, 56px); box-shadow: 0 1px 2px rgba(21,25,23,.04), 0 24px 50px -36px rgba(40,50,50,.35); } /* sur la feuille blanche, les blocs blancs prennent la teinte pâle du site pour rester visibles */ .page-article .prose .lire-aussi li a, .page-article .prose .tableau, .page-article .prose .faq__signe { background: var(--c-sauge-clair); } .page-article .prose .tableau th { background: var(--c-sauge); } .page-article .prose .outil { background: var(--c-sauge-clair); } .page-article .prose .photo--article { margin-top: 0; } .page-article .section { padding-top: clamp(40px, 5vw, 64px); } @media (max-width: 960px) { .page-article .article-grille { grid-template-columns: minmax(0, 1fr); } .page-article .prose[data-lecture] { border-radius: 18px; } } /* ---------- B. MAGAZINE : une colonne centrée, sommaire en tête ---------- */ @media (min-width: 961px) { .mise-b .bandeau__grille { grid-template-columns: minmax(0, 860px); justify-content: center; text-align: center; } .mise-b .bandeau .fil-ariane, .mise-b .bandeau .etiquettes { justify-content: center; } .mise-b .bandeau__chapo { margin-inline: auto; } .mise-b .bandeau__prix { justify-self: center; width: min(100%, 440px); text-align: left; } .mise-b .article-grille { grid-template-columns: minmax(0, 880px); } .mise-b .article-cote { order: -1; } .mise-b .article-cote__colle { position: static; } .mise-b .article-cote .encart { display: none; } .mise-b .sommaire { max-height: none; } .mise-b .sommaire__liste { overflow: visible; padding: 14px 18px 18px; } .mise-b .sommaire__parties { grid-template-columns: 1fr 1fr; column-gap: 24px; } .mise-b .sommaire__parties > li:not(:last-child)::after { display: none; } } /* ---------- C. DOSSIER TECHNIQUE : sommaire à gauche, texte, encadré à droite ---------- */ @media (min-width: 1200px) { .mise-c .article-grille { grid-template-columns: 250px minmax(0, 1fr) 270px; gap: 32px; max-width: 1360px; } .mise-c .article-cote, .mise-c .article-cote__colle { display: contents; } .mise-c .sommaire { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: calc(var(--hauteur-entete) + 24px); max-height: calc(100dvh - var(--hauteur-entete) - 48px); } .mise-c .prose[data-lecture] { grid-column: 2; grid-row: 1; padding: clamp(28px, 3vw, 44px); } .mise-c .encart { grid-column: 3; grid-row: 1; align-self: start; position: sticky; top: calc(var(--hauteur-entete) + 24px); } .mise-c .bandeau__grille { grid-template-columns: minmax(0, 1fr) 360px; } } /* ---------- Fonds de la zone de lecture (config.php → fond_articles, ou ?fond=…) ---------- */ /* Ivoire : un blanc cassé chaud, plus doux pour les yeux */ .fond-ivoire .prose[data-lecture] { background: #FFFCF4; } .fond-ivoire .prose .lire-aussi li a, .fond-ivoire .prose .tableau, .fond-ivoire .prose .outil { background: #F6F1E4; } /* Papier quadrillé : la feuille blanche avec le quadrillage léger du papier d'ingénieur */ .fond-quadrille .prose[data-lecture] { background: linear-gradient(rgba(70, 110, 120, .07) 1px, transparent 1px) 0 0 / 26px 26px, linear-gradient(90deg, rgba(70, 110, 120, .07) 1px, transparent 1px) 0 0 / 26px 26px, var(--c-blanc); } /* Sauge clair, sans feuille : pas de carte, la zone de lecture est seulement éclaircie */ .fond-clair .section:has(.article-grille) { background: var(--c-sauge-clair); } .fond-clair .prose[data-lecture] { background: transparent; box-shadow: none; padding-inline: 0; } .fond-clair .prose .lire-aussi li a, .fond-clair .prose .tableau, .fond-clair .prose .outil, .fond-clair .prose .faq__signe { background: var(--c-blanc); } [data-theme="nuit"] .fond-ivoire .prose[data-lecture] { background: var(--c-blanc); } /* ---------- Marges intérieures de la feuille réduites (toutes les versions) ---------- */ .page-article .prose[data-lecture] { padding: clamp(20px, 2.6vw, 36px) clamp(20px, 3vw, 40px); } .page-article .article-grille { grid-template-columns: minmax(0, calc(var(--largeur-texte) + 80px)) 300px; } .mise-b .article-grille { grid-template-columns: minmax(0, 840px); } .mise-c .prose[data-lecture] { padding: clamp(20px, 2.4vw, 32px); } /* ---------- Léger : tout le fond de la page éclairci, feuille blanche nette ---------- */ .fond-leger main { background: #EEF3F3; } .fond-leger .section:has(.article-grille) { background: #EEF3F3; } .fond-leger .bandeau { background: #E2EAEA; } .fond-leger .prose[data-lecture] { box-shadow: 0 1px 2px rgba(21,25,23,.04), 0 12px 32px -24px rgba(40,50,50,.3); border: 1px solid #E1E9E9; } .fond-leger .sommaire, .fond-leger .encart { border: 1px solid #E1E9E9; } [data-theme="nuit"] .fond-leger main, [data-theme="nuit"] .fond-leger .section:has(.article-grille) { background: var(--c-sauge); } [data-theme="nuit"] .fond-leger .bandeau { background: var(--c-sauge-fonce); } [data-theme="nuit"] .fond-leger .prose[data-lecture], [data-theme="nuit"] .fond-leger .sommaire, [data-theme="nuit"] .fond-leger .encart { border-color: var(--c-trait-clair); } @media (min-width: 1200px) { .page-article.mise-c .article-grille { grid-template-columns: 250px minmax(0, 1fr) 270px; } } @media (max-width: 960px) { .page-article .article-grille, .mise-b .article-grille { grid-template-columns: minmax(0, 1fr); } } /* ===================================================================== D. BARRE DE LECTURE : sommaire en barre horizontale collée sous le menu, texte centré, petit bouton « Calculer mon prix » flottant ===================================================================== */ @media (min-width: 961px) { .mise-d .article-grille { grid-template-columns: minmax(0, 860px); } .mise-d .article-cote { order: -1; position: sticky; top: var(--hauteur-entete); z-index: 20; margin-inline: calc(50% - 50vw); padding: 10px calc(50vw - 50%); background: color-mix(in srgb, #EEF3F3 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid #E1E9E9; } .mise-d .article-cote__colle { position: static; display: block; } .mise-d .sommaire { flex-direction: row; align-items: center; max-height: none; overflow: visible; background: none; border: 0; border-radius: 0; box-shadow: none; } .mise-d .sommaire__titre { flex: none; padding: 0 16px 0 0; border: 0; background: none; font-size: 14px; color: var(--c-gris); } .mise-d .sommaire__progression { bottom: -11px; height: 3px; } .mise-d .sommaire__liste { overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; } .mise-d .sommaire__liste::-webkit-scrollbar { display: none; } .mise-d .sommaire__parties { display: flex; gap: 6px; width: max-content; } .mise-d .sommaire__parties > li:not(:last-child)::after { display: none; } .mise-d .sommaire__parties a { padding: 7px 14px 7px 36px; border-radius: 999px; background-color: var(--c-blanc); border: 1px solid #E1E9E9; white-space: nowrap; font-size: 13.5px; } .mise-d .sommaire__parties a::before { left: 6px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; } .mise-d .sommaire__parties a[aria-current="true"] { background: var(--c-anthracite); border-color: var(--c-anthracite); color: #fff; } .mise-d .sommaire__parties a[aria-current="true"]::before { background: var(--c-orange); border-color: var(--c-orange); } /* l'encadré devient un petit bouton flottant en bas à droite */ .mise-d .encart { position: fixed; right: 24px; bottom: 24px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-radius: 999px; background: var(--c-anthracite); color: #fff; box-shadow: 0 18px 40px -16px rgba(20,26,26,.6); } .mise-d .encart > :not(.encart__tete):not(.encart__bouton) { display: none; } .mise-d .encart__picto { display: none; } .mise-d .encart .encart__titre { font-size: 15px; color: #fff; white-space: nowrap; } .mise-d .encart__bouton { width: auto; min-height: 42px; padding: 0 18px; font-size: 14px; } .mise-d .prose[data-lecture] { margin-top: 24px; } } /* ===================================================================== E. CARTES : chaque partie de l'article est une carte blanche numérotée ===================================================================== */ .mise-e .prose[data-lecture] { background: none; border: 0; box-shadow: none; padding: 0; counter-reset: partie-carte; } .mise-e .prose .partie { position: relative; margin: 0 0 20px; padding: clamp(20px, 2.6vw, 34px) clamp(20px, 3vw, 40px); background: var(--c-blanc); border: 1px solid #E1E9E9; border-radius: 22px; box-shadow: 0 1px 2px rgba(21,25,23,.03), 0 14px 34px -28px rgba(40,50,50,.35); } .mise-e .prose .partie > h2:first-child { margin-top: 0; padding-right: 60px; } .mise-e .prose .partie:has(> h2:first-child) { counter-increment: partie-carte; } .mise-e .prose .partie:has(> h2:first-child)::before { content: counter(partie-carte, decimal-leading-zero); position: absolute; top: clamp(20px, 2.6vw, 34px); right: clamp(20px, 3vw, 40px); font-family: var(--f-titre); font-size: 34px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c-orange) 35%, var(--c-blanc)); } .mise-e .prose .partie > :last-child { margin-bottom: 0; } .mise-e .prose > .faq--article, .mise-e .prose > h2#faq { background: var(--c-blanc); } .mise-e .prose > h2#faq { margin-top: 36px; padding: 28px 36px 0; border-radius: 22px 22px 0 0; border: 1px solid #E1E9E9; border-bottom: 0; } .mise-e .prose > .faq--article { margin-top: 0; padding: 8px 36px 20px; border-radius: 0 0 22px 22px; border: 1px solid #E1E9E9; border-top: 0; } .mise-e .prose > .signature { margin-top: 24px; } /* E : les règles d'espacement du texte s'appliquent aussi à l'intérieur des cartes */ .mise-e .prose > .partie + .partie { margin-top: 0; } .mise-e .prose .partie > * + * { margin-top: var(--esp-paragraphe); } .mise-e .prose .partie > h2 + * { margin-top: var(--esp-sous-h2); } .mise-e .prose .partie > :first-child { margin-top: 0; } /* D : la barre de lecture n'a pas de flou (il empêchait le bouton flottant de se placer en bas de l'écran) */ @media (min-width: 961px) { .mise-d .article-cote { backdrop-filter: none; background: #EEF3F3; } } .mise-e .prose .partie > :is(ul, ol) { margin-top: 36px; margin-bottom: 36px; } .mise-e .prose .partie > :is(ul, ol) + * { margin-top: 0; } .mise-e .prose .partie > h3 { margin-top: var(--esp-avant-h3); } .mise-e .prose .partie > h3 + * { margin-top: 14px; } .mise-e .prose .partie > :is(.appel, .encadre) { margin-block: 56px; } /* ===================================================================== ARTICLES : blocs sans ombre, d'un gris-sauge très clair, marges serrées (au lieu du blanc pur avec ombre) ===================================================================== */ .page-article { --bloc-article: #F6F9F9; --bloc-article-trait: #E2EAEA; } .page-article .prose[data-lecture], .mise-e .prose .partie, .mise-e .prose > h2#faq, .mise-e .prose > .faq--article, .page-article .sommaire, .page-article .encart { background: var(--bloc-article) !important; box-shadow: none !important; border: 1px solid var(--bloc-article-trait) !important; } .page-article .encart { background: color-mix(in srgb, var(--c-orange) 7%, var(--bloc-article)) !important; } .page-article .prose[data-lecture] { padding: clamp(18px, 2vw, 28px) clamp(18px, 2.4vw, 32px); } .mise-e .prose[data-lecture] { background: none !important; border: 0 !important; padding: 0; } .mise-e .prose .partie { padding: clamp(18px, 2vw, 26px) clamp(18px, 2.4vw, 30px); } .mise-c .prose[data-lecture] { padding: clamp(18px, 2vw, 26px); } /* les éléments posés dans le texte deviennent blancs pour se détacher du gris clair */ .page-article .prose .lire-aussi li a, .page-article .prose .tableau, .page-article .prose .outil, .page-article .prose .faq__signe { background: #fff; } .page-article .encart__rappel { background: #fff; } [data-theme="nuit"] .page-article { --bloc-article: var(--c-blanc); --bloc-article-trait: var(--c-trait-clair); } .page-article .photo--article { box-shadow: none; } /* Fond de page : le sauge-gris normal du site ; seuls les blocs prennent un ton plus clair de ce gris */ .fond-leger main, .fond-leger .section:has(.article-grille) { background: var(--c-sauge); } .fond-leger .bandeau { background: var(--c-sauge-fonce); } .page-article { --bloc-article: #EEF3F3; --bloc-article-trait: #D2DEDE; } .page-article .bandeau { background: var(--c-sauge) !important; } /* ===================================================================== FAQ : la marge du bas fait partie de la hauteur animée (plus de saut au départ) « + » et « − » : jamais agrandis ni rétrécis, donc jamais d'épaisseur qui change ===================================================================== */ .faq__reponse { padding: 0; overflow: hidden; } .faq__reponse::after { content: ""; display: block; height: 28px; } .prose .faq--article .faq__reponse { padding-bottom: 0; } .prose .faq--article .faq__reponse::after { height: 22px; } .mini-sim__compteur button:active:not(:disabled), .compteur__bouton:active { transform: none; } .mini-sim__compteur button, .compteur__bouton { transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .signe { shape-rendering: crispEdges; } /* ===================================================================== D. BARRE DE LECTURE : aussi sur tablette et téléphone ; bords fondus quand la barre défile ===================================================================== */ @media (max-width: 960px) { .mise-d .article-grille { grid-template-columns: minmax(0, 1fr); } .mise-d .article-cote { display: block; order: -1; position: sticky; top: var(--hauteur-entete); z-index: 20; margin-inline: calc(var(--gouttiere, 16px) * -1); padding: 8px var(--gouttiere, 16px); background: var(--c-sauge); border-bottom: 1px solid var(--c-trait-clair); } .mise-d .article-cote__colle { position: static; display: block; } .mise-d .sommaire { flex-direction: row; align-items: center; max-height: none; background: none; border: 0 !important; box-shadow: none; border-radius: 0; } .mise-d .sommaire__titre { display: none; } .mise-d .sommaire__liste { overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; } .mise-d .sommaire__liste::-webkit-scrollbar { display: none; } .mise-d .sommaire__parties { display: flex; gap: 6px; width: max-content; } .mise-d .sommaire__parties > li:not(:last-child)::after { display: none; } .mise-d .sommaire__parties a { padding: 6px 12px 6px 34px; border-radius: 999px; background-color: var(--c-blanc); border: 1px solid #E1E9E9; white-space: nowrap; font-size: 13px; } .mise-d .sommaire__parties a::before { left: 5px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; } .mise-d .sommaire__parties a[aria-current="true"] { background: var(--c-anthracite); border-color: var(--c-anthracite); color: #fff; } .mise-d .sommaire__parties a[aria-current="true"]::before { background: var(--c-orange); border-color: var(--c-orange); } .mise-d .encart { display: none; } .mise-d .prose[data-lecture] { margin-top: 16px; } } .mise-d .sommaire { background: none !important; border: 0 !important; } .mise-d .sommaire__liste { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); padding-inline: 12px; } .mise-d .sommaire__parties a { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ===================================================================== D. BARRE DE LECTURE SUR TOUTE LA LARGEUR + PROGRESSION SUR TOUTE LA LARGEUR ===================================================================== */ .mise-d .article-cote { margin-inline: calc(50% - 50vw) !important; padding: 10px max(var(--gouttiere, 16px), calc(50vw - 680px)) !important; } .mise-d .article-cote__colle, .mise-d .sommaire, .mise-d .sommaire__titre { position: static !important; } .mise-d .sommaire__liste { display: flex; flex: 1; min-width: 0; } .mise-d .sommaire__parties { margin-inline: auto; } /* la barre de progression : un trait sur toute la largeur, sous la barre */ .mise-d .sommaire__progression { left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 0; background: linear-gradient(90deg, #F7B8A3, var(--c-orange)); clip-path: inset(0 calc((1 - var(--progression, 0)) * 100%) 0 0); } @media (max-width: 960px) { .mise-d .sommaire__titre { display: block; font-size: 0; padding: 0; border: 0; } } /* --- Style « onglets » : texte souligné, sans pastilles --- */ .barre-onglets.mise-d .sommaire__parties { gap: 4px; } .barre-onglets.mise-d .sommaire__parties a { padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--c-gris); font-weight: 600; } .barre-onglets.mise-d .sommaire__parties a::before { content: counter(partie) "."; position: static; display: inline; width: auto; height: auto; margin-right: 6px; border: 0; background: none; translate: none; color: var(--c-orange); font-size: inherit; } .barre-onglets.mise-d .sommaire__parties a:hover { background: rgba(255,255,255,.6); color: var(--c-texte); } .barre-onglets.mise-d .sommaire__parties a[aria-current="true"] { background: var(--c-blanc); color: var(--c-texte); box-shadow: inset 0 -2px 0 var(--c-orange); } .barre-onglets.mise-d .sommaire__parties a[aria-current="true"]::before { background: none; color: var(--c-orange); } /* --- Style « compacte » : seulement les numéros ; la partie en cours déplie son titre --- */ .barre-compacte.mise-d .sommaire__parties { gap: 6px; align-items: center; } .barre-compacte.mise-d .sommaire__parties a { font-size: 0; padding: 0; width: 34px; height: 34px; border-radius: 999px; background: var(--c-blanc); border: 1px solid #E1E9E9; transition: width .4s cubic-bezier(.22,1,.36,1), background-color .25s ease, color .25s ease; } .barre-compacte.mise-d .sommaire__parties a::before { font-size: 11px; left: 5px; } .barre-compacte.mise-d .sommaire__parties a[aria-current="true"] { font-size: 13.5px; width: auto; padding: 0 16px 0 36px; display: inline-flex; align-items: center; } /* Style « compacte » : la partie en cours en foncé, titre lisible */ .barre-compacte.mise-d .sommaire__parties a[aria-current="true"] { background: var(--c-anthracite); border-color: var(--c-anthracite); color: #fff; } /* ===================================================================== BOUTON FLOTTANT « LE PRIX DE VOTRE ÉTUDE » (mise en page barre de lecture) Une carte arrondie en bas à droite : pictogramme, deux lignes de texte, flèche orange. Elle monte en douceur après l'introduction et s'efface à l'appel de fin d'article. ===================================================================== */ .flottant-prix { display: none; } @media (min-width: 961px) { .mise-d .encart { display: none !important; } .mise-d .flottant-prix { position: fixed; right: 28px; bottom: 28px; z-index: 40; display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 12px; border-radius: 20px; background: var(--c-anthracite); color: #fff; text-decoration: none; box-shadow: 0 2px 6px rgba(20,26,26,.18), 0 24px 48px -20px rgba(20,26,26,.6); opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .35s ease, transform .5s cubic-bezier(.19,1,.22,1), background-color .25s ease; } .mise-d .flottant-prix.est-visible { opacity: 1; transform: none; pointer-events: auto; } .flottant-prix__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.08); color: var(--c-orange-clair); } .flottant-prix__ico .ico { width: 22px; height: 22px; } .flottant-prix__texte { display: grid; line-height: 1.25; } .flottant-prix__texte small { font-size: 12.5px; color: rgba(255,255,255,.7); } .flottant-prix__texte strong { font-family: var(--f-titre); font-size: 16px; font-weight: 700; } .flottant-prix__fleche { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: 4px; border-radius: 50%; background: var(--c-action); color: #fff; transition: transform .3s cubic-bezier(.22,1,.36,1), background-color .25s ease; } .flottant-prix__fleche .ico { width: 18px; height: 18px; } .mise-d .flottant-prix:hover { background: #2E2B29; } .mise-d .flottant-prix:hover .flottant-prix__fleche { transform: translateX(3px); background: var(--c-action-survol); } .mise-d .flottant-prix:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; } } @media (prefers-reduced-motion: reduce) { .mise-d .flottant-prix { transition: opacity .2s ease; transform: none; } } /* Barre de progression : sur la largeur de la colonne de texte de l'article (860 px au plus) */ .mise-d .sommaire__progression { left: max(var(--gouttiere, 16px), calc(50% - 430px)); right: max(var(--gouttiere, 16px), calc(50% - 430px)); border-radius: 3px; background: linear-gradient(90deg, #F7B8A3, var(--c-orange)); } .mise-d .sommaire__progression::before { content: ""; position: absolute; inset: 0; z-index: -1; } /* ===================================================================== FINITIONS : pied de page pastel, barre de lecture, en-tête des articles ===================================================================== */ /* Pied de page : un voile pastel (rose, pêche, crème) comme sur pixfort, plus de teinte terne */ .pied-fixe .pied::after { background: linear-gradient(100deg, #F9C4B4 0%, #FBD4AE 50%, #FFEBB4 100%); } /* Ligne d'informations sous le titre */ .article-infos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 22px; font-size: 14px; color: var(--c-gris); } .article-infos span { display: inline-flex; align-items: center; gap: 7px; } .article-infos .ico { width: 16px; height: 16px; color: var(--c-lien); } .article-infos span + span::before { content: ""; width: 4px; height: 4px; margin-right: 6px; border-radius: 50%; background: var(--c-trait-clair); } .article-infos span:first-child + span::before, .article-infos span + span::before { display: inline-block; } /* Barre de lecture : compteur à droite, progression un peu plus épaisse et sans à-coup */ .sommaire__reste { display: none; } .mise-d .sommaire__reste { display: block; flex: none; margin: 0 0 0 14px; padding: 6px 12px; border-radius: 999px; background: var(--c-blanc); border: 1px solid #E1E9E9; font-size: 13px; font-weight: 600; color: var(--c-gris); font-variant-numeric: tabular-nums; white-space: nowrap; } .mise-d .sommaire__progression { height: 4px; bottom: -2px; transition: clip-path .25s linear; } @media (max-width: 700px) { .mise-d .sommaire__reste { display: none; } } /* En-tête de l'article aligné sur la colonne de texte (barre de lecture) */ @media (min-width: 961px) { .mise-d .bandeau__grille { grid-template-columns: minmax(0, 860px); justify-content: center; } .mise-d .bandeau h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.4rem); } .mise-d .bandeau__prix { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 14px 14px 14px 22px; border-radius: 18px; background: var(--c-blanc); border: 1px solid #E1E9E9; box-shadow: none; } .mise-d .bandeau__prix small { flex-basis: 100%; margin: 0; } .mise-d .bandeau__prix strong { margin: 0; font-size: 30px; } .mise-d .bandeau__prix .btn { width: auto; margin: 0 0 0 auto !important; } .mise-d .bandeau__prix:not(:has(strong)) small { flex-basis: auto; } } .mise-d .sommaire__reste { order: 3; margin: 0 0 0 14px; } /* ===================================================================== SOUS-MENUS : INTERLIGNES SERRÉS (toutes les versions) Titre et précision collés l'un à l'autre, cases moins hautes, titres sur une ligne ===================================================================== */ .sous-menu__lien, .mega__lien { padding: 9px 10px; gap: 12px; line-height: 1.25; } .sous-menu__lien strong, .mega__lien strong { font-size: 14.5px; line-height: 1.25; } .sous-menu__lien small, .mega__lien small { margin-top: 2px; font-size: 13px; line-height: 1.3; } .sous-menu__ico, .mega__ico { width: 38px; height: 38px; border-radius: 11px; } .sous-menu__ico .ico, .mega__ico .ico { width: 19px; height: 19px; } .sous-menu__vedette { padding: 12px 14px; line-height: 1.25; } .sous-menu__vedette small { margin-top: 2px; } @media (min-width: 921px) { .sous-menu--large { width: 640px; left: -200px; } .sous-menu--large .sous-menu__liens { gap: 2px 6px; } } /* ===================================================================== 1. LISTE AÉRÉE : petites icônes nues, un filet entre les liens ===================================================================== */ @media (min-width: 921px) { .menus-1 .sous-menu__ico, .menus-1 .mega__ico { width: 30px; height: 30px; background: none !important; color: var(--c-lien); } .menus-1 .sous-menu__lien:hover .sous-menu__ico, .menus-1 .mega__lien:hover .mega__ico { background: none !important; color: var(--c-orange); } .menus-1 .sous-menu__liens { gap: 0 16px; } .menus-1 .sous-menu__lien { border-bottom: 1px solid #EDF2F2; border-radius: 0; } .menus-1 .sous-menu__lien:hover { border-radius: 10px; border-color: transparent; } } /* ===================================================================== 2. TUILES : chaque lien est une tuile pastel, icône au-dessus du titre ===================================================================== */ @media (min-width: 921px) { .menus-2 .sous-menu__liens { grid-template-columns: repeat(2, 1fr); gap: 8px; } .menus-2 .sous-menu--large .sous-menu__liens { grid-template-columns: repeat(3, 1fr); } .menus-2 .sous-menu--large { width: 720px; left: -260px; } .menus-2 .sous-menu:not(.sous-menu--large):not(.mega) { width: 460px; } .menus-2 .sous-menu__lien { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--pastille, var(--p-peche)) 28%, #fff); } .menus-2 .sous-menu__lien:hover { background: color-mix(in srgb, var(--pastille, var(--p-peche)) 55%, #fff); } .menus-2 .sous-menu__lien .menu-fleche { display: none; } .menus-2 .sous-menu__ico { background: #fff !important; } .menus-2 .mega__lien { padding: 10px; border-radius: 14px; } .menus-2 .mega__lien:hover { background: color-mix(in srgb, var(--pastille, var(--p-peche)) 40%, #fff); } } /* ===================================================================== 3. COLONNE VEDETTE : une grande carte foncée à gauche, la liste à droite ===================================================================== */ @media (min-width: 921px) { .menus-3 .sous-menu--large { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 12px; width: 760px; left: -280px; } .menus-3 .sous-menu--large .sous-menu__vedette { flex-direction: column; align-items: flex-start; justify-content: space-between; margin: 0; padding: 20px; min-height: 100%; } .menus-3 .sous-menu--large .sous-menu__vedette strong { font-size: 20px; font-family: var(--f-titre); } .menus-3 .sous-menu--large .sous-menu__vedette > .ico { margin: 0; } .menus-3 .sous-menu--large .sous-menu__vedette-ico { width: 48px; height: 48px; } .menus-3 .sous-menu:not(.sous-menu--large):not(.mega) { width: 380px; } .menus-3 .sous-menu__ico { border-radius: 50%; } } /* ===================================================================== 4. PANNEAUX PLEINE LARGEUR : tous les menus s'ouvrent comme « Nos études » ===================================================================== */ @media (min-width: 921px) { .menus-4 .nav__item--deroulant { position: static; } .menus-4 .sous-menu:not(.mega) { left: 0; right: 0; width: auto; top: calc(100% - 6px); padding: 22px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; } .menus-4 .sous-menu:not(.mega):not(.sous-menu--large) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menus-4 .sous-menu:not(.mega):not(.sous-menu--large) .sous-menu__liens { display: contents; } .menus-4 .sous-menu--large .sous-menu__liens { grid-template-columns: repeat(3, minmax(0, 1fr)); } .menus-4 .sous-menu--large .sous-menu__vedette { margin: 0; min-height: 100%; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 22px; } .menus-4 .sous-menu--large .sous-menu__vedette strong { font-family: var(--f-titre); font-size: 22px; } .menus-4 .sous-menu::before { top: -18px; height: 18px; } } /* ===================================================================== SOUS-MENUS 5 et 6 (inspirés de pixfort) : panneau pleine largeur, liens en texte seul en colonnes, et le bloc d'appel en BANDEAU d'une autre couleur, collé en bas. 5 : panneau anthracite + bandeau pastel · 6 : panneau blanc + bandeau anthracite ===================================================================== */ .sous-menu__bande { display: none; } @media (min-width: 921px) { .menus-5, .menus-6 { --m-fond: #fff; --m-texte: var(--c-texte); --m-doux: var(--c-gris); --m-trait: #E6ECEC; --m-survol: var(--c-lien); --m-bande: var(--c-anthracite); --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.7); --m-bande-accent: var(--c-orange-clair); } .menus-5 { --m-fond: #24211F; --m-texte: #fff; --m-doux: rgba(255,255,255,.55); --m-trait: rgba(255,255,255,.1); --m-survol: var(--c-orange-clair); --m-bande: linear-gradient(100deg, #F9C4B4 0%, #FBD4AE 50%, #FFEBB4 100%); --m-bande-texte: var(--c-anthracite); --m-bande-doux: #5E5550; --m-bande-accent: var(--c-lien); } /* panneau pleine largeur */ :is(.menus-5, .menus-6) .nav__item--deroulant { position: static; } :is(.menus-5, .menus-6) .sous-menu, :is(.menus-5, .menus-6) .sous-menu.mega { left: 0; right: 0; width: auto; top: calc(100% - 6px); padding: 30px 34px 0; overflow: hidden; display: grid; grid-template-columns: 1fr; gap: 0; background: var(--m-fond) !important; border: 1px solid var(--m-trait) !important; border-radius: 18px; } :is(.menus-5, .menus-6) .sous-menu::before { top: -18px; height: 18px; } /* liens en texte seul, en colonnes */ :is(.menus-5, .menus-6) .sous-menu__liens { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 28px; padding-bottom: 28px; } :is(.menus-5, .menus-6) .mega__colonnes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; padding-bottom: 28px; } :is(.menus-5, .menus-6) .sous-menu__ico, :is(.menus-5, .menus-6) .mega__ico, :is(.menus-5, .menus-6) .menu-fleche { display: none; } :is(.menus-5, .menus-6) .sous-menu__lien, :is(.menus-5, .menus-6) .mega__lien { display: block; padding: 9px 0; border: 0; border-radius: 0; background: none !important; color: var(--m-texte); } :is(.menus-5, .menus-6) .sous-menu__lien strong, :is(.menus-5, .menus-6) .mega__lien strong { display: inline; font-size: 15px; font-weight: 600; color: var(--m-texte); transition: color .2s ease; } :is(.menus-5, .menus-6) .sous-menu__lien small, :is(.menus-5, .menus-6) .mega__lien small { display: block; margin-top: 3px; color: var(--m-doux); } :is(.menus-5, .menus-6) .sous-menu__lien:hover strong, :is(.menus-5, .menus-6) .mega__lien:hover strong { color: var(--m-survol); } :is(.menus-5, .menus-6) .mega__titre { border-bottom: 0; padding: 0 0 6px; color: var(--m-doux); opacity: 1; } :is(.menus-5, .menus-6) .mega__colonne { gap: 0; } /* petites étiquettes, comme les « Featured » */ :is(.menus-5, .menus-6) a[href="/devis"].sous-menu__lien strong::after, :is(.menus-5, .menus-6) #sous-menu-outils a[href="/outil-fissure"] strong::after, :is(.menus-5, .menus-6) a[href="/reconnaitre-mur-porteur#test"] strong::after { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 5px; vertical-align: 2px; font-size: 11px; font-weight: 600; letter-spacing: .02em; background: var(--m-etiquette, color-mix(in srgb, var(--c-orange) 16%, transparent)); color: var(--m-survol); } :is(.menus-5, .menus-6) a[href="/devis"].sous-menu__lien strong::after { content: "2 min"; } :is(.menus-5, .menus-6) #sous-menu-outils a[href="/outil-fissure"] strong::after { content: "Nouveau"; } :is(.menus-5, .menus-6) a[href="/reconnaitre-mur-porteur#test"] strong::after { content: "Populaire"; } /* le bandeau du bas : même mise en forme pour « Tous nos guides », le simulateur et « Être rappelé » */ :is(.menus-5, .menus-6) .sous-menu__vedette, :is(.menus-5, .menus-6) .mega__carte, :is(.menus-5, .menus-6) .sous-menu__bande { order: 9; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 0; margin: 0 -34px; padding: 20px 34px; border-radius: 0; background: var(--m-bande); color: var(--m-bande-texte); text-decoration: none; } :is(.menus-5, .menus-6) .sous-menu__bande { display: flex; } :is(.menus-5, .menus-6) .sous-menu__vedette-ico { display: none; } :is(.menus-5, .menus-6) .sous-menu__vedette strong, :is(.menus-5, .menus-6) .mega__carte-titre, :is(.menus-5, .menus-6) .sous-menu__bande strong { font-family: var(--f-titre); font-size: 19px; font-weight: 700; color: var(--m-bande-texte); margin: 0; } :is(.menus-5, .menus-6) .sous-menu__vedette > span:not(.sous-menu__vedette-ico) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; } :is(.menus-5, .menus-6) .sous-menu__vedette small, :is(.menus-5, .menus-6) .mega__carte p:not(.mega__carte-titre), :is(.menus-5, .menus-6) .sous-menu__bande span { margin: 0; font-size: 14px; color: var(--m-bande-doux); } :is(.menus-5, .menus-6) .sous-menu__vedette > .ico { margin-left: auto; color: var(--m-bande-accent); } :is(.menus-5, .menus-6) .sous-menu__bande em { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-style: normal; font-weight: 700; color: var(--m-bande-accent); } :is(.menus-5, .menus-6) .sous-menu__bande em .ico { width: 16px; height: 16px; transition: transform .25s cubic-bezier(.22,1,.36,1); } :is(.menus-5, .menus-6) .sous-menu__bande:hover em .ico, :is(.menus-5, .menus-6) .sous-menu__vedette:hover > .ico { transform: translateX(4px); } :is(.menus-5, .menus-6) .mega__carte .btn { margin-left: auto; } :is(.menus-5, .menus-6) .mega__carte .mega__rappel { color: var(--m-bande-texte); } :is(.menus-5, .menus-6) .mega__carte .mega__rappel .ico { color: var(--m-bande-accent); } } /* ===================================================================== SOUS-MENUS 5 et 6 : icônes fines ou puces « brique » devant les liens ===================================================================== */ @media (min-width: 921px) { /* le lien redevient une ligne : repère à gauche, titre et précision à droite */ :is(.menus-5, .menus-6) .sous-menu__lien, :is(.menus-5, .menus-6) .mega__lien { display: flex; align-items: flex-start; gap: 12px; } :is(.menus-5, .menus-6) .sous-menu__lien > span:nth-child(2), :is(.menus-5, .menus-6) .mega__lien > span:nth-child(2) { flex: 1; min-width: 0; } /* Icônes fines : trait léger, sans pastille, ton discret ; orange au survol */ .puces-icone:is(.menus-5, .menus-6) .sous-menu__ico, .puces-icone:is(.menus-5, .menus-6) .mega__ico { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-top: -2px; border-radius: 10px; background: none !important; border: 1px solid var(--m-trait); color: var(--m-doux); transition: color .2s ease, border-color .2s ease, background-color .2s ease; } .puces-icone:is(.menus-5, .menus-6) .sous-menu__ico .ico, .puces-icone:is(.menus-5, .menus-6) .mega__ico .ico { width: 18px; height: 18px; stroke-width: 1.4; } .puces-icone:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover :is(.sous-menu__ico, .mega__ico) { color: var(--m-survol); border-color: color-mix(in srgb, var(--c-orange) 55%, transparent); background: color-mix(in srgb, var(--c-orange) 10%, transparent) !important; } /* Puces « brique » : un petit pavé orange, comme une brique du logo, qui s'allonge au survol */ .puces-brique:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien)::before { content: ""; flex: none; width: 10px; height: 6px; margin-top: 8px; border-radius: 1.5px; background: var(--c-orange); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); transition: width .3s cubic-bezier(.22,1,.36,1), background-color .2s ease; } .puces-brique:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):is(:hover, :focus-visible, [aria-current="page"])::before { width: 18px; } } /* ===================================================================== SOUS-MENUS 5 et 6 : PALETTES (panneau / bandeau du bas) ===================================================================== */ @media (min-width: 921px) { /* Ardoise : le gris-bleu du logo + bandeau orange brique */ :is(.menus-5, .menus-6).teinte-ardoise { --m-fond: #3A3E48; --m-texte: #fff; --m-doux: rgba(255,255,255,.62); --m-trait: rgba(255,255,255,.14); --m-survol: #FFB49C; --m-bande: #C8441F; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.85); --m-bande-accent: #fff; } /* Crème : panneau crème chaud + bandeau orange brique */ :is(.menus-5, .menus-6).teinte-creme { --m-fond: #FBF6EE; --m-texte: #2B2623; --m-doux: #7C716A; --m-trait: #EDE3D6; --m-survol: var(--c-lien); --m-bande: #C8441F; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.85); --m-bande-accent: #fff; } /* Sauge : panneau sauge clair + bandeau sauge profond */ :is(.menus-5, .menus-6).teinte-sauge { --m-fond: #EEF3F3; --m-texte: var(--c-texte); --m-doux: #5E6B6B; --m-trait: #D6E0E0; --m-survol: var(--c-lien); --m-bande: #2F4545; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.75); --m-bande-accent: #FFB49C; } /* Nuit et soleil : panneau bleu nuit + bandeau jaune soleil */ :is(.menus-5, .menus-6).teinte-nuit { --m-fond: #1F2833; --m-texte: #fff; --m-doux: rgba(255,255,255,.6); --m-trait: rgba(255,255,255,.12); --m-survol: #FFD45C; --m-bande: #FFD45C; --m-bande-texte: #1F2833; --m-bande-doux: #4A4636; --m-bande-accent: #1F2833; } /* Blanc et sauge : panneau blanc + bandeau sauge moyen, texte foncé */ :is(.menus-5, .menus-6).teinte-blanc-sauge { --m-fond: #fff; --m-texte: var(--c-texte); --m-doux: var(--c-gris); --m-trait: #E6ECEC; --m-survol: var(--c-lien); --m-bande: #CBD8D8; --m-bande-texte: var(--c-texte); --m-bande-doux: #4F5C5C; --m-bande-accent: var(--c-lien); } /* sur un bandeau orange ou jaune, le bouton passe en foncé pour rester lisible */ :is(.teinte-ardoise, .teinte-creme):is(.menus-5, .menus-6) .mega__carte .btn { background: #fff; color: var(--c-lien); box-shadow: none; } .teinte-nuit:is(.menus-5, .menus-6) .mega__carte .btn { background: #1F2833; color: #fff; box-shadow: none; } /* étiquettes et puces brique aux couleurs de la palette */ :is(.teinte-nuit):is(.menus-5, .menus-6) { --m-etiquette: rgba(255,212,92,.18); } .teinte-nuit.puces-brique :is(.sous-menu__lien, .mega__lien)::before { background: #FFD45C; } } /* ===================================================================== SOUS-MENUS 5 et 6 : LARGEUR ===================================================================== */ @media (min-width: 921px) { /* Plein écran : le panneau va d'un bord à l'autre ; les liens restent alignés sur le contenu du site */ .largeur-ecran:is(.menus-5, .menus-6) .sous-menu, .largeur-ecran:is(.menus-5, .menus-6) .sous-menu.mega { left: calc(50% - 50vw); right: calc(50% - 50vw); border-radius: 0; border-left: 0 !important; border-right: 0 !important; padding-inline: max(var(--gouttiere), calc(50vw - (var(--largeur-site) / 2) + var(--gouttiere))); } .largeur-ecran:is(.menus-5, .menus-6) :is(.sous-menu__vedette, .mega__carte, .sous-menu__bande) { margin-inline: calc(-1 * max(var(--gouttiere), calc(50vw - (var(--largeur-site) / 2) + var(--gouttiere)))); padding-inline: max(var(--gouttiere), calc(50vw - (var(--largeur-site) / 2) + var(--gouttiere))); } /* Largeur du contenu : du bord gauche du logo au bord droit du bouton « Chiffrer mon projet » */ .largeur-contenu:is(.menus-5, .menus-6) .sous-menu, .largeur-contenu:is(.menus-5, .menus-6) .sous-menu.mega { left: var(--gouttiere); right: var(--gouttiere); } } /* ===================================================================== SOUS-MENUS : PALETTES ASSORTIES AU SITE (uniquement les couleurs du site) ===================================================================== */ @media (min-width: 921px) { /* Site clair : le gris clair des blocs d'article + bandeau sauge foncé du pied de page */ :is(.menus-5, .menus-6).teinte-site-clair { --m-fond: #EEF3F3; --m-texte: var(--c-texte); --m-doux: var(--c-gris); --m-trait: #D2DEDE; --m-survol: var(--c-lien); --m-bande: #CBD8D8; --m-bande-texte: var(--c-texte); --m-bande-doux: #4F5C5C; --m-bande-accent: var(--c-lien); } /* Site sauge : le fond même de la page + bandeau anthracite des sections tarifs et méthode */ :is(.menus-5, .menus-6).teinte-site-sauge { --m-fond: #DCE6E6; --m-texte: var(--c-texte); --m-doux: #4F5C5C; --m-trait: #C2D0D0; --m-survol: var(--c-lien); --m-bande: #1E1C1B; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.7); --m-bande-accent: var(--c-orange-clair); } /* Site anthracite : l'anthracite chaud des sections + bandeau orange brique des boutons */ :is(.menus-5, .menus-6).teinte-site-anthracite { --m-fond: #1E1C1B; --m-texte: #fff; --m-doux: rgba(255,255,255,.6); --m-trait: rgba(255,255,255,.1); --m-survol: var(--c-orange-clair); --m-bande: #CC4422; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.85); --m-bande-accent: #fff; } .teinte-site-anthracite:is(.menus-5, .menus-6) .mega__carte .btn { background: #fff; color: var(--c-lien); box-shadow: none; } /* sur un panneau du même ton que la page, une ombre douce le détache */ .teinte-site-sauge:is(.menus-5, .menus-6) .sous-menu { box-shadow: 0 24px 50px -30px rgba(30,36,36,.45) !important; } } /* Site verre : la palette site-clair en verre dépoli (la page se devine, floutée, derrière le menu) */ @media (min-width: 921px) { :is(.menus-5, .menus-6).teinte-site-verre { --m-fond: rgba(238, 243, 243, .68); --m-texte: var(--c-texte); --m-doux: #4F5C5C; --m-trait: rgba(255,255,255,.7); --m-survol: var(--c-lien); --m-bande: rgba(203, 216, 216, .72); --m-bande-texte: var(--c-texte); --m-bande-doux: #3F4C4C; --m-bande-accent: var(--c-lien); } .teinte-site-verre .entete { -webkit-backdrop-filter: none; backdrop-filter: none; } .teinte-site-verre:is(.menus-5, .menus-6) .sous-menu, .teinte-site-verre:is(.menus-5, .menus-6) .sous-menu.mega { -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 24px 50px -30px rgba(30,36,36,.4) !important; } .teinte-site-verre:is(.menus-5, .menus-6) :is(.sous-menu__vedette, .mega__carte, .sous-menu__bande) { border-top: 1px solid rgba(255,255,255,.55); } } /* ===================================================================== ORANGES DE LA MARQUE (config.php → orange, ou ?orange=…) Chaque teinte a sa version foncée pour les boutons (texte blanc ≥ 4,5:1). ===================================================================== */ body.orange-vif { --c-orange: #FF5A1F; --c-orange-clair: #FF8452; --c-brique: #C2410C; --c-action: #C8400C; --c-action-survol: #A83508; --c-lien: #A8380E; } body.orange-corail { --c-orange: #F26A4B; --c-orange-clair: #F78E74; --c-brique: #B84A33; --c-action: #C24A2E; --c-action-survol: #A33D25; --c-lien: #A33F27; } body.orange-terracotta { --c-orange: #DD6B48; --c-orange-clair: #EA8C6E; --c-brique: #A8452A; --c-action: #B04A2C; --c-action-survol: #933C23; --c-lien: #9A4127; } body.orange-safran { --c-orange: #F27A2C; --c-orange-clair: #F79A5C; --c-brique: #B5520F; --c-action: #B5520F; --c-action-survol: #96440C; --c-lien: #974710; } body.orange-vermillon { --c-orange: #F04E23; --c-orange-clair: #F57A57; --c-brique: #B83A16; --c-action: #C43B12; --c-action-survol: #A3300E; --c-lien: #A3361A; } /* ===================================================================== SOUS-MENUS 5 et 6 : le panneau s'accroche exactement à la ligne du bas de l'en-tête ===================================================================== */ @media (min-width: 921px) { :is(.menus-5, .menus-6) .sous-menu, :is(.menus-5, .menus-6) .sous-menu.mega { top: calc(var(--hauteur-entete) - (var(--hauteur-entete) - 100%)); top: 100%; border-top-left-radius: 0; border-top-right-radius: 0; } :is(.menus-5, .menus-6) .sous-menu::before { top: -1px; height: 1px; } } /* ===================================================================== DÉGRADÉS « HALO » (inspirés des visuels Yohan) : un grand rond orange flou qui se fond dans un fond clair, pour les appels à l'action et les encadrés. config.php → degrades, ou ?degrade=halo | plein | aucun ===================================================================== */ .degrade-halo .appel, .degrade-halo .prose .appel-ligne, .degrade-halo .encart, .degrade-halo .bandeau__prix { position: relative; overflow: hidden; isolation: isolate; background: #F4F1EC !important; color: var(--c-texte); border: 0 !important; box-shadow: none !important; } /* le rond orange de Yohan : un cœur orange franc, des bords fondus, posé dans un coin et coupé par le cadre */ .degrade-halo :is(.appel, .encart, .bandeau__prix)::after, .degrade-halo .prose .appel-ligne::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; width: 380px; height: 380px; right: -140px; top: -170px; background: radial-gradient(circle, var(--c-orange) 0%, var(--c-orange) 34%, color-mix(in srgb, var(--c-orange) 55%, transparent) 50%, transparent 70%); filter: blur(2px); } .degrade-halo .encart::after { width: 300px; height: 300px; right: -150px; top: -150px; } .degrade-halo .prose .appel-ligne::after { width: 220px; height: 220px; right: -90px; top: -110px; } .degrade-halo .appel::before { display: none; } .degrade-halo .appel .appel__titre { color: var(--c-texte); } .degrade-halo .appel .appel__texte, .degrade-halo .appel .appel__tel { color: #5E5550; } .degrade-halo .appel__actions, .degrade-halo .encart > *, .degrade-halo .bandeau__prix > * { position: relative; } /* Appel de fin d'accueil : la feuille quadrillée et son scotch restent ; le grand rond orange est DERRIÈRE */ .degrade-halo .final .conteneur { position: relative; isolation: isolate; } .degrade-halo .final .conteneur::before { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; width: 620px; height: 620px; right: max(0px, calc(50% - 600px)); top: 50%; translate: 0 -50%; background: radial-gradient(circle, var(--c-orange) 0%, var(--c-orange) 30%, color-mix(in srgb, var(--c-orange) 50%, transparent) 48%, transparent 68%); } .degrade-halo .final::after { display: none; } /* Plein : un aplat orange franc qui s'éclaircit en bas à droite, texte blanc (comme les cartes oranges de Yohan) */ .degrade-plein .appel, .degrade-plein .prose .appel-ligne, .degrade-plein .encart { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(90% 140% at 100% 100%, color-mix(in srgb, var(--c-orange) 60%, #FFD9A8) 0%, transparent 60%), var(--c-action) !important; color: #fff; border: 0 !important; box-shadow: none !important; } .degrade-plein .appel::before { display: none; } .degrade-plein :is(.appel, .appel-ligne, .encart) :is(.appel__titre, .appel__texte, .appel__tel, p, .encart__titre) { color: #fff !important; } .degrade-plein :is(.appel, .appel-ligne, .encart) .btn--primaire { background: #fff; color: var(--c-lien); box-shadow: none; } .degrade-plein .encart__secondaire { color: #fff; } .degrade-plein .encart__picto { background: rgba(255,255,255,.18); color: #fff; } /* ===================================================================== ICÔNES FINES BICOLORES (réutilisables partout) Trait fin foncé, parties pleines du dessin en orange, dans un carré arrondi à filet fin et léger dégradé. Au survol de leur carte : filet et trait orange. Utilisées par le menu 6 (?puce=icone) et, sur tout le site, avec ?icones=fines. ===================================================================== */ .ico-fine, .puces-icone:is(.menus-5, .menus-6) :is(.sous-menu__ico, .mega__ico), .icones-fines :is(.tarif__ico, .outil-carte__ico, .livrables__num, .encadre__ico, .encart__picto, .sous-menu__ico, .mega__ico), .icones-fines .contact__infos .ico, .icones-fines .pied__contact .ico { --fine-trait: var(--c-texte); display: grid; place-items: center; flex: none; background: linear-gradient(160deg, #FFFFFF 0%, #EEF3F3 100%) !important; border: 1px solid #D3DEDE; border-radius: 12px; color: var(--fine-trait); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30,36,36,.06); transition: border-color .25s ease, color .25s ease, box-shadow .25s ease; } :is(.ico-fine, .puces-icone:is(.menus-5, .menus-6) :is(.sous-menu__ico, .mega__ico), .icones-fines :is(.tarif__ico, .outil-carte__ico, .livrables__num, .encadre__ico, .encart__picto, .sous-menu__ico, .mega__ico)) .ico, .icones-fines .contact__infos .ico, .icones-fines .pied__contact .ico { stroke-width: 1.5; } /* les parties pleines du dessin passent en orange : poutre, écran, bouclier… */ :is(.ico-fine, .puces-icone:is(.menus-5, .menus-6) :is(.sous-menu__ico, .mega__ico), .icones-fines :is(.tarif__ico, .outil-carte__ico, .livrables__num, .encadre__ico, .encart__picto, .sous-menu__ico, .mega__ico)) .ico [fill="currentColor"], .icones-fines :is(.contact__infos, .pied__contact) .ico [fill="currentColor"] { fill: var(--c-orange); fill-opacity: .55; } /* survol de la carte ou du lien : filet et trait orange */ :is(.tarif, .outil-carte, .sous-menu__lien, .mega__lien, .livrables__liste li, .contact__infos li):hover :is(.tarif__ico, .outil-carte__ico, .sous-menu__ico, .mega__ico, .livrables__num, .ico-fine) { border-color: color-mix(in srgb, var(--c-orange) 55%, #D3DEDE); } .icones-fines :is(.tarif, .outil-carte, .livrables__liste li, .contact__infos li):hover :is(.tarif__ico, .outil-carte__ico, .livrables__num) { color: var(--c-lien); } .puces-icone:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover :is(.sous-menu__ico, .mega__ico) { color: var(--c-lien); background: linear-gradient(160deg, #FFFFFF 0%, #FBEDE7 100%) !important; } /* sur le panneau foncé du menu 5, le carré devient sombre */ .menus-5.puces-icone:not(.teinte-site-clair):not(.teinte-site-verre):not(.teinte-sauge):not(.teinte-creme):not(.teinte-blanc-sauge) :is(.sous-menu__ico, .mega__ico) { --fine-trait: #fff; background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.14); box-shadow: none; } /* tailles */ .icones-fines .contact__infos .ico, .icones-fines .pied__contact .ico { width: 40px; height: 40px; padding: 9px; } [data-theme="nuit"] :is(.ico-fine, .icones-fines :is(.tarif__ico, .outil-carte__ico, .livrables__num, .encart__picto)) { --fine-trait: #E7EDED; background: linear-gradient(160deg, #263030 0%, #1D2525 100%) !important; border-color: var(--c-trait-clair); box-shadow: none; } /* Sous-menus 5 et 6 : pont invisible entre le lien du menu et le panneau (accroché sous l'en-tête), pour que la souris puisse descendre sans que le menu se ferme */ @media (min-width: 921px) { :is(.menus-5, .menus-6) .sous-menu::before { top: -30px !important; height: 30px !important; } } @media (min-width: 921px) { :is(.menus-5, .menus-6) .sous-menu, :is(.menus-5, .menus-6) .sous-menu.mega { overflow: visible; } :is(.menus-5, .menus-6) :is(.sous-menu__vedette, .mega__carte, .sous-menu__bande) { border-radius: 0 0 17px 17px; } .largeur-ecran:is(.menus-5, .menus-6) :is(.sous-menu__vedette, .mega__carte, .sous-menu__bande) { border-radius: 0; } } .livrables__liste .livrables__num { display: grid; place-items: center; margin-top: 0; font-size: 0; } .degrade-halo .final .conteneur::before { width: 560px; height: 560px; right: max(-60px, calc(50% - 690px)); top: 40%; background: radial-gradient(circle, var(--c-orange) 0%, var(--c-orange) 42%, color-mix(in srgb, var(--c-orange) 60%, transparent) 54%, transparent 70%); } .degrade-halo .appel::after { width: 260px; height: 260px; right: -120px; top: -130px; } /* ===================================================================== CARTE SCHÉMATIQUE DE L'ÎLE-DE-FRANCE + ATOUTS EN ICÔNES ===================================================================== */ .prose .carte-idf { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: calc(var(--esp-paragraphe) * 1.4) 0; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E1E9E9; } .carte-idf svg { width: 100%; height: auto; display: block; overflow: visible; } .carte-idf__dep polygon, .carte-idf__dep path { stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; transition: fill .25s ease, transform .3s cubic-bezier(.22,1,.36,1); transform-box: fill-box; transform-origin: center; } .carte-idf__dep--grande polygon { fill: #CBD8D8; } .carte-idf__dep--petite polygon { fill: color-mix(in srgb, var(--c-orange) 45%, #fff); } .carte-idf__dep--paris path { fill: var(--c-orange); } .carte-idf__dep text { font-family: var(--f-titre); font-size: 15px; font-weight: 700; fill: #3E4A4A; text-anchor: middle; pointer-events: none; } .carte-idf__dep--petite text { font-size: 11px; fill: #fff; } .carte-idf__dep { cursor: default; } .carte-idf__dep--grande:hover polygon { fill: #B5C7C7; } .carte-idf__dep--petite:hover polygon { fill: color-mix(in srgb, var(--c-orange) 70%, #fff); } .carte-idf__dep:hover polygon { transform: scale(1.02); } .carte-idf__epingle circle { fill: #fff; stroke: var(--c-anthracite, #1E1C1B); stroke-width: 3; } .carte-idf__onde { fill: color-mix(in srgb, var(--c-orange) 30%, transparent) !important; stroke: none !important; transform-box: fill-box; transform-origin: center; animation: onde-carte 2.4s ease-out infinite; } @keyframes onde-carte { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } } .carte-idf__bulle rect { fill: var(--c-anthracite, #1E1C1B); } .carte-idf__bulle text { font-family: var(--f-titre); font-size: 14px; font-weight: 700; fill: #fff; } .carte-idf__bulle text.petit { font-family: var(--f-texte); font-size: 11px; font-weight: 500; fill: rgba(255,255,255,.75); } .carte-idf__trait { fill: none; stroke: var(--c-anthracite, #1E1C1B); stroke-width: 1.5; stroke-dasharray: 3 4; } .carte-idf figcaption { display: grid; gap: 14px; } .prose .carte-idf__titre { margin: 0; font-family: var(--f-titre); font-size: 22px; font-weight: 700; line-height: 1.2; text-align: left; } .prose .carte-idf ul { list-style: none; margin: 0; padding: 0; } .prose .carte-idf li { margin: 0; text-align: left; } .prose .carte-idf li::marker { content: none; } .carte-idf__legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--c-gris); } .carte-idf__legende li { display: flex; align-items: center; gap: 8px; } .pastille { width: 14px; height: 14px; border-radius: 4px; } .pastille--petite { background: color-mix(in srgb, var(--c-orange) 55%, #fff); box-shadow: inset 0 0 0 3px var(--c-orange); } .pastille--grande { background: #CBD8D8; } .carte-idf__deps { display: grid; gap: 6px; } .prose .carte-idf__deps li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; } .carte-idf__deps b { display: inline-grid; place-items: center; min-width: 32px; height: 24px; border-radius: 7px; background: #EEF3F3; font-family: var(--f-tech); font-size: 12px; color: var(--c-lien); } .carte-idf__deps li:first-child b { background: var(--c-orange); color: #fff; } .prose .atouts-zone { list-style: none; margin: var(--esp-paragraphe) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .prose .atouts-zone li { display: grid; gap: 4px; align-content: start; margin: 0; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid #E1E9E9; text-align: left; } .prose .atouts-zone li::marker { content: none; } .atouts-zone__ico { width: 42px; height: 42px; margin-bottom: 8px; } .atouts-zone__ico .ico { width: 22px; height: 22px; } .prose .atouts-zone strong { font-family: var(--f-titre); font-size: 15.5px; line-height: 1.25; } .prose .atouts-zone span:not(.atouts-zone__ico) { font-size: 13.5px; line-height: 1.4; color: var(--c-gris); } @media (max-width: 860px) { .prose .carte-idf { grid-template-columns: 1fr; } .prose .atouts-zone { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .carte-idf__onde { animation: none; } } /* carte : aplats épaissis (les départements se touchent), contours blancs fins par-dessus */ .carte-idf__dep polygon { stroke-width: 12 !important; } .carte-idf__dep--grande polygon { stroke: #CBD8D8 !important; } .carte-idf__dep--petite polygon { fill: color-mix(in srgb, var(--c-orange) 62%, #fff) !important; stroke: color-mix(in srgb, var(--c-orange) 62%, #fff) !important; } .carte-idf__dep--grande:hover polygon { stroke: #B5C7C7 !important; } .carte-idf__dep--petite:hover polygon { fill: color-mix(in srgb, var(--c-orange) 82%, #fff) !important; stroke: color-mix(in srgb, var(--c-orange) 82%, #fff) !important; } .carte-idf__dep--paris path { stroke: var(--c-orange) !important; stroke-width: 6 !important; } .carte-idf__contours polygon { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linejoin: round; pointer-events: none; } .carte-idf__numeros text { font-family: var(--f-titre); font-size: 16px; font-weight: 700; fill: #3E4A4A; text-anchor: middle; pointer-events: none; } .carte-idf__numeros .carte-idf__num--petite { font-size: 12px; fill: #fff; } .carte-idf__dep text { display: none; } .carte-idf__dep:hover polygon { transform: none; } .carte-idf__li--grande b { background: #EEF3F3 !important; color: #4F5C5C !important; } .carte-idf__li--petite b { background: color-mix(in srgb, var(--c-orange) 18%, #fff) !important; } .prose .atouts-zone { margin-bottom: calc(var(--esp-paragraphe) * 1.2); } /* ===================================================================== CARTES DE FRANCE ET D'AUVERGNE-RHÔNE-ALPES (même style que la carte d'Île-de-France) ===================================================================== */ .prose .carte-fr { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: center; margin: calc(var(--esp-paragraphe) * 1.4) 0; padding: 20px; border-radius: 22px; background: #fff; border: 1px solid #E1E9E9; } .carte-fr svg { width: 100%; height: auto; display: block; overflow: hidden; border-radius: 12px; } .carte-fr__pays { fill: #DCE6E6; stroke: #fff; stroke-width: calc(2.5px * var(--k)); stroke-linejoin: round; } .carte-fr__region { fill: color-mix(in srgb, var(--c-orange) 50%, #fff); stroke: #fff; stroke-width: calc(2px * var(--k)); stroke-linejoin: round; transition: fill .25s ease; } .carte-fr__region:hover { fill: color-mix(in srgb, var(--c-orange) 70%, #fff); } .carte-fr__ville text { font-family: var(--f-titre); font-weight: 700; fill: var(--c-texte); paint-order: stroke; stroke: rgba(255,255,255,.9); stroke-width: calc(3px * var(--k)); stroke-linejoin: round; } .carte-fr__ville--distance circle { fill: #fff; stroke: #5E6B6B; stroke-width: 1.5; stroke-dasharray: 2 2; } .carte-fr__ville--distance text { font-size: 11px; font-weight: 600; fill: #4F5C5C; } .carte-fr__ville--visite circle:not(.carte-fr__onde) { fill: #fff; stroke: var(--c-anthracite, #1E1C1B); } .carte-fr__ville--visite.est-forte circle:not(.carte-fr__onde) { fill: var(--c-orange); stroke: #fff; } .carte-fr__ville--visite text { font-size: 14px; } .carte-fr__onde { fill: color-mix(in srgb, var(--c-orange) 30%, transparent); transform-box: fill-box; transform-origin: center; animation: onde-carte 2.4s ease-out infinite; } .carte-fr__ville--visite:not(.est-forte) .carte-fr__onde { display: none; } .carte-fr figcaption { display: grid; gap: 14px; } .prose .carte-fr__titre { margin: 0; font-family: var(--f-titre); font-size: 22px; font-weight: 700; line-height: 1.2; text-align: left; } .prose .carte-fr__texte { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-gris); text-align: left; } .prose .carte-fr ul { list-style: none; margin: 0; padding: 0; } .prose .carte-fr li { margin: 0; text-align: left; } .prose .carte-fr li::marker { content: none; } .carte-fr__legende { display: grid; gap: 8px; font-size: 13.5px; color: var(--c-gris); } .carte-fr__legende li { display: flex; align-items: center; gap: 8px; } .pastille--distance { background: #fff; border: 1.5px dashed #5E6B6B; border-radius: 50%; } .prose .carte-fr .carte-idf__deps li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; } @media (max-width: 860px) { .prose .carte-fr { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .carte-fr__onde { animation: none; } } .prose .carte-fr .carte-fr__ville-li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; } .carte-fr__point { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2.5px solid var(--c-anthracite, #1E1C1B); flex: none; } .carte-fr__ville-li.est-forte .carte-fr__point { background: var(--c-orange); border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-orange) 30%, transparent); } .carte-fr--ara .carte-fr__ville text { stroke-width: 2px; } .prose .carte-fr--ara .carte-idf__deps { gap: 9px; } .pastille { flex: none; } /* ===================================================================== PARTAGE (articles, outils, guides) : petits boutons ronds à icônes fines ===================================================================== */ .partage { display: flex; align-items: center; gap: 12px; margin-top: 20px; } .partage__titre { font-size: 13px; font-weight: 600; color: var(--c-gris); } .partage ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; } .partage li { margin: 0; } .partage li::marker { content: none; } .partage__btn { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: #fff; border: 1px solid #D3DEDE; color: var(--c-texte); cursor: pointer; text-decoration: none; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s cubic-bezier(.22,1,.36,1); } .partage__btn .ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .partage__btn:hover { transform: translateY(-2px); color: #fff; border-color: transparent; } .partage__btn--whatsapp:hover { background: #25D366; } .partage__btn--linkedin:hover { background: #0A66C2; } .partage__btn--facebook:hover { background: #1877F2; } .partage__btn--email:hover, .partage__btn--copier:hover, [data-partage-natif]:hover { background: var(--c-action); } .partage__btn:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; } .partage__btn.est-copie { background: #2F9E5B; color: #fff; border-color: transparent; } .partage__ok { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; white-space: nowrap; padding: 4px 8px; border-radius: 6px; background: var(--c-anthracite, #1E1C1B); color: #fff; font-size: 12px; font-weight: 600; pointer-events: none; } .partage__ok:empty { display: none; } /* fin d'article : un encadré avec phrase d'invitation */ .prose .partage-fin { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-top: calc(var(--esp-paragraphe) * 1.6); padding: 18px 22px; border-radius: 16px; background: #fff; border: 1px solid #E1E9E9; } .prose .partage-fin p { margin: 0; flex: 1 1 260px; font-weight: 600; text-align: left; } .partage--grand { margin: 0; } .partage--grand .partage__btn { width: 42px; height: 42px; } .partage--grand .partage__titre { display: none; } .mise-d .bandeau .partage { justify-content: flex-start; } /* dans le texte d'un article, les boutons de partage ne prennent pas le style des liens */ .prose a.partage__btn { border-radius: 50%; text-decoration: none; background-image: none; background-color: #fff; color: var(--c-texte); padding: 0; } .prose .partage ul { align-items: center; padding: 0; margin: 0; } .prose .partage li + li { margin: 0; } .prose a.partage__btn--whatsapp:hover { background-color: #25D366; color: #fff; } .prose a.partage__btn--linkedin:hover { background-color: #0A66C2; color: #fff; } .prose a.partage__btn--facebook:hover { background-color: #1877F2; color: #fff; } .prose a.partage__btn--email:hover { background-color: var(--c-action); color: #fff; } .prose .partage a.partage__btn, .partage a.partage__btn { border-radius: 50% !important; } /* ===================================================================== PARTAGE : sobre et monochrome (plus de couleurs de réseaux), et une barre verticale collée à gauche de l'article sur grand écran (style Ohio) ===================================================================== */ .partage__btn, .prose a.partage__btn { background: transparent !important; border-color: transparent !important; color: #4F5C5C !important; } .partage__btn:hover, .prose a.partage__btn:hover, .prose a.partage__btn--whatsapp:hover, .prose a.partage__btn--linkedin:hover, .prose a.partage__btn--facebook:hover, .prose a.partage__btn--email:hover, .partage__btn--whatsapp:hover, .partage__btn--linkedin:hover, .partage__btn--facebook:hover, .partage__btn--email:hover, .partage__btn--copier:hover { background: transparent !important; color: var(--c-lien) !important; transform: translateY(-1px); } .partage__btn.est-copie { background: transparent !important; color: #2F9E5B !important; } /* rangée horizontale : une pilule claire qui regroupe les boutons */ .partage:not(.partage--vertical) ul { padding: 3px 6px; border-radius: 999px; background: #fff; border: 1px solid #E1E9E9; } .partage__btn { width: 34px; height: 34px; } /* barre verticale */ .prose[data-lecture] { position: relative; } .partage-rail { display: none; } @media (min-width: 1180px) { .partage-rail { display: block; position: absolute; top: 0; bottom: 0; left: -76px; width: 52px; } .partage--vertical { position: sticky; top: calc(var(--hauteur-entete) + 96px); flex-direction: column; gap: 10px; margin: 0; } .partage--vertical .partage__titre { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #8A9696; } .partage--vertical ul { flex-direction: column; gap: 2px; padding: 6px 0; border-radius: 999px; background: #fff; border: 1px solid #E1E9E9; } .partage--vertical .partage__ok { bottom: auto; left: calc(100% + 8px); top: 50%; translate: 0 -50%; } /* sur grand écran, la rangée sous le titre laisse la place à la barre verticale */ .page-article .bandeau .partage { display: none; } } .partage--vertical .partage__btn .ico { width: 18px; height: 18px; } /* Partage : icônes plus grandes, couleurs officielles des réseaux au survol */ .partage__btn { width: 40px !important; height: 40px !important; } .partage__btn .ico, .partage--vertical .partage__btn .ico { width: 21px !important; height: 21px !important; stroke-width: 1.6; } .partage--grand .partage__btn { width: 44px !important; height: 44px !important; } .partage__btn:hover, .prose a.partage__btn:hover { color: #fff !important; transform: translateY(-1px) scale(1.05); } .partage .partage__btn.partage__btn--whatsapp:hover { background: #25D366 !important; } .partage .partage__btn.partage__btn--linkedin:hover { background: #0A66C2 !important; } .partage .partage__btn.partage__btn--x:hover { background: #000000 !important; } .partage .partage__btn.partage__btn--pinterest:hover { background: #E60023 !important; } .partage .partage__btn.partage__btn--facebook:hover { background: #1877F2 !important; } .partage .partage__btn.partage__btn--email:hover, .partage .partage__btn--copier:hover, .partage [data-partage-natif]:hover { background: var(--c-action) !important; } .partage .partage__btn.est-copie { background: #2F9E5B !important; color: #fff !important; } .partage--vertical ul { padding: 6px 4px !important; gap: 4px !important; } /* barre verticale plus fine : boutons serrés, icônes inchangées (21 px) */ @media (min-width: 1180px) { .partage--vertical ul { padding: 4px 0 !important; gap: 0 !important; width: 36px; align-items: center; } .partage--vertical .partage__btn { width: 30px !important; height: 30px !important; } .partage-rail { left: -64px; width: 40px; } } /* Barre de partage verticale : les ronds de survol s'emboîtent exactement dans la pilule, avec 4 px de marge tout autour (pilule = bouton + 2 × 4 px + filet) */ @media (min-width: 1180px) { .partage--vertical ul { width: auto !important; padding: 4px !important; gap: 2px !important; border-radius: 999px !important; } .partage--vertical .partage__btn { width: 34px !important; height: 34px !important; } .partage--vertical .partage__btn:hover { transform: none !important; } .partage-rail { left: -66px; width: 44px; } } /* Menu en verre : quand un sous-menu est ouvert, l'en-tête perd son ombre et son filet (le flou du panneau les faisait ressortir en trait sombre dans Firefox) */ .entete:has(.nav__item--deroulant.est-ouvert) { box-shadow: none !important; border-bottom-color: transparent !important; } /* Deux rendus vidéo issus des originaux : texte foncé ou blanc selon le thème. */ .logo--anime { display: inline-flex; align-items: center; } .logo-anime { display: block; flex: none; height: 86px; width: auto; max-width: none; aspect-ratio: 480 / 168; margin: 0 0 0 -8px; } /* Le lien parent reçoit les clics ; la vidéo décorative n'a pas de commandes. */ video.logo-anime { pointer-events: none; user-select: none; } .logo--anime + .logo--css { display: none; } .logo--anime.logo--nuit { display: none; } [data-theme="nuit"] .logo--anime.logo--jour { display: none; } [data-theme="nuit"] .logo--anime.logo--nuit { display: inline-flex; } .pied .logo-anime { height: 80px; } /* écrans moyens : un logo un peu plus petit, pour que le bouton « Chiffrer mon projet » tienne */ @media (min-width: 641px) and (max-width: 1120px) { .entete .logo-anime { height: 62px; } } @media (min-width: 641px) and (max-width: 1070px) { .entete .logo-anime { height: 52px; } } @media (min-width: 641px) and (max-width: 960px) { .entete .logo-anime { height: 46px; } } @media (max-width: 640px) { .entete .logo-anime { height: 50px; } } /* ===================================================================== SOUS-MENUS « site-entete » : le panneau prolonge exactement l'en-tête (même sauge-gris), une ombre douce le détache de la page ; bandeau un ton plus soutenu ===================================================================== */ @media (min-width: 921px) { :is(.menus-5, .menus-6).teinte-site-entete { --m-fond: #DCE6E6; --m-texte: var(--c-texte); --m-doux: #56636363; --m-doux: #566363; --m-trait: #C9D6D6; --m-survol: var(--c-lien); --m-bande: #CFDCDC; --m-bande-texte: var(--c-texte); --m-bande-doux: #4F5C5C; --m-bande-accent: var(--c-lien); } .teinte-site-entete:is(.menus-5, .menus-6) .sous-menu, .teinte-site-entete:is(.menus-5, .menus-6) .sous-menu.mega { border: 0 !important; border-top: 1px solid #C9D6D6 !important; box-shadow: 0 30px 50px -24px rgba(30,36,36,.35) !important; } .teinte-site-entete:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien) { border-radius: 10px; } .teinte-site-entete:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover { background: rgba(255,255,255,.55) !important; } .teinte-site-entete:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien) { padding-inline: 10px !important; margin-inline: -10px; } } /* ===================================================================== DÉGRADÉ « DOUX » : plus de grand rond orange ; un lavis pêche très léger qui part d'un coin, dans la carte elle-même ===================================================================== */ .degrade-doux .appel, .degrade-doux .prose .appel-ligne, .degrade-doux .encart { background: radial-gradient(120% 140% at 100% 0%, #FCE6DC 0%, rgba(252,230,220,0) 55%), #FFFFFF !important; border: 1px solid #E8DED6 !important; box-shadow: none !important; color: var(--c-texte); } .degrade-doux .appel::before { display: none; } .degrade-doux .appel .appel__titre { color: var(--c-texte); } .degrade-doux .appel .appel__texte, .degrade-doux .appel .appel__tel { color: #5E5550; } .degrade-doux .final::after { display: none; } /* ===================================================================== SOUS-MENUS : PALETTES « HARMONIE » (panneau différent de l'en-tête, bandeau contrasté) ===================================================================== */ @media (min-width: 921px) { /* Blanc + bandeau anthracite chaud */ :is(.menus-5, .menus-6).teinte-blanc-anthracite { --m-fond: #FFFFFF; --m-texte: var(--c-texte); --m-doux: #66706F; --m-trait: #E3EAEA; --m-survol: var(--c-lien); --m-bande: #1E1C1B; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.7); --m-bande-accent: var(--c-orange-clair); } /* Vert profond (le sauge, très foncé) + bandeau sauge clair */ :is(.menus-5, .menus-6).teinte-vert-profond { --m-fond: #23383A; --m-texte: #FFFFFF; --m-doux: rgba(255,255,255,.62); --m-trait: rgba(255,255,255,.12); --m-survol: #FFB49C; --m-bande: #DCE6E6; --m-bande-texte: var(--c-texte); --m-bande-doux: #4F5C5C; --m-bande-accent: var(--c-lien); } /* Crème chaud + bandeau sauge */ :is(.menus-5, .menus-6).teinte-creme-sauge { --m-fond: #FAF7F2; --m-texte: var(--c-texte); --m-doux: #6E675F; --m-trait: #ECE5DA; --m-survol: var(--c-lien); --m-bande: #CBD8D8; --m-bande-texte: var(--c-texte); --m-bande-doux: #4F5C5C; --m-bande-accent: var(--c-lien); } :is(.teinte-blanc-anthracite, .teinte-vert-profond, .teinte-creme-sauge):is(.menus-5, .menus-6) .sous-menu { border: 0 !important; box-shadow: 0 30px 50px -24px rgba(30,36,36,.35) !important; } :is(.teinte-blanc-anthracite, .teinte-creme-sauge):is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover { background: color-mix(in srgb, var(--c-orange) 8%, transparent) !important; } .teinte-vert-profond:is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover { background: rgba(255,255,255,.06) !important; } } /* Sauge plus sombre (le fond du site, un ton plus foncé) + bandeau noir ou orange du logo */ @media (min-width: 921px) { :is(.menus-5, .menus-6):is(.teinte-sauge-noir, .teinte-sauge-orange) { --m-fond: #C3D2D2; --m-texte: #1A2020; --m-doux: #4A5757; --m-trait: #AFC1C1; --m-survol: #A0361C; } :is(.menus-5, .menus-6).teinte-sauge-noir { --m-bande: #1E1C1B; --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.7); --m-bande-accent: var(--c-orange-clair); } :is(.menus-5, .menus-6).teinte-sauge-orange { --m-bande: var(--c-orange); --m-bande-texte: #fff; --m-bande-doux: rgba(255,255,255,.9); --m-bande-accent: #fff; } .teinte-sauge-orange:is(.menus-5, .menus-6) .mega__carte .btn { background: #fff; color: #A0361C; box-shadow: none; } :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) .sous-menu { border: 0 !important; box-shadow: 0 30px 50px -24px rgba(30,36,36,.4) !important; } :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover { background: rgba(255,255,255,.35) !important; } :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) .mega__titre { color: #3E4A4A; } } /* Fond opaque : la lisibilité du sous-menu ne dépend pas de la photo derrière. */ @media (min-width: 921px) { :is(.menus-5, .menus-6):is(.teinte-sauge-noir, .teinte-sauge-orange) { --m-fond: #C3D2D2; } :is(.teinte-sauge-noir, .teinte-sauge-orange) .entete { -webkit-backdrop-filter: none; backdrop-filter: none; } :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) :is(.sous-menu, .sous-menu.mega) { -webkit-backdrop-filter: none; backdrop-filter: none; } .teinte-sauge-noir:is(.menus-5, .menus-6) { --m-bande: rgba(30, 28, 27, .92); } .teinte-sauge-orange:is(.menus-5, .menus-6) { --m-bande: color-mix(in srgb, var(--c-orange) 92%, transparent); } } /* Mode nuit : même stabilité, dans la teinte sombre du thème. */ @media (min-width: 921px) { [data-theme="nuit"] :is(.menus-5, .menus-6):is(.teinte-sauge-noir, .teinte-sauge-orange) { --m-fond: #1C2626; --m-texte: #E7EDED; --m-doux: #A9B6B6; --m-trait: rgba(255,255,255,.1); --m-survol: #FFB49C; } [data-theme="nuit"] :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) :is(.sous-menu__lien, .mega__lien):hover { background: rgba(255,255,255,.06) !important; } [data-theme="nuit"] :is(.teinte-sauge-noir, .teinte-sauge-orange):is(.menus-5, .menus-6) .mega__titre { color: #A9B6B6; } } /* Bandeaux des trois sous-menus : une seule présentation, un seul bouton orange (même apparence que « Lancer le simulateur ») */ @media (min-width: 921px) { :is(.menus-5, .menus-6) .menu-action { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--c-action); color: #fff !important; font-style: normal; font-family: var(--f-titre); font-size: 14px; font-weight: 700; box-shadow: 0 8px 22px -12px rgba(178, 68, 42, .9); transition: background-color .2s ease; } :is(.menus-5, .menus-6) .menu-action .ico { width: 16px; height: 16px; color: #fff; transition: transform .25s cubic-bezier(.22,1,.36,1); } :is(.menus-5, .menus-6) :is(.sous-menu__bande, .sous-menu__vedette):hover .menu-action { background: var(--c-action-survol); } :is(.menus-5, .menus-6) :is(.sous-menu__bande, .sous-menu__vedette):hover .menu-action .ico:last-child { transform: translateX(3px); } :is(.menus-5, .menus-6) .sous-menu__vedette > .ico { display: none; } /* « Être rappelé » du méga-menu : même blanc que les textes des bandeaux */ :is(.menus-5, .menus-6) .mega__carte .mega__rappel { color: #fff; } } .sous-menu__titre { display: none; } @media (min-width: 921px) { :is(.menus-5, .menus-6) .sous-menu__titre { display: block; margin: 0 0 10px; padding: 0; border: 0; color: var(--m-doux); } :is(.menus-5, .menus-6) .sous-menu__titre { order: 0; } } /* Menus Outils et Guides : la même apparition que « Nos études ». Le titre d'abord, puis les liens glissent du bas vers le haut, colonne par colonne (30 ms entre deux lignes, 0,24 s entre deux colonnes) ; le bandeau d'appel arrive à 0,25 s, comme la carte du méga-menu. */ .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) .sous-menu__vedette { animation: mega-element .3s cubic-bezier(.2,.8,.2,1) both !important; animation-delay: .25s !important; } .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) .sous-menu__titre { animation: mega-element .15s cubic-bezier(.2,.8,.2,1) both; animation-delay: .02s; } .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) .sous-menu__lien { animation: mega-element .15s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.04s + var(--g, 0) * .24s + (var(--i, 0) + 1) * .03s); } .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) .sous-menu__bande { animation: mega-element .3s cubic-bezier(.2,.8,.2,1) both; animation-delay: .25s; } @media (prefers-reduced-motion: reduce) { .nav__item--deroulant.est-ouvert > .sous-menu:not(.mega) :is(.sous-menu__vedette, .sous-menu__titre, .sous-menu__lien, .sous-menu__bande) { animation: none !important; } } /* ===================================================================== FENÊTRE « LE PRIX DE VOTRE ÉTUDE » (articles), dans l'esprit de l'accueil : une fiche blanche quadrillée, scotchée, avec le prix sur un post-it écrit à la main. Elle monte en douceur, le post-it se pose ensuite ; une croix la masque pour la visite. ===================================================================== */ @media (min-width: 961px) { .mise-d .flottant-prix { display: block; right: 32px; bottom: 30px; width: 372px; padding: 0; gap: 0; border-radius: 10px; background-color: var(--c-blanc); background-image: linear-gradient(rgba(58,100,108,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(58,100,108,.08) 1px, transparent 1px); background-size: 18px 18px; background-position: -1px -1px; color: var(--c-texte); border: 1px solid rgba(30,36,36,.06); box-shadow: 0 2px 4px rgba(30,36,36,.06), 0 30px 56px -24px rgba(30,36,36,.5); transform: translateY(28px) rotate(.6deg); } .mise-d .flottant-prix.est-visible { transform: none; } .mise-d .flottant-prix:hover { background-color: var(--c-blanc); } .flottant-prix__lien { position: relative; display: flex; align-items: center; gap: 18px; padding: 20px 22px 18px 18px; color: inherit; text-decoration: none; border-radius: inherit; } .flottant-prix__lien:focus-visible { outline: 3px solid var(--c-orange); outline-offset: 3px; } .flottant-prix__scotch { position: absolute; top: -11px; left: 50%; width: 86px; height: 22px; margin-left: -43px; background: rgba(247,220,111,.8); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0,0,0,.08); } /* le post-it : écrit à la main, légèrement de travers */ .flottant-prix__postit { flex: none; display: grid; place-content: center; width: 112px; min-height: 92px; padding: 10px 8px 12px; text-align: center; background: var(--c-postit); color: #3B3317; font-family: var(--f-main); box-shadow: 0 3px 5px rgba(0,0,0,.08), 0 16px 22px -14px rgba(60,50,10,.6); } .flottant-prix__postit span { font-size: 15px; line-height: 1.1; } .flottant-prix__postit strong { font-size: 25px; line-height: 1.1; font-weight: 700; color: var(--c-brique); white-space: nowrap; } .flottant-prix__texte { display: grid; gap: 3px; min-width: 0; line-height: 1.3; } .flottant-prix__texte strong { font-family: var(--f-titre); font-size: 18px; font-weight: 700; letter-spacing: -.01em; color: var(--c-texte); } .flottant-prix__texte small { font-size: 13px; color: var(--c-gris); } .flottant-prix__texte em { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 14px 8px 16px; border-radius: 999px; background: var(--c-action); color: #fff; font-style: normal; font-size: 14px; font-weight: 700; box-shadow: 0 8px 16px -8px color-mix(in srgb, var(--c-action) 80%, transparent); transition: background-color .25s ease; } .flottant-prix__texte em .ico { width: 15px; height: 15px; transition: transform .3s cubic-bezier(.22,1,.36,1); } .flottant-prix__lien:hover em { background: var(--c-action-survol); } .flottant-prix__lien:hover em .ico { transform: translateX(3px); } /* entrée : la fiche monte, puis le post-it se pose ; au survol il se soulève un peu */ .mise-d .flottant-prix .flottant-prix__postit { opacity: 0; transform: rotate(-14deg) translate(-6px, -14px) scale(1.06); transition: opacity .3s ease .25s, transform .6s cubic-bezier(.19,1,.22,1) .25s; } .mise-d .flottant-prix.est-visible .flottant-prix__postit { opacity: 1; transform: rotate(-4deg); } .mise-d .flottant-prix.est-visible .flottant-prix__lien:hover .flottant-prix__postit { transform: rotate(-7deg) translateY(-3px); transition-delay: 0s; } /* la croix */ .flottant-prix__fermer { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-gris); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .flottant-prix__fermer .ico { width: 14px; height: 14px; } .flottant-prix__fermer:hover { background: rgba(30,36,36,.07); color: var(--c-texte); } .flottant-prix__fermer:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; } /* mode nuit : la fiche devient ardoise, le post-it reste jaune */ [data-theme="nuit"] .mise-d .flottant-prix, [data-theme="nuit"] .mise-d .flottant-prix:hover { background-color: #1C2222; border-color: rgba(255,255,255,.08); background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); box-shadow: 0 2px 4px rgba(0,0,0,.3), 0 30px 56px -24px rgba(0,0,0,.8); } [data-theme="nuit"] .flottant-prix__fermer:hover { background: rgba(255,255,255,.08); } } @media (prefers-reduced-motion: reduce) { .mise-d .flottant-prix .flottant-prix__postit, .mise-d .flottant-prix.est-visible .flottant-prix__postit { opacity: 1; transform: rotate(-4deg); transition: none; } } /* fenêtre du prix : le scotch tient le post-it, le prix reste dans le post-it */ @media (min-width: 961px) { .flottant-prix__postit { position: relative; width: 118px; min-height: 96px; padding: 16px 8px 12px; } .flottant-prix__scotch { top: -9px; width: 58px; height: 18px; margin-left: -29px; transform: rotate(5deg); background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.1); } .flottant-prix__postit span:not(.flottant-prix__scotch) { font-size: 14.5px; } .flottant-prix__postit strong { font-size: 31px; margin-top: 2px; } .flottant-prix__lien { padding: 22px 30px 20px 20px; } .flottant-prix__texte strong { padding-right: 10px; } } @media (min-width: 961px) { .mise-d .flottant-prix { width: 408px; } .flottant-prix__lien { gap: 20px; } .flottant-prix__scotch { width: 62px; height: 20px; margin-left: -31px; background: rgba(255,255,255,.72); box-shadow: 0 1px 3px rgba(60,50,10,.18); } } /* Formulaire de contact : le bloc « Le chantier » */ .fc-chantier { display: grid; gap: 14px; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--c-trait-clair); border-radius: 16px; background: color-mix(in srgb, var(--c-sauge-clair) 60%, transparent); min-width: 0; } .fc-chantier legend { display: flex; align-items: center; gap: 8px; padding: 0 6px; margin-left: -6px; font-weight: 700; color: var(--c-texte); } .fc-chantier legend .ico { width: 18px; height: 18px; color: var(--c-orange); } .fc-chantier legend span { font-weight: 400; color: var(--c-gris-sombre); } .fc-chantier > p { margin: -6px 0 0; font-size: 14px; line-height: 1.5; color: var(--c-gris-sombre); } /* Être rappelé : le jour, puis le moment (masqué pour « Dès que possible ») */ .fc__note { margin: 8px 0 0; font-size: 13px; color: var(--c-gris-sombre); } .fc:has(input[name="jour_rappel"][value="vite"]:checked) .fc__moment { display: none; } .fc__heure { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--c-gris-sombre); } .fc__heure select { min-height: 42px; padding: 0 38px 0 14px; border: 0; border-bottom: 1.5px solid var(--c-trait-clair); border-radius: 999px; background: var(--c-sauge-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%234A5656' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px; font: inherit; font-weight: 600; color: var(--c-texte); cursor: pointer; appearance: none; -webkit-appearance: none; } .fc__heure select:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; } /* une heure précise choisie : les plages s'effacent un peu */ .fc__moment:has(select option:checked:not([value=""])) .fc__options { opacity: .45; } .fc-option.est-passe { opacity: .4; cursor: not-allowed; } .fc-option.est-passe input { cursor: not-allowed; } /* ===================================================================== EN-TÊTE : le téléphone et l'e-mail alternent (toutes les 12 s, pause au survol) Effet « machine à écrire » : le texte en gras s'efface lettre par lettre, l'icône pivote d'un quart de tour, puis le nouveau texte s'écrit lettre par lettre avec un curseur qui clignote. Les deux lignes occupent la même case : la largeur ne bouge pas pendant la frappe. Dans le menu mobile, les deux liens sont affichés. ===================================================================== */ .nav__contact { display: grid; } .nav__tel--roule { position: relative; overflow: clip; } .nav__tel--roule::after { content: ''; position: absolute; pointer-events: none; left: 0; right: 0; top: 1px; bottom: 1px; border-left: 2px solid var(--c-orange); opacity: 0; transform: translateX(0); clip-path: inset(0); box-shadow: -7px 0 12px -8px var(--c-orange); } .nav__tel--roule.est-balayage::after { animation: contact-balayage .64s cubic-bezier(.22,.6,.3,1) both; } @keyframes contact-balayage { 0% { opacity: 0; clip-path: inset(0 100% 0 0); } 15% { opacity: .8; } 85% { opacity: .5; } 100% { opacity: 0; clip-path: inset(0); transform: translateX(100%); } } .nav__tel--mail .nav__tel-texte strong, .nav__ligne--mail strong { font-size: 15.5px; letter-spacing: 0; } .nav__face { display: grid; place-items: center; } .nav__face--mail, .nav__ligne--mail { display: none; } @media (min-width: 921px) { .nav__tel--mail { display: none; } .nav__tel--roule .nav__tel-ico { position: relative; overflow: hidden; } .nav__tel--roule .nav__face { position: absolute; inset: 0; transition: transform .7s cubic-bezier(.77,0,.18,1), opacity .45s ease; backface-visibility: hidden; } .nav__tel--roule .nav__face--mail { display: grid; opacity: 0; transform: rotate(90deg) scale(.4); } .nav__tel--roule.est-mail .nav__face:not(.nav__face--mail) { opacity: 0; transform: rotate(-90deg) scale(.4); } .nav__tel--roule.est-mail .nav__face--mail { opacity: 1; transform: none; } /* les deux lignes dans la même case (largeur de la plus longue) ; seule la ligne active est visible */ .nav__tel--roule .nav__tel-texte { display: block; } .nav__roule { display: grid; } .nav__ligne { display: grid; grid-area: 1 / 1; line-height: 1.15; } .nav__ligne--mail { display: grid; } .nav__ligne:not(.est-visible) { visibility: hidden; } html[data-contact-initial="mail"] .nav__ligne:not(.nav__ligne--mail) { visibility: hidden; } html[data-contact-initial="mail"] .nav__ligne--mail { visibility: visible; } html[data-contact-initial="mail"] .nav__tel--roule .nav__face:not(.nav__face--mail) { opacity: 0; transform: rotate(-90deg) scale(.4); } html[data-contact-initial="mail"] .nav__tel--roule .nav__face--mail { opacity: 1; transform: none; } .nav__ligne small { transition: opacity .4s ease; } .nav__ligne.est-arrivee small { opacity: 0; } /* le curseur de la machine à écrire */ .nav__ligne .frappe-reste { visibility: hidden; } .nav__ligne .frappe { position: relative; } .nav__ligne strong.est-frappe .frappe::after { content: ""; position: absolute; right: -3px; top: .08em; width: 2px; height: 1em; background: var(--c-orange); border-radius: 1px; animation: curseur-frappe .8s steps(1) infinite; } @keyframes curseur-frappe { 50% { opacity: 0; } } /* le petit tintement du téléphone au survol, seulement quand c'est le téléphone */ .nav__tel--roule.est-mail:hover .nav__tel-ico .ico { animation: none; } } @media (max-width: 1000px) and (min-width: 921px) { .nav__contact { display: none; } } @media (prefers-reduced-motion: reduce) { .nav__tel--roule::after { display: none; } } @media (max-width: 1340px) and (min-width: 921px) { .nav__contact .nav__tel-texte { display: none !important; } } @media (max-width: 920px) { .nav__contact { gap: 16px; margin-top: 28px; } .nav__contact > .nav__tel { margin-top: 0; } .nav__tel--roule .nav__tel-texte { display: grid; } .nav__ligne { display: grid; line-height: 1.15; } .nav__ligne.nav__ligne--mail, .nav__face.nav__face--mail { display: none; } .nav__ligne small { font-size: 13px; } .nav__ligne strong { font-size: 22px; color: var(--c-texte-sombre); } .nav__tel--mail .nav__tel-texte strong { font-size: 19px; } } @media (prefers-reduced-motion: reduce) { .nav__tel--roule .nav__face, .nav__roule { transition: opacity .2s ease; } } /* Pilule de partage horizontale : 4 px de marge égale tout autour des ronds (comme la barre verticale), et le rond orange du survol reste dans la pilule (couleur seulement, ni agrandi ni décalé) */ .partage:not(.partage--vertical) ul, .prose .partage:not(.partage--vertical) ul { padding: 4px !important; gap: 4px !important; align-items: center; } .partage:not(.partage--vertical) .partage__btn:hover, .prose .partage:not(.partage--vertical) a.partage__btn:hover { transform: none !important; } /* Textes « machine à écrire » : la partie pas encore tapée garde sa place, un curseur orange clignote */ [data-frappe].frappe-attente { color: transparent; } [data-frappe] .frappe-reste { color: transparent; } /* le curseur : un repère sans largeur placé juste après la dernière lettre tapée (suit les retours à la ligne) */ [data-frappe] .frappe-curseur { position: relative; display: inline-block; width: 0; height: 1em; vertical-align: -.12em; } [data-frappe] .frappe-curseur::after { content: ""; position: absolute; left: 1px; top: 0; width: 2px; height: 1.08em; background: var(--c-orange); border-radius: 1px; animation: curseur-frappe .8s steps(1) infinite; } @keyframes curseur-frappe { 50% { opacity: 0; } } /* Parcours de lecture continu, y compris pour les liens sur plusieurs lignes. */ .pied a.lien-trace { background: none; padding-bottom: 0; } .pied a.lien-trace::after { content: none; } .lien-trace__ligne { display: inline-block; position: relative; white-space: pre; line-height: 24px; } .lien-trace__ligne::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + var(--trait-decalage, 0px)); height: var(--trait-hauteur, 2px); border: 0; pointer-events: none; background: linear-gradient(currentColor, currentColor) right center / 0% 100% no-repeat; transition: background-size .15s linear; transition-delay: calc(var(--ligne) * .15s); } .lien-trace:is(:hover, :focus-visible) .lien-trace__ligne::after { background-size: 100% 100%; background-position: left center; } @media (prefers-reduced-motion: reduce) { .lien-trace__ligne::after { transition: none; } } /* ===================================================================== STYLE « PANORAMA » Titre et présentation sur une ligne ; dessous, une feuille pleine largeur : croquis à gauche, post-it du prix, et tous les réglages en une barre. ===================================================================== */ .accueil-panorama__tete { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: end; } .accueil-panorama .accueil-mix__chapo { margin-top: 0; } .atouts-standard--ligne { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 18px 0 0; } .feuille--panorama { margin-top: clamp(28px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px 32px; align-items: center; padding: 22px 28px 26px; } .feuille--panorama .croquis { grid-row: span 1; } .feuille--panorama .croquis svg { max-height: 360px; } /* Réglages en colonne à droite du croquis */ .mini-sim--barre { align-content: center; gap: 18px; } @media (max-width: 960px) { .accueil-panorama__tete, .feuille--panorama { grid-template-columns: 1fr; } .feuille--panorama .postit { right: -8px; } } /* Haut de page resserré : le ruban des prestations apparaît dès l'arrivée, sans défiler */ .accueil-panorama { padding-top: calc(var(--hauteur-entete) + clamp(40px, 4.4vw, 64px)); padding-bottom: clamp(48px, 5vw, 72px); } .accueil-panorama .feuille--panorama { margin-top: clamp(24px, 2.6vw, 30px); padding-block: 16px 20px; } .accueil-panorama .feuille--panorama .croquis svg { max-height: 320px; } /* Mots-clés du titre principal, en petit au-dessus de la promesse */ .accueil-cle { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font-family: var(--f-tech); font-size: 15.5px; font-weight: 600; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; color: var(--c-lien); } .accueil-cle::before { content: ""; flex: none; width: 26px; height: 2px; border-radius: 1px; background: var(--c-orange); } /* Haut de l'accueil, finitions : zone remontée, titre et mots-clés de même largeur, introduction plus discrète, photo de l'ingénieur plus grande */ .accueil-panorama { padding-top: calc(var(--hauteur-entete) + clamp(24px, 3vw, 44px)); } .accueil-panorama h1 { width: fit-content; } .accueil-panorama .accueil-cle { display: block; width: 0; min-width: 100%; white-space: nowrap; letter-spacing: .08em; margin-bottom: 18px; } .accueil-panorama .accueil-cle::before { display: none; } .accueil-panorama .accueil-mix__chapo { font-size: 16.5px !important; line-height: 1.6 !important; color: var(--c-gris); } .accueil-panorama .atouts-standard--ligne { margin-top: 18px !important; font-size: 15px; } .accueil-panorama .contact-humain { margin-top: 22px; gap: 16px; } .accueil-panorama .contact-humain__photo { width: 76px; } .accueil-panorama .contact-humain__photo.photo--vide > .ico { width: 26px; height: 26px; } /* les deux colonnes centrées l'une sur l'autre : plus de vide au-dessus du titre */ .accueil-panorama__tete { align-items: center; } /* sur téléphone, la ligne de mots-clés revient à la ligne au lieu de déborder */ @media (max-width: 600px) { .accueil-panorama .accueil-cle { width: auto; min-width: 0; white-space: normal; font-size: 12px !important; line-height: 1.6; margin-bottom: 12px; } } /* Une fin de page plus structurée ; la photographie reste une texture discrète. */ .pied { position: relative; isolation: isolate; overflow: hidden; padding-top: 52px; background: #B1C3C1; color: var(--c-texte); } .pied__fond { position: absolute; inset: 0 0 0 20%; width: 80%; height: 100%; object-fit: cover; object-position: right center; opacity: .10; filter: grayscale(1); pointer-events: none; z-index: -1; mask-image: linear-gradient(90deg, transparent, #000 50%); } .pied__tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-bottom: 38px; } .pied__tete .pied__marque { grid-column: auto; } .pied__logo { display: inline-block; text-decoration: none; } .pied a.pied__logo:is(:link, :visited, :hover, :focus-visible) { text-decoration: none; background-image: none; } .pied a.pied__logo::after { content: none; } .pied__tete .pied__marque p { max-width: 440px; margin: 14px 0 0; color: var(--c-texte); font-size: 14px; } .pied__invitation { justify-self: end; max-width: 510px; } .pied__invitation h2 { font-family: var(--f-titre); color: var(--c-texte); font-size: clamp(1.7rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.12; letter-spacing: -.025em; margin: 0 0 22px; } .pied__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .pied .pied__actions a.btn { color: #fff; background: var(--c-action); } .pied .pied__actions a.btn:hover { background: var(--c-action-survol); } .pied .pied__actions a.btn::after { content: none; } .pied a.pied__rappel { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 600; color: var(--c-texte); } .pied__rappel > .ico { width: 18px; height: 18px; color: var(--c-lien); } .pied__navigation { padding-top: 32px; border-top: 1px solid var(--c-trait-clair); } .pied__grille { grid-template-columns: 1.1fr .95fr 1.45fr 1.15fr; gap: 32px; align-items: start; } .pied__grille > div { min-width: 0; } .pied__titre { font-size: 17px; margin: 0 0 16px; } .pied__titre--zones { margin-top: 24px; font-size: 14px; } .pied__grille .liste-liens { display: grid; gap: 10px; columns: auto; font-size: 14px; } .pied__guides .liste-liens li { margin: 0; } .pied .liste-liens a, .pied__contact, .pied__contact a { color: var(--c-texte); } .pied .liste-liens a:hover, .pied__contact a:hover { color: var(--c-lien); } .pied .pied__liens--briques a { display: inline-block; position: relative; padding-left: 32px; line-height: 24px; text-decoration: none; transition: padding-left .3s cubic-bezier(.22,1,.36,1), color .2s ease; } .pied .pied__liens--briques a::after { content: none; } .pied .pied__liens--briques a::before { content: ''; position: absolute; left: 0; top: 9px; display: block; box-sizing: border-box; width: 10px; height: 6px; min-height: 6px; max-height: 6px; margin: 0; border: 0; border-radius: 1.5px; background: var(--c-orange); box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); transition: width .3s cubic-bezier(.22,1,.36,1); pointer-events: none; } .pied .pied__liens--briques a:is(:hover, :focus-visible, [aria-current="page"])::before { width: 40px; } .pied .pied__liens--briques a:is(:hover, :focus-visible, [aria-current="page"]) { padding-left: 52px; color: var(--c-lien); } @media (prefers-reduced-motion: reduce) { .pied .pied__liens--briques a, .pied .pied__liens--briques a::before { transition: none; } } .pied__contact { gap: 14px; font-size: 14px; } .pied__contact li { align-items: flex-start; gap: 10px; } .pied__contact .ico { width: 30px; height: 30px; padding: 6px; } .pied__contact a { overflow-wrap: anywhere; } .pied__contact span { padding-top: 4px; } .pied__bas { margin-top: 34px; padding-top: 22px; color: var(--c-texte); border-color: var(--c-trait-clair); font-size: 12px; } .pied a:focus-visible { outline: 2px solid var(--c-lien); outline-offset: 5px; border-radius: 3px; } [data-theme="nuit"] .pied__fond { opacity: .08; } [data-theme="nuit"] .pied { background: #111B18; } .interventions { display: grid; grid-template-columns: minmax(90px, .9fr) minmax(0, 1.1fr); align-items: center; gap: 12px; } .interventions__carte { display: block; width: 100%; max-width: 150px; overflow: visible; } .interventions__contour { fill: rgba(255,255,255,.20); stroke: #617D74; stroke-width: 1.3; stroke-linejoin: round; } .interventions__repere { fill: var(--c-action); stroke: #F6F2E8; stroke-width: 1.4; } .interventions__onde { fill: none; stroke: var(--c-action); stroke-width: 1.5; opacity: 0; transform-origin: 0 0; animation: onde-intervention 3s cubic-bezier(.16,1,.3,1) infinite; } .interventions__onde--deux { animation-delay: 1.5s; } .interventions__point--lyon .interventions__onde { animation-delay: .7s; } .interventions__point--lyon .interventions__onde--deux { animation-delay: 2.2s; } .pied__grille .interventions__liens { font-size: 12px; gap: 10px; } .interventions__liens li:last-child { padding-top: 8px; border-top: 1px solid rgba(30,45,39,.18); } [data-theme="nuit"] .interventions__contour { fill: rgba(200,222,210,.07); stroke: #839E94; } [data-theme="nuit"] .interventions__liens li:last-child { border-color: rgba(216,234,223,.18); } [data-theme="nuit"] .interventions__onde { stroke: #F47C5A; } @keyframes onde-intervention { 0% { transform: scale(1); opacity: .7; } 85%, 100% { transform: scale(4); opacity: 0; } } @media (max-width: 640px) { .pied .pied__liens--briques a::before { top: 14px; } .interventions { grid-template-columns: minmax(0, 1fr); gap: 8px; } .interventions__carte { width: 120px; max-width: 100%; } } @media (prefers-reduced-motion: reduce) { .interventions__onde { animation: none; opacity: 0; } } @media (max-width: 1100px) { .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; } .pied__tete { gap: 32px; } } @media (max-width: 640px) { .pied { padding-top: 36px; } .pied__tete { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-bottom: 30px; } .pied__invitation { justify-self: start; } .pied__invitation h2 { max-width: 300px; } .pied__actions { gap: 8px 16px; } .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; } .pied__guides, .pied__coordonnees { grid-column: 1 / -1; } .pied__guides .liste-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 6px 20px; } .pied__grille .liste-liens { gap: 6px; } .pied__grille .liste-liens a { display: inline-block; padding-block: 5px; } .pied__bas { margin-top: 30px; gap: 12px; } .pied__fond { left: 0; width: 100%; opacity: .06; mask-image: linear-gradient(#000, transparent 85%); } } /* Nous suivre : réseaux en pastilles sous la carte des interventions. */ .pied__reseaux { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(30,45,39,.18); } .pied__reseaux .pied__titre { margin: 0 0 12px; } .pied__reseaux ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .pied a.pied__reseau { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; min-height: 38px; padding: 3px 12px 3px 3px; gap: 7px; border: 1px solid rgba(30,45,39,.14); border-radius: 999px; background: rgba(255,255,255,.2); color: var(--c-texte); font-size: 13px; font-weight: 600; text-decoration: none; background-image: none; transition: color .25s ease, border-color .25s ease; } .pied a.pied__reseau::after { content: none; } /* Le rond de l'icône se répand comme un liquide jusqu'à remplir la pastille, sans changer de teinte : une goutte aux bords irréguliers, centrée sur l'icône, grossit en tournant un peu (transform seul, sans à-coup). */ .pied a.pied__reseau::before { content: ''; position: absolute; z-index: -1; left: 17px; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; border-radius: 50%; background: rgba(255,255,255,.5); transform: scale(.1); will-change: transform; transition: transform .7s cubic-bezier(.3,1.35,.55,1), border-radius .5s ease; transition: transform 1.1s linear(0.000, 0.017, 0.050, 0.096, 0.152, 0.218, 0.292, 0.373, 0.462, 0.558, 0.660, 0.769, 0.884, 1.005, 1.055, 1.039, 1.018, 0.998, 0.982, 0.972, 0.969, 0.973, 0.981, 0.992, 1.002, 1.010, 1.015, 1.016, 1.014, 1.009, 1.004, 0.999, 0.995, 0.992, 0.992, 0.993, 0.996, 0.998, 1.001, 1.003, 1.004, 1.004, 1.003, 1.002, 1.001, 0.999, 0.999, 0.998, 1.000), border-radius .5s ease; } .pied__reseau .ico { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: none; color: var(--c-lien); } .pied a.pied__reseau:is(:hover, :focus-visible) { color: var(--c-lien); border-color: var(--c-lien); } /* Retour : le rond se rétracte en rebondissant trois fois (courbe linear() amortie, rebond simple sinon) ; aller : easy ease. */ .pied a.pied__reseau:is(:hover, :focus-visible)::before { transform: scale(1) rotate(35deg); border-radius: 44% 56% 52% 48% / 55% 45% 55% 45%; transition-duration: .6s; transition-timing-function: cubic-bezier(.42,0,.58,1); } [data-theme="nuit"] .pied__reseaux { border-color: rgba(216,234,223,.18); } [data-theme="nuit"] .pied a.pied__reseau { color: #CED8E7; border-color: rgba(216,234,223,.18); background: rgba(255,255,255,.05); } [data-theme="nuit"] .pied a.pied__reseau::before { background: rgba(255,179,141,.16); } [data-theme="nuit"] .pied__reseau .ico { color: #FFB38D; } [data-theme="nuit"] .pied a.pied__reseau:is(:hover, :focus-visible) { color: #FFB38D; border-color: #FFB38D; } @media (prefers-reduced-motion: reduce) { .pied a.pied__reseau, .pied a.pied__reseau::before, .contact-reseau { transition: none; } } /* Photographies pleine largeur. La feuille du simulateur garde son propre fond. */ :root { --hauteur-visuel-page: 700px; } .bandeau-photo { position: relative; isolation: isolate; background: #34342c; color: #fff; } .bandeau-photo__image { position: absolute; inset: 0; z-index: -2; overflow: hidden; background-size: cover; background-position: 64% 50%; } .bandeau-photo__image img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; } @media (min-width: 641px) { .bandeau-photo__image--detail { left: 40%; mask-image: linear-gradient(90deg, transparent, #000 22%); } .bandeau-photo__image--detail img { object-position: center; } } .bandeau-photo::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(12,17,15,.86), rgba(12,17,15,.70) 35%, rgba(12,17,15,.20) 68%, rgba(12,17,15,.10)); } .accueil-panorama--photo { padding: 0 0 clamp(40px, 5vw, 64px); } .accueil-panorama__visuel { min-height: var(--hauteur-visuel-page); padding: calc(var(--hauteur-entete) + 38px) 0 94px; } .accueil-panorama__visuel .bandeau-photo__image { top: var(--hauteur-entete); left: 20%; mask-image: linear-gradient(90deg, transparent, #000 22%); } .accueil-panorama__visuel .bandeau-photo__image img { object-position: 100% 50%; } .accueil-panorama__visuel .bandeau-photo__image { background-position: 100% 50%; } .accueil-panorama--photo .accueil-panorama__tete { display: block; max-width: var(--largeur-site); } .accueil-panorama--photo .accueil-panorama__tete > * { max-width: 720px; } .accueil-panorama--photo .accueil-mix__chapo { max-width: 720px; } .accueil-panorama--photo h1 { font-size: clamp(2.3rem, 1.6rem + 2.6vw, 3.65rem); color: #fff; } .accueil-panorama--photo .accueil-cle { width: auto; min-width: 0; white-space: normal; font-size: 12px; color: #f0e9dd; margin-bottom: 16px; } .accueil-panorama--photo .souligne { color: #fff; } .accueil-panorama--photo .accueil-mix__chapo { margin-top: 20px; color: #f4f0e8; } .accueil-panorama--photo .atouts-standard--ligne { color: #f4f0e8; font-size: 13px; gap: 8px 16px; } .accueil-panorama--photo .atouts-standard .ico { color: #ffe28a; } .accueil-panorama--photo .contact-humain { margin-top: 18px; gap: 12px; } .accueil-panorama--photo .contact-humain__photo { width: 48px; } .accueil-panorama--photo .contact-humain span { color: #e9e5dc; font-size: 13px; } .accueil-panorama--photo .contact-humain strong { color: #fff; font-size: 16px; } .accueil-panorama--photo .contact-humain:is(:hover, :focus-visible) strong { color: #ffe28a; } .accueil-panorama--photo .feuille--panorama { position: relative; margin-top: -88px; } .page-article .bandeau--photo { color: #fff; min-height: var(--hauteur-visuel-page); padding-top: calc(var(--hauteur-entete) + 26px); padding-bottom: 88px; display: grid; align-items: center; } .page-article .bandeau--photo.bandeau-photo { background: #34342c !important; } .page-article .bandeau--photo .bandeau__grille { width: 100%; grid-template-columns: minmax(0, 780px) minmax(260px, 330px); justify-content: space-between; gap: 40px; align-items: end; } .page-article .bandeau--photo .bandeau__grille:not(:has(.bandeau__prix)) { grid-template-columns: minmax(0, 780px); justify-content: start; } .bandeau--photo .article-infos { font-size: 13px; gap: 6px 14px; } .bandeau--photo h1 { color: #fff; } .bandeau--photo .bandeau__chapo { color: #f4f0e8; font-size: 18px; } .bandeau--photo .fil-ariane, .bandeau--photo .article-infos { color: #e9e5dc; } .bandeau--photo .fil-ariane a:hover { color: #fff; } .bandeau--photo .article-infos .ico { color: #ffe28a; } .bandeau--photo .partage__titre { color: #e9e5dc; } .bandeau--photo .etiquettes a { color: #fff; background: #202821; border-color: #7f887e; } .bandeau--photo .etiquettes a:hover { background: var(--c-orange); } .page-article .bandeau--photo .bandeau__prix { display: block; color: var(--c-texte); padding: 24px; background: var(--c-blanc); border: 1px solid var(--c-trait-clair); border-radius: var(--rayon); } .page-article .bandeau--photo .bandeau__prix .btn { width: 100%; margin: 16px 0 0 !important; } .page-article .bandeau--photo .bandeau__prix strong { margin: 8px 0; font-size: 32px; } .bandeau-photo a:focus-visible { outline: 3px solid #ffe28a; outline-offset: 5px; } @media (min-width: 961px) { .mise-d.page-bandeau-photo .bandeau + .section { position: relative; z-index: 2; margin-top: -56px; padding-top: 0; } .mise-d.page-bandeau-photo .article-grille { row-gap: 40px; } .mise-d.page-bandeau-photo .article-cote { min-height: 56px; display: flex; align-items: center; } .mise-d.page-bandeau-photo .article-cote__colle { width: 100%; } } @media (max-width: 960px) { .accueil-panorama__visuel { min-height: 0; } .page-article .bandeau--photo .bandeau__grille { grid-template-columns: minmax(0, 1fr); gap: 28px; } .page-article .bandeau--photo .bandeau__grille > div { max-width: 640px; } .page-article .bandeau--photo .bandeau__prix { max-width: 380px; } } @media (max-width: 640px) { .bandeau-photo::after { background: linear-gradient(90deg, rgba(12,17,15,.84), rgba(12,17,15,.64)); } .bandeau-photo__image img { object-position: center; } .accueil-panorama__visuel { padding-top: calc(var(--hauteur-entete) + 28px); padding-bottom: 74px; } .accueil-panorama__visuel .bandeau-photo__image { left: 0; mask-image: none; } .accueil-panorama__visuel .bandeau-photo__image img { object-position: center; } .accueil-panorama__visuel .bandeau-photo__image { background-position: center; } .accueil-panorama--photo .feuille--panorama { margin-top: -58px; } .accueil-panorama--photo .accueil-cle { font-size: 11px !important; } .accueil-panorama--photo h1 { font-size: clamp(2.2rem, 8.8vw, 3rem); } .accueil-panorama--photo .accueil-mix__chapo { font-size: 16px !important; } .accueil-panorama--photo .contact-humain strong { font-size: 15px; } .page-article .bandeau--photo { min-height: 0; padding-top: calc(var(--hauteur-entete) + 32px); padding-bottom: 44px; } .bandeau--photo .bandeau__chapo { font-size: 16px; } } .avant-apres__intro { max-width: 1100px; margin-bottom: 24px; } .avant-apres__intro p { margin-top: 16px; font-size: 18px; color: var(--c-gris); line-height: 1.6; } .avant-apres__figure { margin: 0; max-width: 1100px; } .comparateur { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--rayon); background: var(--c-sauge-clair); } .comparateur__apres, .comparateur__avant { position: absolute; inset: 0; } .comparateur img { display: block; width: 100%; height: 100%; object-fit: cover; } .comparateur__avant { clip-path: inset(0 calc(100% - var(--position)) 0 0); } .comparateur__etiquette { position: absolute; top: 18px; padding: 8px 14px; background: #F1F5F1; color: #263932; border-radius: 5px; font-size: 14px; font-weight: 600; pointer-events: none; } .comparateur__etiquette--avant { left: 18px; }.comparateur__etiquette--apres { right: 18px; } .comparateur input[type="range"] { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: .001; cursor: ew-resize; touch-action: pan-y; } .comparateur:has(input:focus-visible) { outline: 3px solid var(--c-orange); outline-offset: 4px; } .comparateur__curseur { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--position); width: 2px; background: #fff; transform: translateX(-50%); pointer-events: none; } .comparateur__curseur > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #273C33; border: 1px solid #D1DBD4; } .comparateur__curseur svg { width: 36px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .comparateur__commandes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--c-gris); } .comparateur__commandes > div { display: flex; gap: 8px; } .comparateur__commandes button { font: inherit; padding: 7px 12px; border: 1px solid var(--c-trait); color: var(--c-texte); background: transparent; border-radius: 5px; cursor: pointer; } .comparateur__commandes button:focus-visible { outline: 2px solid var(--c-orange); outline-offset: 2px; } .avant-apres__figure figcaption { margin-top: 10px; font-size: 12px; line-height: 1.5; color: var(--c-gris); } @media (max-width: 600px) { .comparateur__etiquette { top: 10px; padding: 6px 10px; font-size: 12px; }.comparateur__etiquette--avant { left: 10px; }.comparateur__etiquette--apres { right: 10px; }.comparateur__curseur > span { width: 44px; height: 44px; }.avant-apres__intro p { font-size: 16px; } } /* Ajustements propres à l'accueil ; les pages internes gardent leurs hauteurs. */ .accueil-compact .section { padding-block: clamp(40px, 4.5vw, 64px); } .accueil-compact .entete-section { margin-bottom: 28px; } .accueil-compact .accueil-panorama--photo { padding-bottom: 6px; } .accueil-compact .accueil-panorama__visuel { min-height: 0; padding-top: calc(var(--hauteur-entete) + 24px); padding-bottom: 138px; } .accueil-compact .accueil-panorama--photo .feuille--panorama { margin-top: -120px; padding-block: 14px; } .accueil-compact .feuille--panorama .croquis svg { height: 320px; max-height: none; transform: scale(1.18); transform-origin: 50% 58%; } .accueil-compact .mini-sim--barre { gap: 12px; } .accueil-compact .ruban { padding-block: 12px; } .accueil-compact .ruban__piste { animation-duration: 55s; } .accueil-introduction { position: relative; isolation: isolate; padding-bottom: 80px; } .accueil-introduction > .accueil-panorama { position: relative; z-index: 1; } .accueil-compact .accueil-introduction > .ruban { position: absolute; z-index: 0; left: -3%; bottom: 104px; width: 106%; transform: rotate(-2.2deg); transform-origin: center; pointer-events: none; border-block: 1px solid var(--c-trait-clair); } .accueil-compact .accueil-panorama--photo .accueil-mix__chapo { margin-top: 16px; } .accueil-compact .accueil-panorama--photo .contact-humain { margin-top: 14px; } .accueil-compact .accueil-panorama--photo .accueil-panorama__tete > h1 { max-width: 780px; } .accueil-compact .accueil-promesse { display: block; white-space: nowrap; } .accueil-compact .accueil-panorama--photo h1 > .accueil-conclusion { display: block; margin-top: 8px; font-size: clamp(1.8rem, 1.3rem + 1.5vw, 2.5rem); } .accueil-compact .accueil-conclusion > .souligne { white-space: nowrap; font-size: inherit; } .accueil-compact .avant-apres__intro { max-width: none; } .accueil-compact .avant-apres__figure { max-width: none; width: 100%; margin-inline: auto; } .accueil-compact .comparateur { aspect-ratio: 12 / 5; } .accueil-compact .comparateur img { object-position: center; } .orientations__grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .orientation { padding: 30px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; } .orientation--pros { background: var(--c-sauge-fonce); border-radius: 14px 0 0 14px; } .orientation--copro { background: var(--c-blanc); border-radius: 0 14px 14px 0; border: 1px solid var(--c-trait-clair); } .orientation__repere { display: flex; align-items: center; gap: 10px; font: 11px var(--f-tech); letter-spacing: .09em; color: var(--c-gris); } .orientation__repere .ico { width: 30px; height: 30px; padding: 6px; background: var(--p-jaune); border-radius: 8px; color: #293631; } .orientation--copro .orientation__repere .ico { background: var(--p-bleu); } .orientation h2 { font-size: clamp(1.4rem, 1.15rem + .65vw, 1.85rem); line-height: 1.16; margin: 0; } .orientation p { color: var(--c-gris); font-size: 15px; line-height: 1.65; } .orientation .lien-action { margin-top: auto; min-height: 44px; font-size: 14px; padding: 10px 14px; } .guides-defilants { position: relative; } .guides-defilants__commandes { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; } .guides-defilants__commandes button { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--c-trait-clair); background: var(--c-blanc); color: var(--c-texte); cursor: pointer; } .guides-defilants__commandes button:first-child .ico { transform: rotate(180deg); } .guides-defilants__commandes button:disabled { opacity: .35; cursor: default; } .accueil-compact .section-guides { overflow: clip; } .accueil-compact .guides-defilants { margin-right: calc(-1 * max(var(--gouttiere), (100vw - var(--largeur-site)) / 2 + var(--gouttiere))); } .accueil-compact .guides-defilants__commandes { padding-right: max(var(--gouttiere), calc((100vw - var(--largeur-site)) / 2 + var(--gouttiere))); } .accueil-compact .guides-accueil { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; scrollbar-width: none; padding: 16px var(--gouttiere) 40px 24px; margin: -12px 0 -26px -24px; } .accueil-compact .guides-accueil::-webkit-scrollbar { display: none; } .accueil-compact .guides-accueil { -webkit-mask-image: linear-gradient(90deg, transparent 24px, #000 52px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent 24px, #000 52px, #000 calc(100% - 48px), transparent); } .accueil-compact .guides-accueil > li { flex: 0 0 clamp(280px, calc((min(100vw, var(--largeur-site)) - 2 * var(--gouttiere) - 40px) / 3), 413.33px); scroll-snap-align: start; min-width: 0; } .accueil-compact .guides-accueil .couverture { aspect-ratio: 2.35 / 1; } .accueil-compact .guides-accueil .carte-guide strong { font-size: 18px; } .accueil-compact .guides-accueil .carte-guide__resume { font-size: 14px; } .accueil-compact .faq--colonnes { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: start; gap: 44px; max-width: none; border-top: 0; } .faq__colonne { border-top: 1px solid var(--c-trait-clair); min-width: 0; } .accueil-compact .faq summary { min-height: 92px; padding-block: 18px; font-size: 17px; } .accueil-compact .faq__reponse { font-size: 15px; line-height: 1.65; } .accueil-compact #methode .etapes--parcours { gap: 28px; } .accueil-compact #methode .etape { border: 0; background: none; padding: 60px 0 0; border-radius: 0; } .accueil-compact #methode .etape::before { display: none; } .accueil-compact #methode .etape::after { content: ''; position: absolute; height: 1px; top: 20px; left: 56px; right: -12px; background: #50534C; } .accueil-compact #methode .etape:last-child::after { right: 0; } .etape__repere { position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FFE17A; color: #1E2424; font: 600 15px var(--f-tech); } .etape__media { position: relative; aspect-ratio: 1.65; border-radius: 10px; overflow: hidden; } .accueil-compact #methode .etape__photo { width: 100%; height: 100%; margin: 0; border-radius: 0; } .etape__media img { width: 100%; height: 100%; object-fit: cover; } .etape__estimation { background: #F0F3ED; background-image: linear-gradient(#D8E0DA 1px, transparent 1px), linear-gradient(90deg, #D8E0DA 1px, transparent 1px); background-size: 18px 18px; } .etape__estimation svg { position: absolute; inset: 8% auto auto 4%; width: 82%; height: 82%; } .etape__prix { position: absolute; right: 10px; bottom: 12px; padding: 6px 10px; background: #FFE17A; color: #794121; font: 16px var(--f-main); transform: rotate(-4deg); } .etape__prix strong { font-size: 25px; } .accueil-compact #methode .etape h3 { margin-top: 22px; font-size: 23px; } .accueil-compact #methode .etape p { margin-top: 12px; font-size: 16px; line-height: 1.6; } .accueil-compact .final { padding-top: 28px; } .accueil-compact .final__feuille { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 40px; padding: 30px 40px; text-align: left; transform: none; } .accueil-compact .final__feuille h2 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); max-width: 760px; margin: 0; } .accueil-compact .final__feuille p { max-width: 650px; font-size: 16px; margin: 12px 0 0; color: var(--c-gris); } .accueil-compact .final__feuille .accueil__actions { flex-direction: column; align-items: stretch; margin: 0; gap: 10px; } .accueil-compact .final__feuille .btn { min-height: 46px; } [data-theme="nuit"] .orientation--pros { background: #253832; } [data-theme="nuit"] .orientation--copro { background: var(--c-blanc); } @media (min-width: 1001px) and (min-height: 950px) { .accueil-compact .accueil-panorama__visuel { padding-top: calc(var(--hauteur-entete) + 32px); padding-bottom: 148px; } .accueil-compact .accueil-panorama--photo { padding-bottom: 16px; } .accueil-compact .accueil-panorama--photo .feuille--panorama { padding-block: 18px; } } @media (min-width: 1001px) and (max-height: 820px) { .accueil-compact .accueil-panorama__visuel { padding-top: calc(var(--hauteur-entete) + 12px); padding-bottom: 138px; } .accueil-compact .accueil-panorama--photo h1 { font-size: 44px; } .accueil-compact .accueil-panorama .accueil-cle { margin-bottom: 10px; } .accueil-compact .accueil-panorama .accueil-mix__chapo { font-size: 15px !important; line-height: 1.45 !important; margin-top: 12px; } .accueil-compact .accueil-panorama .atouts-standard--ligne { margin-top: 12px !important; font-size: 12px; } .accueil-compact .accueil-panorama--photo .contact-humain { margin-top: 10px; } .accueil-compact .accueil-panorama--photo .contact-humain__photo { width: 40px; } .accueil-compact .accueil-panorama--photo .feuille--panorama { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); padding: 8px 22px; } .accueil-compact .mini-sim--barre { gap: 8px; } .accueil-compact .mini-sim--barre .mini-sim__projet span { padding-block: 7px; font-size: 13px; } .accueil-compact .mini-sim--barre .btn { min-height: 44px; } .accueil-compact .feuille--panorama .croquis svg { height: 280px; } .accueil-compact .ruban { padding-block: 9px; } } @media (max-width: 1000px) { .accueil-compact .guides-accueil > li { flex-basis: calc((100vw - 2 * var(--gouttiere) - 20px) / 2); } .orientation { padding: 26px; } .accueil-compact .final__feuille { grid-template-columns: 1fr; padding: 28px; } .accueil-compact .final__feuille .accueil__actions { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 760px) { .accueil-compact .accueil-promesse { white-space: normal; text-wrap: pretty; } .orientations__grille, .accueil-compact .faq--colonnes { grid-template-columns: 1fr; gap: 0; } .orientation--pros { border-radius: 14px 14px 0 0; } .orientation--copro { border-radius: 0 0 14px 14px; } .faq__colonne + .faq__colonne { border-top: 0; } .accueil-compact .faq summary { min-height: 0; } .accueil-compact .guides-accueil > li { flex-basis: 82%; } .accueil-compact #methode .etapes--parcours { grid-template-columns: 1fr; gap: 32px; } .accueil-compact #methode .etape { padding: 0 0 0 60px; } .accueil-compact #methode .etape::after { top: 50px; left: 20px; right: auto; bottom: -22px; width: 1px; height: auto; } .accueil-compact #methode .etape:last-child::after { display: none; } .accueil-compact #methode .etape h3 { font-size: 22px; margin-top: 16px; } } @media (max-width: 640px) { .accueil-introduction { padding-bottom: 64px; } .accueil-compact .accueil-introduction > .ruban { bottom: 36px; transform: rotate(-1.8deg); } .accueil-compact .accueil-panorama__visuel { padding-top: calc(var(--hauteur-entete) + 24px); padding-bottom: 82px; } .accueil-compact .accueil-panorama--photo .feuille--panorama { margin-top: -58px; padding: 16px; } .accueil-compact .feuille--panorama .croquis svg { height: 235px; transform: scale(1.08); } .accueil-compact .comparateur { aspect-ratio: 1.55; } .accueil-compact .comparateur__curseur > span { width: 44px; height: 44px; } .accueil-compact .final__feuille .accueil__actions { flex-direction: column; } }