/* george.exonetic.fr — v2 statique. Palette ardoise + cuivre, Archivo local. */ /* ---------- Polices (extraites du site d'origine, servies en local) ---------- */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/asset-09.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/asset-08.woff2") format("woff2"); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20C0; } /* ---------- Tokens ---------- */ :root { --ardoise-950: #12161d; --ardoise-900: #161b24; --ardoise-800: #262d3a; --ardoise-700: #343948; --encre: #20252e; --gris: #5a6170; --gris-2: #6b7286; --cuivre: #e45328; --cuivre-fonce: #c2410c; --lin: #f4f1ec; --lin-2: #eae5dc; --ligne: rgba(52, 57, 72, .14); --ligne-claire: rgba(255, 255, 255, .12); --radius: 3px; --contenu: 1200px; --pad-x: clamp(18px, 4vw, 48px); --pad-section: clamp(64px, 9vw, 120px); } /* ---------- Base ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--lin); color: var(--encre); font-family: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.fige { overflow: hidden; } img { max-width: 100%; display: block; } h1, h2, h3, p, dl, dd { margin: 0; } a { color: inherit; } .contenu { max-width: var(--contenu); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } /* Apparition au scroll — uniquement si le JS est actif (classe js sur ) */ html.js [data-rise] { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.16,.7,.2,1), transform .7s cubic-bezier(.16,.7,.2,1); } html.js [data-rise].vu { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } html.js [data-rise] { opacity: 1; transform: none; } } /* Motif "ligne de faîtage" réutilisé */ .chevron-titre { display: flex; align-items: center; gap: 12px; } .chevron-titre span { font-size: clamp(.72rem, 1vw, .8rem); letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: var(--cuivre); } .trait-toit { display: block; margin: 18px 0 0; } /* ---------- Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background .3s ease, box-shadow .3s ease; background: linear-gradient(180deg, rgba(13,16,22,.6), rgba(13,16,22,0)); } .site-header.solid { background: rgba(18,22,30,.97); box-shadow: 0 10px 30px rgba(0,0,0,.25); } .site-header .barre { max-width: 1280px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: clamp(12px,1.7vw,16px) var(--pad-x); } .logo { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; } .logo b { font-weight: 800; font-size: 20px; color: #fff; white-space: nowrap; } @media (max-width: 480px) { .logo svg { width: 58px; height: 23px; } .logo b { font-size: 16px; } } .site-header nav { display: none; } .site-header .tel-head { display: none; } .btn-head { background: var(--cuivre); color: #fff; font-weight: 700; font-size: .92rem; padding: 10px 16px; border-radius: var(--radius); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; margin-left: auto; } .btn-head:hover { background: var(--cuivre-fonce); } @media (min-width: 900px) { .site-header nav { display: flex; gap: clamp(14px,1.9vw,28px); margin-left: auto; align-items: center; } .site-header nav a { color: rgba(255,255,255,.84); text-decoration: none; font-weight: 500; font-size: .95rem; } .site-header nav a:hover { color: #fff; } .site-header .tel-head { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; white-space: nowrap; } .btn-head { margin-left: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: max(600px, 100svh); background: var(--ardoise-900); overflow: hidden; display: flex; align-items: flex-end; } .hero picture.fond-hero { position: absolute; inset: 0; } .hero picture.fond-hero img { width: 100%; height: 100%; object-fit: cover; } .hero .voile { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(16,20,28,.62) 0%, rgba(16,20,28,.12) 24%, rgba(16,20,28,.3) 55%, rgba(13,16,22,.95) 100%); } @media (max-width: 899px) { .hero .voile { background: linear-gradient(180deg, rgba(16,20,28,.66) 0%, rgba(16,20,28,.34) 24%, rgba(16,20,28,.52) 55%, rgba(13,16,22,.96) 100%); } } .hero .voile-g { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(95deg, rgba(13,16,22,.88) 0%, rgba(13,16,22,.45) 34%, rgba(13,16,22,0) 66%); } .hero .texte { position: relative; z-index: 3; width: 100%; max-width: 1280px; margin: 0 auto; padding: clamp(96px,14vw,140px) var(--pad-x) clamp(46px,6vw,76px); } .hero h1 { color: #fff; font-weight: 800; font-size: clamp(1.95rem, 6.2vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; overflow-wrap: break-word; max-width: 900px; margin-top: 16px; } .hero .sous { margin-top: 20px; max-width: 54ch; color: rgba(236,239,245,.88); font-size: clamp(1.02rem, 1.5vw, 1.28rem); line-height: 1.5; text-wrap: pretty; } .hero .actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 30px; } .hero .preuves { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 26px; color: rgba(255,255,255,.76); font-size: .86rem; font-weight: 500; } .hero .preuves span { display: inline-flex; align-items: center; gap: 7px; } .btn-principal { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--cuivre); color: #fff; font-weight: 700; font-size: 1.05rem; padding: 16px 26px; border-radius: var(--radius); text-decoration: none; border: 0; cursor: pointer; font-family: inherit; box-shadow: 0 12px 32px rgba(228,83,40,.34); } .btn-principal:hover { background: var(--cuivre-fonce); } .btn-secondaire { display: inline-flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 600; font-size: 1.05rem; padding: 16px 22px; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.42); text-decoration: none; white-space: nowrap; background: transparent; cursor: pointer; font-family: inherit; } .btn-secondaire:hover { background: rgba(255,255,255,.08); } /* ---------- Bande de réassurance ---------- */ .bande-preuves { background: var(--ardoise-950); border-top: 3px solid var(--cuivre); } .bande-preuves .contenu { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; padding-top: clamp(18px, 3vw, 26px); padding-bottom: clamp(18px, 3vw, 26px); } .preuve { display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center; } .preuve .chiffre { color: var(--cuivre); font-weight: 800; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.01em; } .preuve .libelle { color: rgba(255,255,255,.72); font-size: .82rem; font-weight: 500; } /* ---------- Sections communes ---------- */ section { scroll-margin-top: 72px; } .section-lin { background: var(--lin); padding: var(--pad-section) 0; } .section-lin2 { background: var(--lin-2); padding: var(--pad-section) 0; } .section-ardoise { background: var(--ardoise-800); padding: var(--pad-section) 0; position: relative; overflow: hidden; } .section-ardoise::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 14px; background: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px); } h2.titre { font-weight: 800; font-size: clamp(1.9rem, 4vw, 3.1rem); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; margin-top: 16px; } .section-ardoise h2.titre { color: #fff; } .intro { margin-top: 18px; font-size: clamp(1rem, 1.3vw, 1.14rem); line-height: 1.6; color: var(--gris); max-width: 60ch; text-wrap: pretty; } .section-ardoise .intro { color: rgba(255,255,255,.78); } /* ---------- Services ---------- */ .services-grille { margin-top: clamp(34px, 5vw, 60px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 258px), 1fr)); border-top: 1px solid var(--ligne); border-left: 1px solid var(--ligne); } .service { border-right: 1px solid var(--ligne); border-bottom: 1px solid var(--ligne); padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; transition: background .25s, transform .25s; color: inherit; text-decoration: none; cursor: pointer; background: transparent; text-align: left; font-family: inherit; border-left: 0; border-top: 0; font-size: inherit; } .service:hover { background: #fff; transform: translateY(-3px); } .service .haut { display: flex; align-items: center; justify-content: space-between; color: var(--cuivre); } .service .num { font-weight: 800; font-size: 1.05rem; color: rgba(52,57,72,.32); letter-spacing: .02em; } .service h3 { font-weight: 700; font-size: clamp(1.15rem, 1.5vw, 1.35rem); letter-spacing: -.01em; } .service p { font-size: .96rem; line-height: 1.55; color: var(--gris); flex: 1; } .service .lien { color: var(--cuivre); font-weight: 700; font-size: .9rem; } .service.urgence-carte { background: linear-gradient(135deg, #fdf1ec, #fbe4d8); } .service.urgence-carte:hover { background: #fff; } /* ---------- Réalisations ---------- */ .avant-apres { margin-top: clamp(34px, 5vw, 56px); display: grid; grid-template-columns: 1fr 1fr; gap: 14px; position: relative; } @media (max-width: 640px) { .avant-apres { grid-template-columns: 1fr; } } .avant-apres figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); aspect-ratio: 3 / 2; } .avant-apres picture { position: absolute; inset: 0; } .avant-apres img { width: 100%; height: 100%; object-fit: cover; } .avant-apres img.cadre-bas { object-position: center bottom; } .badge-aa { position: absolute; top: 12px; left: 12px; z-index: 2; background: rgba(18,22,30,.85); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; } .badge-aa.apres { background: var(--cuivre); } .legende-aa { grid-column: 1 / -1; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 2px; } .legende-aa .quoi-aa { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; } .galerie { margin-top: clamp(34px, 5vw, 56px); display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); grid-auto-rows: clamp(180px, 21vw, 250px); } .galerie figure { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); } .galerie figure.grande { grid-row: span 2; } @media (min-width: 900px) { .galerie figure.large-2 { grid-column: span 2; } } .galerie picture { position: absolute; inset: 0; } .galerie img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .galerie figcaption { position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 2; pointer-events: none; text-shadow: 0 1px 2px rgba(13,16,22,.6); } .galerie figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,16,22,0) 45%, rgba(13,16,22,.86) 100%); } .galerie figcaption { z-index: 2; } .galerie .lieu, .legende-aa .lieu { display: inline-flex; align-items: center; gap: 7px; color: var(--cuivre); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .galerie .quoi { color: #fff; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; margin-top: 3px; } /* ---------- Réassurance ---------- */ .pourquoi-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: clamp(34px, 5vw, 72px); align-items: start; margin-top: 8px; } .argument { display: flex; gap: 16px; padding: 20px 0; border-top: 1px solid var(--ligne); } .argument:last-child { border-bottom: 1px solid var(--ligne); } .argument svg { flex: 0 0 auto; margin-top: 2px; color: var(--cuivre); } .argument h3 { font-weight: 700; font-size: 1.1rem; } .argument p { margin-top: 5px; color: var(--gris); font-size: .96rem; line-height: 1.55; } .carte-zone { background: var(--ardoise-900); border: 1px solid var(--ligne-claire); border-radius: 4px; padding: clamp(22px, 3vw, 34px); } .carte-zone h3 { color: #fff; font-weight: 800; font-size: 1.45rem; letter-spacing: -.01em; margin-top: 12px; } .communes-chips { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 9px; } .communes-chips span { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 9px 15px; color: rgba(255,255,255,.92); font-size: .93rem; font-weight: 600; } .communes-chips svg { flex: 0 0 auto; } .zone-rayon { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 10px; align-items: flex-start; color: rgba(255,255,255,.72); font-size: .92rem; line-height: 1.5; } .zone-rayon b { color: #fff; } .zone-rayon svg { flex: 0 0 auto; margin-top: 2px; } /* ---------- Bandeau urgence ---------- */ .bandeau-urgence { background: var(--ardoise-900); border-top: 3px solid var(--cuivre); } .bandeau-urgence .contenu { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding-top: clamp(28px, 4vw, 40px); padding-bottom: clamp(28px, 4vw, 40px); } .bandeau-urgence .texte-u { color: #fff; } .bandeau-urgence .texte-u b { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; } .bandeau-urgence .texte-u span { display: block; color: rgba(255,255,255,.72); font-size: .95rem; margin-top: 4px; } .pastille-urgence { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: rgba(228,83,40,.16); align-items: center; justify-content: center; color: var(--cuivre); flex: 0 0 auto; } /* ---------- Footer ---------- */ footer { background: var(--ardoise-950); color: rgba(255,255,255,.7); padding: clamp(48px, 6vw, 76px) 0 clamp(26px, 3vw, 38px); } footer .colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(28px, 4vw, 48px); } footer .titre-col { color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 14px; } footer .liens { display: flex; flex-direction: column; gap: 9px; font-size: .93rem; } footer .liens a { color: rgba(255,255,255,.7); text-decoration: none; } footer .liens a:hover { color: #fff; } footer .bas { margin-top: clamp(32px, 4vw, 50px); padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .8rem; color: rgba(255,255,255,.45); } footer .bas a { color: inherit; } /* ---------- Barre CTA mobile ---------- */ .barre-mobile { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1.4fr; gap: 1px; background: rgba(255,255,255,.14); box-shadow: 0 -6px 20px rgba(0,0,0,.2); padding-bottom: env(safe-area-inset-bottom); } .barre-mobile a, .barre-mobile button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 700; font-size: .95rem; padding: 15px 8px; min-height: 54px; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; } .barre-mobile .appeler { background: var(--ardoise-800); color: #fff; } .barre-mobile .devis { background: var(--cuivre); color: #fff; } .cale-mobile { height: calc(56px + env(safe-area-inset-bottom)); } @media (min-width: 900px) { .barre-mobile, .cale-mobile { display: none; } } /* ---------- Mentions légales ---------- */ .mentions { position: fixed; inset: 0; z-index: 90; background: rgba(13,16,22,.7); display: flex; align-items: center; justify-content: center; padding: 20px; } .mentions[hidden], .assistant[hidden] { display: none; } .mentions .boite { background: #fff; border-radius: 6px; max-width: 560px; max-height: 80vh; overflow: auto; padding: clamp(22px, 3vw, 34px); } .mentions h3 { font-size: 1.2rem; margin-bottom: 12px; } .mentions p { font-size: .92rem; line-height: 1.6; color: var(--gris); margin-top: 10px; } .ml-fermer { margin-top: 18px; background: var(--ardoise-800); color: #fff; border: 0; border-radius: var(--radius); padding: 11px 18px; font-weight: 600; cursor: pointer; font-family: inherit; } /* ================================================================ ASSISTANT DEVIS (overlay) ================================================================ */ .assistant { position: fixed; inset: 0; z-index: 100; background: var(--lin); display: flex; flex-direction: column; height: 100vh; height: 100dvh; } body.fige .barre-mobile { display: none; } a:focus-visible, button:focus-visible, input:focus-visible, label:focus-visible { outline: 2px solid var(--cuivre); outline-offset: 2px; } .as-tete { display: flex; align-items: center; gap: 12px; padding: 14px var(--pad-x); background: var(--ardoise-900); } .as-tete .titre-as { color: #fff; font-weight: 700; font-size: .98rem; flex: 1; text-align: center; } .as-tete button { background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: var(--radius); min-width: 40px; height: 40px; cursor: pointer; font-size: 1rem; font-family: inherit; display: inline-flex; align-items: center; justify-content: center; } .as-tete button:hover { background: rgba(255,255,255,.1); } .as-progression { height: 4px; background: var(--lin-2); } .as-progression div { height: 100%; width: 0; background: var(--cuivre); transition: width .35s ease; } .as-bandeau-urgent { background: #c62828; color: #fff; text-align: center; font-weight: 800; font-size: .85rem; letter-spacing: .06em; padding: 7px 12px; } .as-corps { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .as-zone { max-width: 640px; margin: 0 auto; padding: clamp(24px, 5vw, 48px) var(--pad-x) 60px; } .as-q { font-weight: 800; font-size: clamp(1.45rem, 3.4vw, 2rem); letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; } .as-aide { margin-top: 10px; color: var(--gris); font-size: .97rem; line-height: 1.55; } .as-facultatif { font-weight: 500; font-size: .75em; color: var(--gris-2); } .as-centre { text-align: center; } .as-cartes { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .as-carte { background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 18px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; cursor: pointer; font-family: inherit; font-size: .96rem; font-weight: 600; color: var(--encre); text-align: left; transition: border-color .15s, transform .15s, box-shadow .15s; min-height: 106px; } .as-carte svg { color: var(--cuivre); } .as-carte:hover, .as-carte:focus-visible { border-color: var(--cuivre); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(32,37,46,.08); } .as-opts { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; } .as-opt { background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 16px 18px; font-family: inherit; font-size: 1.02rem; font-weight: 600; color: var(--encre); text-align: left; cursor: pointer; transition: border-color .15s, background .15s; min-height: 54px; } .as-opt:hover, .as-opt:focus-visible { border-color: var(--cuivre); } .as-opt.choisi { border-color: var(--cuivre); background: #fdf1ec; } .as-champs { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; } .as-champs label { display: block; font-weight: 600; font-size: .85rem; color: var(--gris-2); letter-spacing: .04em; } .as-champs input { width: 100%; margin-top: 7px; background: #fff; border: 1px solid var(--ligne); color: var(--encre); padding: 14px; border-radius: var(--radius); font-size: 1.05rem; font-family: inherit; } .as-champs input:focus { border-color: var(--cuivre); box-shadow: 0 0 0 3px rgba(228,83,40,.22); outline: none; } .as-libelle { margin-top: 20px; font-weight: 600; font-size: .85rem; color: var(--gris-2); letter-spacing: .04em; } .as-mini-opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } .as-mini { background: #fff; border: 1px solid var(--ligne); border-radius: 999px; padding: 10px 16px; font-family: inherit; font-size: .92rem; font-weight: 600; color: var(--encre); cursor: pointer; min-height: 42px; } .as-mini.choisi { border-color: var(--cuivre); background: var(--cuivre); color: #fff; } .as-continuer { display: flex; width: 100%; margin-top: 26px; align-items: center; justify-content: center; background: var(--cuivre); color: #fff; font-weight: 700; font-size: 1.08rem; padding: 16px; border: 0; border-radius: var(--radius); cursor: pointer; font-family: inherit; text-decoration: none; box-shadow: 0 10px 26px rgba(228,83,40,.28); } .as-continuer:hover { background: var(--cuivre-fonce); } .as-continuer:disabled { opacity: .6; cursor: wait; } .as-passer { display: block; width: 100%; margin-top: 12px; background: transparent; border: 0; color: var(--gris-2); font-family: inherit; font-size: .95rem; font-weight: 600; padding: 12px; cursor: pointer; text-decoration: underline; } .as-erreur { margin-top: 14px; color: #b3261e; font-weight: 600; font-size: .95rem; } .as-photo-btn { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: #fff; border: 2px dashed var(--ligne); border-radius: 8px; padding: 34px 20px; cursor: pointer; color: var(--encre); font-weight: 600; } .as-photo-btn:hover { border-color: var(--cuivre); } .as-photo-btn svg { color: var(--cuivre); } .as-photo-etat { margin-top: 10px; color: var(--gris-2); font-size: .92rem; min-height: 1.3em; } .as-photo-apercu { margin-top: 22px; } .as-photo-apercu img { border-radius: 8px; max-height: 300px; margin: 0 auto; box-shadow: 0 10px 30px rgba(32,37,46,.18); } .as-photo-retirer { display: block; margin: 12px auto 0; background: transparent; border: 0; color: var(--gris-2); font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; text-decoration: underline; } .as-rgpd { margin-top: 24px; display: flex; gap: 12px; background: #fff; border: 1px solid var(--ligne); border-radius: 6px; padding: 18px; cursor: pointer; font-size: .97rem; line-height: 1.55; color: var(--encre); } .as-rgpd input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--cuivre); margin-top: 2px; } .as-recap { margin-top: 22px; background: #fff; border: 1px solid var(--ligne); border-radius: 8px; overflow: hidden; } .as-recap > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 16px; border-bottom: 1px solid var(--ligne); } .as-recap > div:last-child { border-bottom: 0; } .as-recap dt { color: var(--gris-2); font-size: .88rem; } .as-recap dd { font-weight: 700; font-size: .95rem; text-align: right; } .as-badge-urgent { display: inline-block; margin-top: 12px; background: #c62828; color: #fff; font-weight: 800; font-size: .82rem; letter-spacing: .04em; padding: 6px 12px; border-radius: 999px; } .as-fini { text-align: center; padding-top: clamp(20px, 6vw, 60px); } .as-fini h2 { font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.1rem); letter-spacing: -.02em; margin-top: 18px; } .as-fini p { margin-top: 14px; color: var(--gris); font-size: 1.02rem; line-height: 1.6; } .as-coche { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--cuivre); align-items: center; justify-content: center; box-shadow: 0 12px 32px rgba(228,83,40,.34); } .as-mailto { margin-top: 18px; }