/* ============================================================ 4C Partners · feuille de style unique Palette de marque : navy 1B2A4A · cuivre C2703D · glace EAF1FA Aucune ressource externe : polices système, zéro CDN, zéro traceur. ============================================================ */ :root{ --navy:#1B2A4A; --navy-2:#24365E; --navy-3:#0F1B32; --ice:#EAF1FA; --ice-2:#F6F9FD; --ice-text:#CADCFC; --ice-muted:#93A9CF; --copper:#C2703D; --copper-d:#9C5526; --copper-l:#D98B58; --copper-bg:#FBF2EA; --ink:#18212F; --muted:#55637B; --line:#DCE5F0; --line-2:#EDF2F8; --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace; --pad:clamp(58px,6.5vw,110px); --radius:10px; /* Échelle typographique fluide : la taille de base est portée par , donc toutes les valeurs en rem suivent l'appareil automatiquement. téléphone 17px · tablette ~18,5px · PC 20px · écran large 21px */ --fs-h1:clamp(2.05rem,1.55rem + 2.1vw,3.3rem); --fs-h2:clamp(1.6rem,1.35rem + 1.05vw,2.35rem); --fs-h3:clamp(1.14rem,1.06rem + .34vw,1.4rem); --fs-lede:clamp(1.08rem,1.02rem + .28vw,1.3rem); --fs-small:clamp(.92rem,.88rem + .14vw,1rem); --fs-micro:clamp(.86rem,.83rem + .1vw,.94rem); --wrap:1180px; --wrap-narrow:min(860px,100%); --shadow:0 1px 2px rgba(27,42,74,.05),0 8px 28px -12px rgba(27,42,74,.16); } *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%; font-size:clamp(17px,16px + .3vw,20px)} @media (min-width:1600px){html{font-size:21px}} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} } body{font-family:var(--sans);color:var(--ink);background:#fff;line-height:1.65;font-size:1rem; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg{max-width:100%;height:auto;display:block} a{color:inherit;text-underline-offset:.18em} :focus-visible{outline:3px solid var(--copper);outline-offset:3px;border-radius:4px} ::selection{background:var(--copper);color:#fff} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(20px,4vw,32px)} .wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 clamp(20px,4vw,32px)} section{padding:var(--pad) 0} .skip{position:absolute;left:-9999px;top:0;background:#A85A2E;color:#fff;padding:.7rem 1.2rem;z-index:999;border-radius:0 0 6px 0} .skip:focus{left:0} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;color:var(--navy);line-height:1.18;letter-spacing:-.005em} h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2);margin:.4rem 0 1rem} h3{font-size:var(--fs-h3);line-height:1.32} h4{font-size:1.04rem} p{max-width:68ch} .lede{font-size:var(--fs-lede);color:var(--muted);max-width:62ch;line-height:1.55} .eyebrow{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.2em;text-transform:uppercase; color:var(--copper);font-weight:600;display:block;margin-bottom:.5rem} .eyebrow-light{color:var(--copper-l)} /* ---------- boutons ---------- */ .btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:600; font-size:var(--fs-small);text-decoration:none;border-radius:var(--radius);border:1.5px solid transparent; padding:.82rem 1.5rem;cursor:pointer;transition:background .16s,color .16s,border-color .16s,transform .16s,box-shadow .16s;line-height:1.3} .btn-primary{background:var(--copper);color:#fff;box-shadow:0 6px 18px -6px rgba(194,112,61,.55)} .btn-primary:hover{background:var(--copper-d);transform:translateY(-1px)} .btn-ghost{border-color:var(--ice-muted);color:var(--ice-text);background:transparent} .btn-ghost:hover{border-color:#fff;color:#fff} .btn-outline{border-color:var(--line);color:var(--navy);background:#fff} .btn-outline:hover{border-color:var(--navy);background:var(--ice-2)} .btn-sm{padding:.6rem 1.15rem;font-size:var(--fs-micro)} /* ---------- navigation ---------- */ .nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px} .logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex-shrink:0} .logo-mark{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--navy);color:#fff; font-family:var(--serif);font-weight:600;font-size:.95rem;display:flex;align-items:center;justify-content:center;letter-spacing:.02em} .logo-name{font-family:var(--serif);font-weight:600;color:var(--navy);letter-spacing:.06em;font-size:1.05rem} .nav-links{display:flex;gap:1.5rem;align-items:center;font-size:var(--fs-small)} .nav-links a{text-decoration:none;color:var(--muted);padding:.3rem 0;border-bottom:2px solid transparent} .nav-links a:hover{color:var(--navy)} .nav-links a[aria-current="page"]{color:var(--navy);border-bottom-color:var(--copper)} .nav-toggle{display:none;background:none;border:1.5px solid var(--line);border-radius:8px; padding:.45rem .6rem;cursor:pointer;color:var(--navy)} .nav-toggle svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round} @media (max-width:860px){ .nav-toggle{display:block} .nav-links{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:0;padding:.5rem clamp(18px,4vw,28px) 1.1rem;display:none;box-shadow:var(--shadow)} .nav-links.open{display:flex} .nav-links a{padding:.75rem 0;border-bottom:1px solid var(--line-2)} .nav-links .btn{margin-top:.8rem;justify-content:center;border-bottom:none} } /* ---------- héros ---------- */ .hero{background:var(--navy);color:#fff;padding:clamp(64px,9vw,104px) 0 clamp(56px,8vw,88px);position:relative;overflow:hidden} .hero::after{content:"";position:absolute;right:-200px;top:-220px;width:560px;height:560px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--navy-2),var(--navy) 70%);opacity:.85;pointer-events:none} .hero .wrap{position:relative;z-index:1} .hero h1{color:#fff;max-width:18ch;margin:.6rem 0 1.2rem} .hero h1 .accent{color:var(--copper-l);display:block} .hero p{color:var(--ice-text);max-width:58ch;font-size:var(--fs-lede);line-height:1.58} .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem} .hero-note{font-size:var(--fs-micro);color:var(--ice-muted);margin-top:1.1rem} .hero-sub{background:var(--navy-3);color:var(--ice-text);padding:clamp(40px,6vw,64px) 0 clamp(36px,5vw,56px)} .hero-sub h1{color:#fff;max-width:24ch} .hero-sub .claim{font-family:var(--serif);font-size:clamp(1.22rem,1.05rem + .8vw,1.62rem);color:var(--copper-l); font-style:italic;margin-top:1rem;max-width:44ch;line-height:1.4} /* la table : motif de signature */ .table-device{margin-top:clamp(40px,6vw,64px);font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.12em;text-transform:uppercase;max-width:640px} .td-row{display:flex;color:var(--ice-muted);padding-bottom:.6rem} .td-row.right{justify-content:flex-end;color:var(--copper-l);padding:.6rem 0 0} .td-line{height:2px;background:linear-gradient(90deg,var(--ice-muted) 0 58%,var(--copper) 58% 100%)} /* ---------- fils d'ariane ---------- */ .crumbs{font-size:var(--fs-micro);color:var(--ice-muted);margin-bottom:.5rem} .crumbs a{color:var(--ice-text);text-decoration:none} .crumbs a:hover{text-decoration:underline} /* ---------- chiffres ---------- */ .stats{background:var(--ice-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.8rem;padding:2.6rem 0} .stat b{display:block;font-family:var(--serif);font-size:clamp(1.7rem,1.5rem + .7vw,2.25rem);color:var(--navy);line-height:1.1} .stat span{display:block;font-size:var(--fs-micro);color:var(--muted);margin-top:.35rem;line-height:1.45} /* ---------- grilles de cartes ---------- */ .grid{display:grid;gap:1.3rem} .grid-2{grid-template-columns:repeat(auto-fit,minmax(325px,1fr))} .grid-3{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.6rem; transition:border-color .16s,box-shadow .16s,transform .16s;display:flex;flex-direction:column} .card p{max-width:none} a.card{text-decoration:none} a.card:hover{border-color:var(--copper);box-shadow:var(--shadow);transform:translateY(-2px)} .card .rank{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em;color:var(--copper);font-weight:600} .card h3{margin:.5rem 0 .55rem} .card .card-claim{color:var(--muted);font-size:var(--fs-small);line-height:1.55} .card .more{margin-top:auto;padding-top:1.1rem;font-size:var(--fs-micro);font-weight:600;color:var(--navy)} .card .more::after{content:" →";color:var(--copper)} /* ---------- encadrés ---------- */ .box{border:1px solid var(--line);border-left:3px solid var(--copper);background:var(--ice-2); border-radius:0 var(--radius) var(--radius) 0;padding:1.4rem 1.5rem;margin:1.8rem 0} .box h3{font-size:1.08rem;margin-bottom:.65rem} .box p{max-width:none} .box-navy{background:var(--navy);color:var(--ice-text);border:none;border-left:3px solid var(--copper)} .box-navy h3{color:#fff} .box-warn{border-left-color:var(--navy);background:#fff} .tldr{background:var(--ice-2);border:1px solid var(--line);border-radius:var(--radius);padding:1.7rem 1.8rem;margin:0 0 2.6rem} .tldr h2{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em; color:var(--copper-d);margin:0 0 1rem;font-weight:700;font-size:var(--fs-micro)} .tldr ul{list-style:none;display:flex;flex-direction:column;gap:.6rem} .tldr li{position:relative;padding-left:1.5rem;font-size:var(--fs-small);line-height:1.58} .tldr li::before{content:"";position:absolute;left:.1rem;top:.65em;width:.42rem;height:.42rem; border-radius:50%;background:var(--copper)} /* ---------- listes ---------- */ .ticks{list-style:none;display:flex;flex-direction:column;gap:.8rem;margin:1.1rem 0;font-size:var(--fs-small);line-height:1.55} .ticks li{position:relative;padding-left:1.6rem} .ticks li::before{content:"";position:absolute;left:0;top:.48em;width:.62rem;height:.62rem; border:2px solid var(--copper);border-top:0;border-right:0;transform:rotate(-45deg)} .qlist{list-style:none;counter-reset:q;display:flex;flex-direction:column;gap:.9rem;margin:1.2rem 0} .qlist li{counter-increment:q;position:relative;padding-left:2.8rem;font-size:clamp(1.05rem,1rem + .25vw,1.2rem);color:var(--navy);font-family:var(--serif);line-height:1.45} .qlist li::before{content:counter(q);position:absolute;left:0;top:.02em;width:1.9rem;height:1.9rem; border-radius:50%;background:var(--copper-bg);color:var(--copper-d);font-family:var(--mono); font-size:.82rem;font-weight:600;display:flex;align-items:center;justify-content:center} .dashes{list-style:none;display:flex;flex-direction:column;gap:.75rem;margin:1.1rem 0;line-height:1.6} .dashes li{position:relative;padding-left:1.4rem;color:var(--muted)} .dashes li::before{content:"";position:absolute;left:.12rem;top:.62em; width:.45rem;height:.45rem;border-radius:50%;background:var(--copper-txt)} .on-navy.dashes li::before{background:var(--copper-l)} .deliv{list-style:none;display:flex;flex-direction:column;gap:.85rem;margin:1.1rem 0} .deliv li{border-bottom:1px solid var(--line-2);padding-bottom:.85rem} .deliv li:last-child{border-bottom:0} .deliv b{display:block;color:var(--navy);font-weight:600} .deliv span{font-size:var(--fs-micro);color:var(--muted);font-family:var(--mono)} /* ---------- prose ---------- */ .prose h2{margin-top:2.9rem} .prose h2:first-child{margin-top:0} .prose h3{margin-top:1.8rem;margin-bottom:.5rem} .prose p+p{margin-top:1.05rem} .prose p{margin-bottom:0} /* ---------- offres ---------- */ .offres{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(335px,1fr))} .offre{border:1px solid var(--line);border-radius:var(--radius);padding:1.8rem 1.7rem;background:#fff; display:flex;flex-direction:column;container-type:inline-size} .offre.featured{border-color:var(--navy);border-width:1.5px;box-shadow:var(--shadow)} .offre .tag{display:inline-block;font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.14em; text-transform:uppercase;background:var(--copper-bg);color:var(--copper-d);padding:.3rem .65rem;border-radius:4px;font-weight:600} .offre.featured .tag{background:var(--navy);color:#fff} .offre h3{margin:.9rem 0 .5rem} .offre .pitch{color:var(--muted);font-size:var(--fs-small);margin-bottom:1.15rem;line-height:1.55} .price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;padding:.9rem 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)} .price b{font-family:var(--serif);font-size:clamp(1.65rem,1.45rem + .7vw,2.15rem);color:var(--navy);line-height:1.1} .price span{font-size:var(--fs-micro);color:var(--muted)} .offre .duree{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--copper)} .offre .btn{margin-top:auto;align-self:flex-start} .offre ul{margin:1.1rem 0 1.4rem} /* ---------- FAQ ---------- */ .faq{display:flex;flex-direction:column;gap:0;border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{cursor:pointer;padding:1.25rem 2.4rem 1.25rem 0;font-family:var(--serif);font-size:clamp(1.06rem,1rem + .28vw,1.24rem);line-height:1.4; color:var(--navy);position:relative;list-style:none;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:.3rem;top:50%;transform:translateY(-50%); font-family:var(--mono);color:var(--copper);font-size:1.3rem;font-weight:400} .faq details[open] summary::after{content:"–"} .faq details p{padding:0 0 1.4rem;color:var(--muted);max-width:66ch;font-size:var(--fs-small);line-height:1.6} /* ---------- bande CTA ---------- */ .cta{background:var(--navy);color:#fff;text-align:center} .cta h2{color:#fff;max-width:22ch;margin-left:auto;margin-right:auto} .cta p{color:var(--ice-text);margin:0 auto 1.8rem;max-width:56ch} .cta .btn-primary{font-size:var(--fs-lede);padding:1rem 2.1rem} .cta-direct{margin-top:1.7rem;font-size:var(--fs-small);color:var(--ice-muted)} .cta-direct a{color:var(--ice-text);text-decoration:underline} /* ---------- formulaire ---------- */ .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.4rem,3vw,2.2rem);box-shadow:var(--shadow)} .field{margin-bottom:1.1rem} .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} @media (max-width:560px){.row2{grid-template-columns:1fr}} label{display:block;font-size:var(--fs-micro);font-weight:600;color:var(--navy);margin-bottom:.4rem} label .req{color:var(--copper)} input,textarea,select{width:100%;font-family:inherit;font-size:max(16px,var(--fs-small));color:var(--ink); border:1.5px solid var(--line);border-radius:8px;padding:.75rem .9rem;background:#fff;transition:border-color .15s} input:focus,textarea:focus,select:focus{border-color:var(--copper);outline:none;box-shadow:0 0 0 3px rgba(194,112,61,.14)} textarea{min-height:130px;resize:vertical} .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-note{font-size:var(--fs-micro);color:var(--muted);margin-top:1.1rem;line-height:1.5} .form-msg{padding:.95rem 1.15rem;border-radius:8px;font-size:var(--fs-small);margin-top:1rem} .form-msg.err{background:#FDF0EE;color:#8C2F1F;border:1px solid #F0C9C1} .form-msg.ok{background:#EDF6EF;color:#1F5C32;border:1px solid #C3E0CB} /* ---------- pied de page ---------- */ footer{background:var(--navy-3);color:#A9BDDE;padding:clamp(44px,5vw,72px) 0 2.2rem;font-size:var(--fs-small)} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2rem;padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.09)} @media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:480px){.foot-grid{grid-template-columns:1fr}} footer h4{color:#fff;font-family:var(--sans);font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;margin-bottom:1rem} footer ul{list-style:none;display:flex;flex-direction:column;gap:.5rem} footer a{color:#A9BDDE;text-decoration:none} footer a:hover{color:#fff;text-decoration:underline} footer .foot-brand p{color:#A9BDDE;max-width:34ch;margin-top:.8rem;line-height:1.55} .foot-bottom{padding-top:1.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--fs-micro);line-height:1.6} /* ---------- révélation ---------- */ .js .reveal{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease} .js .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none}} /* ---------- impression ---------- */ @media print{ .nav,.cta,.hero-cta,footer .foot-grid,.btn{display:none!important} body{font-size:11pt;color:#000} .hero,.hero-sub{background:#fff!important;color:#000!important} .hero h1,.hero-sub h1{color:#000!important} .hero p,.hero-sub .claim{color:#333!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} } /* ============================================================ Utilitaires : remplacent tout style en ligne, afin que la Content-Security-Policy puisse rester en style-src 'self' (aucun 'unsafe-inline' nécessaire). ============================================================ */ .u-mt0{margin-top:0} .u-mt-xs{margin-top:.6rem} .u-mt-sm{margin-top:1rem} .u-mt-md{margin-top:1.6rem} .u-mt-lg{margin-top:2.2rem} .u-mb-sm{margin-bottom:.8rem} .u-m0{margin:0} .u-pt0{padding-top:0} .band{background:var(--ice-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .note{font-size:var(--fs-small);color:var(--muted)} .note-sm{font-size:var(--fs-micro);color:var(--muted);margin-top:2rem;line-height:1.6} .h-sub{font-size:clamp(1.3rem,1.2rem + .4vw,1.6rem);margin-top:0} .logo-name-light{color:#fff} .on-navy{color:var(--ice-text)} .on-navy strong{color:#fff} .claim-quote{font-family:var(--serif);font-size:clamp(1.2rem,1.1rem + .5vw,1.55rem);line-height:1.45;color:var(--navy);font-style:italic;margin:1rem 0 1.6rem} .box-white{background:#fff} .cols-start{align-items:start;gap:2.4rem} .nav-pv{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1rem;padding-bottom:2.6rem;font-size:var(--fs-small)} .nav-pv a{color:var(--navy);font-weight:600;text-decoration:none} .nav-pv a:hover{color:var(--copper);text-decoration:underline} .offre .btn-outline{margin-bottom:.8rem} mark.todo{background:#FDF0EE;color:#8C2F1F;padding:.1em .35em;border-radius:3px;font-family:var(--mono);font-size:.85em} .grid-4{grid-template-columns:repeat(auto-fit,minmax(212px,1fr))} /* ============================================================ Adaptation par type d'appareil La taille de base est déjà fluide (html{font-size:clamp(...)}). Les règles ci-dessous n'ajustent que la mise en page. ============================================================ */ /* Téléphone : jusqu'à 560 px */ @media (max-width:560px){ :root{--pad:52px} .hero{padding:clamp(48px,12vw,64px) 0 clamp(44px,10vw,56px)} .hero h1{max-width:none} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{justify-content:center} .table-device{margin-top:34px} .tldr{padding:1.4rem 1.3rem} .card,.offre{padding:1.45rem 1.35rem} .qlist li{padding-left:2.4rem} .stats-grid{grid-template-columns:1fr 1fr;gap:1.4rem} .stat b{font-size:1.6rem} } /* Tablette : 561 à 1024 px */ @media (min-width:561px) and (max-width:1024px){ :root{--wrap:100%} .wrap{max-width:760px} .wrap-narrow{max-width:680px} .grid-4{grid-template-columns:1fr 1fr} .offres{grid-template-columns:1fr 1fr} } /* PC : écran standard, 1025 à 1439 px : valeurs par défaut */ /* Les quatre cartes 4C passent sur deux rangées en deçà de 1200 px : à quatre colonnes, le texte s'y comprime. */ @media (max-width:1200px){.grid-4{grid-template-columns:repeat(2,1fr)}} /* Écran large : 1440 px et plus */ @media (min-width:1440px){ :root{--wrap:1260px;--wrap-narrow:min(900px,100%)} .grid{gap:1.6rem} .offres{gap:1.8rem} } /* Très large : 1800 px et plus : on cesse d'élargir, on aère */ @media (min-width:1800px){ :root{--wrap:1340px;--pad:126px} } /* Le bouton de la barre de navigation ne suit pas l'agrandissement général : au-delà d'une certaine taille il déséquilibre la barre. */ .nav-links .btn-primary{font-size:var(--fs-micro);padding:.62rem 1.25rem;white-space:nowrap} /* Correction de spécificité : « .nav-links a » l'emportait sur « .btn-primary » et repeignait le libellé du bouton en gris sur fond cuivre. */ .nav-links a.btn-primary{color:#fff} .nav-links a.btn-primary:hover{color:#fff} /* ============================================================ Accessibilité : contrastes Le cuivre de marque (#C2703D) donne 3,7:1 sur blanc : suffisant pour un trait ou une bordure, insuffisant pour du texte (WCAG AA exige 4,5:1). On garde donc le cuivre de marque partout où il n'y a pas de texte, et on utilise une variante plus dense dès qu'il s'agit de lire : même famille, même impression à l'œil, 5:1 de contraste. ============================================================ */ :root{--copper-txt:#A85A2E} .eyebrow{color:var(--copper-txt)} .card .rank,.offre .duree,.duree,label .req,.faq summary::after{color:var(--copper-txt)} .btn-primary{background:var(--copper-txt);box-shadow:0 6px 18px -6px rgba(168,90,46,.5)} .btn-primary:hover{background:#8C4A24} .nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:#fff} .offre .tag{color:var(--copper-txt)} .qlist li::before{color:var(--copper-txt)} .nav-pv a:hover{color:var(--copper-txt)} /* Texte sur fond marine : la règle générique des listes repeignait en gris les puces placées dans un encadré sombre. */ .on-navy,.on-navy li,.on-navy p,.box-navy p,.box-navy li{color:var(--ice-text)} .box-navy strong,.on-navy strong{color:#fff} /* Le cuivre clair reste réservé aux fonds sombres, où il contraste à 5,3:1 */ .eyebrow-light{color:var(--copper-l)} /* ============================================================ Page Offres : mise en avant Cinq offres réparties en trois colonnes donnaient des cartes étroites et une case vide. L'offre phare passe donc en pleine largeur, en tête, et les quatre autres se rangent en deux colonnes : une porte, puis un couloir. ============================================================ */ @media (min-width:900px) and (max-width:1150px){ .offres{grid-template-columns:repeat(2,1fr)} } @media (min-width:1151px){ .offres{grid-template-columns:repeat(3,1fr)} } /* Le libellé d'offre est une étiquette, pas un bandeau : il s'ajuste à son texte. */ .offre .tag{align-self:flex-start} /* État de confirmation après envoi du formulaire */ .confirm{text-align:left} .confirm:focus{outline:none} .confirm-marque{width:2.6rem;height:2.6rem;border-radius:50%;background:#EDF6EF;color:#1F5C32; display:flex;align-items:center;justify-content:center;font-size:1.3rem;font-weight:700;margin-bottom:1.1rem} .confirm h2{font-size:clamp(1.3rem,1.2rem + .4vw,1.6rem);margin:0 0 .8rem} .confirm p{max-width:46ch} .confirm p+p{margin-top:.8rem} .confirm .note a{color:var(--copper-txt);font-weight:600} /* ============================================================ Offre phare : les six interventions en tuiles ============================================================ */ .phare{border:1.5px solid var(--navy);border-radius:var(--radius); padding:clamp(1.6rem,3vw,2.6rem);background:#fff;box-shadow:var(--shadow)} .tag-phare{background:var(--navy);color:#fff;display:inline-block;font-family:var(--mono); font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase; padding:.32rem .7rem;border-radius:4px;font-weight:600;margin-bottom:.9rem} .phare h2{margin-top:0} .tuiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));margin-top:1.8rem} .tuile{display:flex;flex-direction:column;text-decoration:none;background:var(--ice-2); border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.35rem; transition:border-color .16s,box-shadow .16s,transform .16s,background .16s} .tuile:hover{border-color:var(--copper-txt);background:#fff;box-shadow:var(--shadow);transform:translateY(-2px)} .tuile .rank{font-family:var(--mono);font-size:var(--fs-micro);letter-spacing:.1em; color:var(--copper-txt);font-weight:600} .tuile h3{margin:.5rem 0 .55rem;font-size:1.08rem;line-height:1.3} .tuile-gain{color:var(--muted);font-size:var(--fs-micro);line-height:1.55;margin-bottom:1rem;max-width:none} .tuile-prix{margin-top:auto;padding-top:.85rem;border-top:1px solid var(--line); display:flex;align-items:baseline;gap:.45rem;flex-wrap:wrap;max-width:none} .tuile-prix b{font-family:var(--serif);font-size:1.35rem;color:var(--navy);line-height:1.1} .tuile-prix span{font-size:var(--fs-micro);color:var(--muted)} .tuile .more{padding-top:.7rem;font-size:var(--fs-micro);font-weight:600;color:var(--navy)} .tuile .more::after{content:" →";color:var(--copper-txt)} /* ============================================================ Sceau « engagement de résultat » ============================================================ */ .sceau{display:flex;align-items:center;gap:1.2rem;margin:0 0 1.4rem; padding:1rem 1.2rem;border:1px solid var(--line);border-left:3px solid var(--copper-txt); border-radius:0 var(--radius) var(--radius) 0;background:var(--copper-bg)} .sceau svg{width:104px;height:104px;flex:0 0 104px;color:var(--copper-d)} .sceau figcaption{font-size:var(--fs-micro);line-height:1.55;color:#5F3D22} .sceau figcaption b{color:var(--copper-d)} .sceau figcaption a{color:var(--copper-d);font-weight:600} .offre.avec-sceau{border-color:var(--navy);border-width:1.5px;box-shadow:var(--shadow)} /* Le sceau se met en colonne dès que sa carte devient étroite, quelle que soit la largeur de l'écran. */ @container (max-width: 420px){ .sceau{flex-direction:column;align-items:flex-start;gap:.9rem} .sceau svg{width:84px;height:84px;flex-basis:84px} } @media (max-width:560px){ .sceau{flex-direction:column;align-items:flex-start;gap:.9rem} .sceau svg{width:84px;height:84px;flex-basis:84px} }