/* VotreSiteWeb.be - feuille de style commune à toutes les pages. Les règles propres à une seule page sont regroupées par section ; quelques ajustements par page utilisent la classe posée sur (ex. .page-index, .page-contact). */ @import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap"); :root{color-scheme:light;--navy:#1F3B6E;--navy-hover:#2F5088;--navy-soft:#32497A;--navy-muted:#3A5482;--bg:#F0F6FE;--surface:#FFFFFF;--ink:#1F3B6E;--muted:#4A628C;--line:#C5D7F0;--sun:#FFC533;--on-sun:var(--navy);--link:#1D5AC8;--tint:#D8E7FA;--display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;--body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} :root.page-contact{--err:#B3261E} /* Mode nuit (bouton du menu) : palette Denim, mémorisée dans le navigateur */ :root[data-theme="dark"]{color-scheme:dark;--bg:#22375F;--surface:#2C4473;--ink:#F2F6FD;--muted:#BCCAE3;--line:#41598A;--link:#A9C8FF;--tint:#283F69} :root.page-contact[data-theme="dark"]{--err:#FF9C94} *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.6 var(--body);-webkit-font-smoothing:antialiased} img,svg{max-width:100%} a{color:var(--link)} :focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:4px} .wrap{width:min(1160px,100% - 2*clamp(1rem,4vw,2.5rem));margin-inline:auto} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .skip{position:absolute;left:1rem;top:1rem;z-index:100;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border-radius:8px;background:var(--ink);color:var(--bg)} .skip:focus{width:auto;height:auto;padding:.6rem 1rem;overflow:visible;clip:auto;clip-path:none;white-space:normal} /* ===== En-tête ===== */ .site-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.25rem} .site-header{position:sticky;top:0;z-index:50;transition:box-shadow .25s ease} /* Le fond de la barre est une couche à part (::before) : ainsi la barre elle-même n'a pas de flou, et le menu déroulant du mobile, lui aussi en verre, voit bien la page derrière lui (un flou ne traverse pas un parent qui a déjà un flou). */ .site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--bg);transition:background-color .25s ease,-webkit-backdrop-filter .25s ease,backdrop-filter .25s ease} .site-header.is-scrolled{box-shadow:0 1px 0 var(--line),0 8px 24px -12px rgba(0,0,0,.25)} /* Effet verre : très légère transparence + flou, seulement une fois la page défilée (la hauteur du menu ne change jamais) */ @supports (background:color-mix(in srgb,red,blue)) and ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-header.is-scrolled::before{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)} /* Menu déroulant du mobile : même effet verre */ @media (max-width:899px){ .site-header .nav{background:color-mix(in srgb,var(--surface) 86%,transparent);-webkit-backdrop-filter:blur(12px) saturate(1.5);backdrop-filter:blur(12px) saturate(1.5)} } } :root{--header-offset:5rem} html{scroll-padding-top:calc(var(--header-offset) + .5rem)} .brand{display:inline-flex;align-items:center;gap:.6rem;font:800 1.4rem/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-decoration:none} .logo{display:block;flex:none;width:2.1rem;height:2.1rem;transition:transform .3s ease} .logo .cursor{transition:transform .3s ease} .brand:hover .logo,.brand:focus-visible .logo{transform:rotate(-5deg)} .brand:hover .logo .cursor,.brand:focus-visible .logo .cursor{transform:translate(1.5px,1.5px)} .brand span{color:var(--muted);font-weight:500} .nav ul{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0;padding:0} .nav a{display:inline-block;padding:.35rem 0 calc(.35rem + 3px);color:var(--ink);text-decoration:none;font-weight:500;background:linear-gradient(var(--sun),var(--sun)) 0 100%/0 3px no-repeat;transition:background-size .28s ease} .nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{background-size:100% 3px} .nav a.lang,.nav a.lang:hover,.nav a.lang:focus-visible{background:none} .nav .lang{display:inline-flex;align-items:center;justify-content:center;line-height:0;border:1px solid var(--line);border-radius:999px;padding:.32rem .55rem} .flag{display:block;flex:none;max-width:none;width:1.55rem;height:1.05rem;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.2)} .lang[data-target="en"] .flag-fr,.lang[data-target="fr"] .flag-gb{display:none} .nav .lang:hover{border-color:var(--ink)} .menu-btn{display:none;background:transparent;border:2px solid var(--ink);color:var(--ink);border-radius:999px;padding:.45rem 1rem;font:600 .95rem var(--body);cursor:pointer} @media (max-width:899px){ .menu-btn{display:inline-block} .nav{display:block;visibility:hidden;pointer-events:none;opacity:0;transform:translateY(-8px);clip-path:inset(0 0 100% 0 round 14px);position:absolute;top:100%;left:0;right:0;z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:.75rem 1.25rem;transition:clip-path .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),opacity .18s ease,visibility 0s linear .3s} .nav.open{visibility:visible;pointer-events:auto;opacity:1;transform:none;clip-path:inset(0 0 0 0 round 14px);transition-delay:0s} .nav ul{flex-direction:column;align-items:flex-start;gap:.35rem} .nav a{padding:.5rem 0} .nav li{opacity:0;transform:translateY(-6px);transition:opacity .16s ease,transform .2s ease} .nav.open li{opacity:1;transform:none;transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1)} .nav.open li:nth-child(1){transition-delay:0.04s} .nav.open li:nth-child(2){transition-delay:0.075s} .nav.open li:nth-child(3){transition-delay:0.11s} .nav.open li:nth-child(4){transition-delay:0.145s} .nav.open li:nth-child(5){transition-delay:0.18s} .nav.open li:nth-child(6){transition-delay:0.215s} .nav.open li:nth-child(7){transition-delay:0.25s} } /* ===== Boutons ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1.5rem;border-radius:999px;border:2px solid var(--ink);font:600 1rem var(--body);color:var(--ink);text-decoration:none;cursor:pointer;transition:background-color .15s} .btn:hover{background:var(--tint)} .btn-primary{background:var(--sun);border-color:var(--sun);color:var(--on-sun)} .btn-primary:hover{background:#FFD25E;border-color:#FFD25E} .actions{display:flex;flex-wrap:wrap;gap:.75rem} /* ===== Hero ===== */ .hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(2rem,5vw,4.5rem);align-items:center;padding-block:clamp(1.5rem,5vw,4rem) clamp(3rem,7vw,5.5rem)} h1{margin:0 0 1rem;font:800 clamp(2.6rem,6vw,4.6rem)/1.02 var(--display);letter-spacing:-.028em;text-wrap:balance} .page-index h1{margin:0 0 1.25rem;font:800 clamp(2.5rem,5.3vw,4.3rem)/1.03 var(--display)} .page-a-propos h1{margin:0 0 .5rem} .lead{max-width:33rem;margin:0 0 1.75rem;font-size:1.2rem;color:var(--muted)} .rating-line{display:flex;align-items:center;gap:.6rem;margin:1.75rem 0 0;font-size:.95rem;color:var(--muted)} .stars{font-size:1.25rem;letter-spacing:.08em;color:var(--sun);-webkit-text-stroke:1px var(--ink)} /* ===== Démo responsive ===== */ .stage{background:var(--sun);border-radius:28px;padding:clamp(.75rem,2vw,1.25rem);height:clamp(20rem,42vw,27rem)} .stage-inner{width:100%;height:100%;display:flex;justify-content:center} .frame{height:100%;background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(21,33,58,.28);min-width:0} .chrome{flex:none;display:flex;align-items:center;gap:.35rem;height:1.9rem;padding-inline:.65rem;background:#E9EDF3} .chrome span{width:.5rem;height:.5rem;border-radius:50%;background:#B4BDCC;flex:none} .chrome em{margin-left:.5rem;font:500 .7rem var(--body);color:#4A5772;font-style:normal;white-space:nowrap;overflow:hidden} .viewport{position:relative;flex:1;overflow:hidden;background:#F6EFE3} .scaler{position:absolute;top:0;left:0;width:1200px;transform-origin:0 0;container-type:inline-size;container-name:site} .demo-tools{margin-top:1.1rem} .demo-tools p{margin:0 0 .8rem;font-size:.95rem;color:var(--muted)} .controls{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.1rem} .seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;overflow:hidden} .seg button{background:transparent;color:var(--ink);border:0;padding:.5rem 1rem;font:600 .92rem var(--body);cursor:pointer} .seg button+button{border-left:2px solid var(--ink)} .seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)} .range-wrap{flex:1;min-width:9rem;display:flex;align-items:center;gap:.9rem} input[type=range]{flex:1;min-width:6rem;accent-color:var(--ink);height:1.75rem} output{min-width:9.5rem;font:600 .9rem var(--body);color:var(--ink);text-align:right} /* ===== Faux site (exemple) ===== */ .mini{--g:#2F5D50;--cream:#F6EFE3;--dark:#1E2A26;min-height:560px;background:var(--cream);color:var(--dark);font:500 20px/1.45 var(--body)} .m-head{display:flex;align-items:center;justify-content:space-between;padding:22px 40px;border-bottom:2px solid var(--dark)} .m-head b{font:800 30px var(--display);letter-spacing:-.02em} .m-nav{display:flex;gap:32px;font-weight:600} .m-burger{display:none;width:34px;flex-direction:column;gap:6px} .m-burger i{display:block;height:4px;border-radius:2px;background:var(--dark)} .m-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:56px 40px} .m-hero h3{margin:0 0 18px;font:800 64px/1.02 var(--display);letter-spacing:-.03em} .m-hero p{margin:0 0 26px;font-size:22px} .m-btn{display:inline-block;padding:14px 28px;border-radius:999px;background:var(--g);color:#fff;font-weight:700} .m-wood{height:260px;border-radius:18px;background:repeating-linear-gradient(90deg,#C79A62 0 46px,#B98851 46px 50px,#D3A971 50px 98px,#B98851 98px 102px)} .m-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:0 40px 56px} .m-card i{display:block;height:130px;border-radius:14px;margin-bottom:14px} .m-card:nth-child(1) i{background:#2F5D50} .m-card:nth-child(2) i{background:#C79A62} .m-card:nth-child(3) i{background:#1E2A26} .m-card h4{margin:0 0 4px;font:700 26px var(--display)} .m-card p{margin:0} @container site (max-width:899px){ .m-nav{gap:20px;font-size:18px} .m-hero{grid-template-columns:1fr} .m-hero h3{font-size:54px} .m-wood{height:150px} .m-grid{grid-template-columns:1fr 1fr} } @container site (max-width:599px){ .m-nav{display:none} .m-burger{display:flex} .m-head{padding:20px 24px} .m-hero{padding:36px 24px} .m-hero h3{font-size:48px} .m-wood{display:none} .m-grid{grid-template-columns:1fr;padding:0 24px 40px} } /* ===== Sections ===== */ /* ===== Liste des services ===== */ .section{padding-block:clamp(2rem,5vw,3.5rem)} .page-index .section{padding-block:clamp(3rem,7vw,5.5rem)} .page-services .section{padding-block:clamp(1.5rem,4vw,2.5rem)} .section.tinted{background:var(--tint)} h2{margin:0 0 1.5rem;font:700 clamp(1.7rem,3.2vw,2.4rem)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance} .page-index h2{margin:0 0 2rem;max-width:24ch;font:700 clamp(1.9rem,3.6vw,2.8rem)/1.1 var(--display)} .page-portfolio h2{margin:0 0 1.75rem} .page-a-propos h2{margin:0 0 1rem} .page-services h2{margin:0;font:700 clamp(1.5rem,2.8vw,2.1rem)/1.1 var(--display)} .page-contact h2{margin:0 0 1.25rem;font:700 clamp(1.5rem,2.8vw,2.1rem)/1.1 var(--display)} .offer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))} .offer>div{padding-inline:clamp(1rem,2.5vw,2.25rem)} .offer>div:first-child{padding-left:0} .offer>div:last-child{padding-right:0} .offer>div+div{border-left:1px solid var(--line)} .offer h3{margin:0 0 1.4rem;font:700 1.4rem/1.2 var(--display)} .offer ul{display:grid;gap:1.35rem;margin:0;padding:0;list-style:none} .offer li strong{display:block;font-weight:700} .offer li span{color:var(--muted)} @media (max-width:859px){ .offer{grid-template-columns:1fr;gap:2.25rem} .offer>div,.offer>div:first-child,.offer>div:last-child{padding:0} .offer>div:nth-child(n+2){border-left:0;border-top:1px solid var(--line);padding-top:2.25rem} } .tabs [role=tablist]{display:flex;flex-wrap:wrap;column-gap:1.75rem;border-bottom:1px solid var(--line)} .tabs [role=tab]{margin:0;padding:.9rem 0 .8rem;background:none;border:0;border-bottom:4px solid transparent;font:700 clamp(1.05rem,2.2vw,1.35rem) var(--display);color:var(--muted);cursor:pointer} .tabs [role=tab][aria-selected=true]{color:var(--ink);border-bottom-color:var(--sun)} .tabs [role=tabpanel]{max-width:40rem;padding-top:1.75rem;font-size:1.2rem} .tabs [role=tabpanel] p{margin:0 0 1.5rem} .reviews{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start} .score{display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem 1rem;margin-bottom:1.75rem} .score strong{font:800 clamp(3rem,7vw,4.8rem)/1 var(--display);letter-spacing:-.03em} .score span{color:var(--muted)} .feature{margin:0} .feature blockquote{margin:0 0 1.25rem;font:500 clamp(1.4rem,2.6vw,2rem)/1.3 var(--display);letter-spacing:-.01em} .feature figcaption,.quote figcaption{font-weight:700} .quotes{display:grid} .quote{margin:0;padding:1.4rem 0;border-top:1px solid var(--line)} .quote:first-child{border-top:0;padding-top:0} .quote blockquote{margin:0 0 .5rem} @media (max-width:859px){ .reviews{grid-template-columns:1fr} .quote:first-child{border-top:1px solid var(--line);padding-top:1.4rem} } /* ===== Bandeau contact ===== */ .band{background:var(--sun);color:var(--navy);padding-block:clamp(3rem,7vw,5rem)} .page-portfolio .band,.page-tarifs .band{margin-top:clamp(2rem,5vw,3.5rem)} .band h2{max-width:24ch;margin-bottom:1rem;font-size:clamp(1.9rem,3.6vw,2.8rem)} .band .btn{border-color:var(--navy);color:var(--navy)} .band .btn:hover{background:color-mix(in srgb,var(--navy) 10%,transparent)} .band .btn-primary{background:var(--navy);border-color:var(--navy);color:#fff} .band .btn-primary:hover{background:var(--navy-hover);border-color:var(--navy-hover)} .band :focus-visible{outline-color:var(--navy)} /* ===== Pied de page ===== */ .foot{padding-block:2.5rem 3rem;color:var(--muted);font-size:.95rem} .foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.5rem 3rem} @media (max-width:899px){ .hero{grid-template-columns:1fr} .stage{height:clamp(19rem,62vw,26rem)} } @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} .btn{transition:none} } /* ===== Animations de texte (sobres) ===== */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.65,.2,1) var(--d,0s),transform .7s cubic-bezier(.2,.65,.2,1) var(--d,0s)} .js .reveal.in{opacity:1;transform:none} .js .reveal.reveal-soft{transform:none} .js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em 0 .16em;margin:-.12em 0 -.16em} .js [data-split] .wi{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.2,.65,.2,1) calc(var(--i) * 60ms + .05s)} .js [data-split].in .wi{transform:none} .js [data-split] .wi.mk{padding-bottom:.06em;background:linear-gradient(var(--sun),var(--sun)) 0 100%/0 .13em no-repeat;transition:transform .8s cubic-bezier(.2,.65,.2,1) calc(var(--i) * 60ms + .05s),background-size .7s ease calc(var(--i) * 60ms + .75s)} .js [data-split].in .wi.mk{background-size:100% .13em} .js .tabs [role=tabpanel]:not([hidden]){animation:tabin .5s cubic-bezier(.2,.65,.2,1) both} @media (prefers-reduced-motion: reduce){ .js .reveal,.js [data-split] .wi{opacity:1;transform:none;transition:none} .js [data-split] .wi.mk{background-size:100% .13em} .js .tabs [role=tabpanel]:not([hidden]){animation:none} .nav a{transition:none} } /* ===== Titre de page ===== */ /* ===== Document juridique ===== */ .page-head{padding-block:clamp(1.5rem,5vw,3.5rem) clamp(1.5rem,4vw,2.5rem)} .page-head p{margin:0;max-width:64rem;font-size:1.2rem;color:var(--muted);text-wrap:balance} /* ===== Monogrammes ===== */ .mono{display:grid;place-items:center;flex:none;font-family:var(--display);font-weight:800;letter-spacing:-.03em;border-radius:14px} .t-sun{background:#FFC533;color:var(--navy)} .t-navy{background:var(--navy);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} .t-blue{background:#2F5BC7;color:#fff} .t-pale{background:#DDE5F5;color:var(--navy)} /* ===== Sites à la une ===== */ .featured{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.25rem)} .feat{display:block;color:inherit;text-decoration:none} .feat-img{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:18px;background:var(--tint)} .feat-img img{display:block;width:100%;height:100%;object-fit:cover} .feat .desc{display:block;margin:.35rem 0 .55rem;color:var(--muted)} .feat h3{margin:1rem 0 .1rem;font:700 1.5rem/1.2 var(--display);letter-spacing:-.01em} .feat .dom{color:var(--muted);word-break:break-word} .feat .go{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;font-weight:600;color:var(--link);border-bottom:2px solid transparent} .feat:hover .go,.feat:focus-visible .go{border-bottom-color:currentColor} .feat:hover .feat-img{outline:3px solid var(--sun);outline-offset:3px} /* ===== Autres sites ===== */ .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(1.5rem,5vw,4rem);margin:0;padding:0;list-style:none} .row{border-top:1px solid var(--line);padding:1rem 0} .row a.link{display:flex;align-items:flex-start;gap:1rem;color:var(--ink);text-decoration:none} .row .mono{width:3rem;height:3rem;font-size:1.3rem;border-radius:10px} .row .txt{flex:1;min-width:0;display:grid;gap:.2rem} .row .dom{font:800 1.15rem/1.3 var(--display);overflow-wrap:anywhere} .row .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--muted);font-size:.95rem;line-height:1.45} .row .go{padding-top:.2rem;white-space:nowrap;display:inline-flex;align-items:center;gap:.4rem;font-weight:600;color:var(--link);border-bottom:2px solid transparent} .row a.link:hover .go,.row a.link:focus-visible .go{border-bottom-color:currentColor} .row a.link:hover .dom{text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px} .ext{width:1rem;height:1rem;flex:none} /* ===== Projets en cours ===== */ @media (max-width:759px){ .featured{grid-template-columns:1fr} .list{grid-template-columns:1fr} } /* ===== Tableau des offres ===== */ .table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface)} .table-scroll table{width:100%;min-width:700px;border-collapse:separate;border-spacing:0} .table-scroll thead th{padding:1.5rem 1.1rem 1.25rem;text-align:left;vertical-align:bottom;font-weight:400;border-bottom:1px solid var(--line)} .table-scroll thead th:first-child{width:36%;position:sticky;left:0;z-index:2;background:var(--surface)} .table-scroll thead th.best{background:var(--sun);color:var(--navy)} .badge{display:inline-block;margin-bottom:.6rem;padding:.15rem .7rem;border-radius:999px;background:var(--navy);color:#fff;font:600 .82rem var(--body)} .offer-name{display:block;font:800 1.55rem/1.1 var(--display);letter-spacing:-.01em} .offer-tag{display:block;margin-top:.15rem;color:var(--muted)} th.best .offer-tag{color:var(--navy-soft)} .price{display:block;margin-top:.9rem;font:800 clamp(2rem,4vw,2.8rem)/1 var(--display);letter-spacing:-.03em;white-space:nowrap} .lead-col{color:var(--muted);font-size:.98rem} .table-scroll tbody th[scope=row]{position:sticky;left:0;z-index:1;background:var(--surface);padding:.85rem 1.1rem;text-align:left;font-weight:500;border-bottom:1px solid var(--line)} .table-scroll tbody td{padding:.85rem 1.1rem;text-align:center;border-bottom:1px solid var(--line)} .table-scroll tbody td.best{background:var(--tint)} .table-scroll tr.group th{position:static;padding:1.75rem 1.1rem .6rem;text-align:left;font:700 1.05rem var(--display);background:var(--surface);border-bottom:2px solid var(--ink)} .table-scroll tbody tr:last-child th,.table-scroll tbody tr:last-child td{border-bottom:0} .ck{width:1.6rem;height:1.6rem;vertical-align:middle} .no{color:var(--muted)} .caption{margin:1rem 0 0;color:var(--muted);font-size:.98rem} @media (max-width:759px){ } /* ===== Notes ===== */ .notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,5vw,4rem)} .notes h3{margin:0 0 .5rem;font:700 1.3rem/1.2 var(--display)} .notes p{margin:0;max-width:34rem;color:var(--muted)} .notes strong{color:var(--ink);font-weight:600} @media (max-width:759px){ .notes{grid-template-columns:1fr} } /* ===== Présentation ===== */ .about{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,6vw,5.5rem);align-items:start;padding-block:clamp(1.5rem,5vw,3.5rem) clamp(2.5rem,6vw,4.5rem)} .role{margin:0 0 2rem;font:500 clamp(1.15rem,2vw,1.4rem)/1.3 var(--display);color:var(--muted)} .intro{margin:0 0 1.5rem;max-width:34rem;font:500 clamp(1.4rem,2.6vw,1.9rem)/1.3 var(--display);letter-spacing:-.01em} .text{margin:0;max-width:34rem;font-size:1.15rem;color:var(--muted)} .portrait{aspect-ratio:4/3;overflow:hidden;border-radius:24px;background:var(--tint)} .portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 22%} .facts{margin:1.5rem 0 0} .facts div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.85rem 0;border-top:1px solid var(--line)} .facts div:last-child{border-bottom:1px solid var(--line)} .facts dt{color:var(--muted)} .facts dd{margin:0;font-weight:600} .facts ul{display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;margin:0;padding:0;list-style:none} .facts a{color:var(--ink)} /* ===== Motivation + avis ===== */ .band-tint{background:var(--tint);padding-block:clamp(2.5rem,6vw,4.5rem)} .why{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start} .why p{margin:0;max-width:34rem;font-size:1.15rem} .band p{max-width:34rem;margin:0 0 1.75rem;font-size:1.2rem} .pullquote{margin:0} .pullquote blockquote{margin:0 0 1rem;font:500 clamp(1.3rem,2.4vw,1.8rem)/1.3 var(--display);letter-spacing:-.01em} .pullquote figcaption{font-weight:700} @media (max-width:859px){ .about,.why{grid-template-columns:1fr} .portrait{aspect-ratio:16/9} } @media (max-width:480px){ .facts div{grid-template-columns:1fr;gap:.1rem} } .svc-group{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(1rem,5vw,4rem);padding-block:clamp(1.5rem,4vw,2.5rem);border-top:2px solid var(--ink)} .svc-group p{margin:.6rem 0 0;color:var(--muted);max-width:20rem} .services{margin:0;padding:0;list-style:none} .services li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.25rem 1.5rem;padding:1rem 0;border-bottom:1px solid var(--line)} .services li:first-child{padding-top:0} .services li:last-child{border-bottom:0;padding-bottom:0} .services strong{font:700 clamp(1.15rem,2vw,1.45rem)/1.25 var(--display);letter-spacing:-.01em} .services span{color:var(--muted)} .services a{font-weight:600} /* ===== Besoin d'aide ===== */ .help{background:var(--tint);padding-block:clamp(3rem,7vw,5rem);margin-top:clamp(1.5rem,4vw,2.5rem)} .help h2{margin-bottom:.75rem;font-size:clamp(1.9rem,3.6vw,2.8rem)} .help .sub{max-width:34rem;margin:0 0 2.5rem;font-size:1.15rem;color:var(--muted)} .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin:0;padding:0;list-style:none} .steps li{position:relative} .steps li:not(:last-child)::after{content:"";position:absolute;top:1.4rem;left:4rem;right:calc(-1 * clamp(1.5rem,4vw,3rem) + .5rem);border-top:2px dashed var(--muted);opacity:.5} .num{display:grid;place-items:center;width:2.8rem;height:2.8rem;margin-bottom:1.1rem;border-radius:50%;background:var(--sun);color:var(--navy);font:800 1.3rem var(--display)} .steps h3{margin:0 0 .4rem;font:700 1.3rem/1.25 var(--display)} .steps p{margin:0 0 1.1rem;color:var(--muted)} .notice{max-width:40rem;margin:2.5rem 0 0;padding:1rem 1.25rem;border-left:4px solid var(--sun);background:var(--surface);border-radius:0 12px 12px 0;color:var(--muted);font-size:.98rem} .notice strong{color:var(--ink)} .foot strong{color:var(--ink)} @media (max-width:859px){ .svc-group{grid-template-columns:1fr} .svc-group p{max-width:none} .steps{grid-template-columns:1fr} .steps li:not(:last-child)::after{display:none} } .btn[disabled]{opacity:.6;cursor:progress} /* ===== Mise en page ===== */ .contact{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-bottom:clamp(3rem,7vw,5.5rem)} /* ===== Formulaire ===== */ form{display:grid;gap:1.4rem} fieldset{margin:0;padding:0;border:0;min-width:0} legend,.label{display:block;margin-bottom:.4rem;padding:0;font-weight:600} .req{color:var(--muted);font-weight:500} .pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .field small{display:block;margin-top:.3rem;color:var(--muted);font-size:.92rem} form input[type=text],form input[type=email],form input[type=tel],form textarea{width:100%;padding:.8rem 1rem;border:2px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit} form textarea{min-height:10rem;resize:vertical} form input:hover,form textarea:hover{border-color:var(--muted)} form input:focus,form textarea:focus{outline:3px solid var(--link);outline-offset:1px;border-color:var(--ink)} [aria-invalid="true"]{border-color:var(--err)!important} .error{display:none;margin-top:.35rem;color:var(--err);font-size:.95rem;font-weight:600} .error.show{display:block} .check{display:flex;align-items:flex-start;gap:.75rem;color:var(--muted)} .check input{flex:none;width:1.3rem;height:1.3rem;margin-top:.2rem;accent-color:var(--ink)} .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .legal{margin:0;color:var(--muted);font-size:.92rem} .status{display:none;padding:1rem 1.25rem;border-left:4px solid var(--sun);border-radius:0 12px 12px 0;background:var(--surface)} .status.show{display:block} .status.bad{border-left-color:var(--err)} .status strong{display:block} /* ===== Réservation ===== */ .book{--surface:#fff;--ink:var(--navy);--muted:var(--navy-muted);--line:#C9D1E0;--link:#1F4FBF;padding:clamp(1.5rem,3vw,2.25rem);border-radius:24px;background:var(--sun);color:var(--navy)} .book h2{margin-bottom:.9rem;font-size:clamp(1.6rem,3vw,2.2rem)} .book p{margin:0 0 1.5rem;font-size:1.1rem} .book .btn{border-color:var(--navy);background:var(--navy);color:#fff} .book .btn:hover{background:var(--navy-hover);border-color:var(--navy-hover)} .book :focus-visible{outline-color:var(--navy)} @media (max-width:859px){ .contact{grid-template-columns:1fr} .book{position:static} } @media (max-width:480px){ .pair{grid-template-columns:1fr} } .layout{display:grid;grid-template-columns:17rem minmax(0,44rem);gap:clamp(2rem,6vw,5rem);align-items:start;padding-bottom:clamp(3rem,7vw,5rem)} .toc{position:sticky;top:calc(var(--header-offset) + .5rem);max-height:calc(100vh - var(--header-offset) - 1.5rem);overflow:auto;padding-right:.5rem;font-size:.95rem} .toc summary{display:none} .toc ul{margin:0;padding:0;list-style:none} .toc a{display:block;padding:.28rem .75rem;border-left:2px solid var(--line);color:var(--muted);text-decoration:none} .foot a{color:var(--ink)} .toc a:hover{color:var(--ink);border-left-color:var(--muted)} .toc a[aria-current="true"]{border-left:4px solid var(--sun);padding-left:calc(.75rem - 2px);color:var(--ink);font-weight:600} .toc .group{margin-top:.9rem;font:700 1rem var(--display);color:var(--ink)} .toc li:first-child .group{margin-top:0} .toc ul ul a{padding-left:1.4rem} .toc ul ul a[aria-current="true"]{padding-left:calc(1.4rem - 2px)} .doc section{scroll-margin-top:0} .doc h2{margin:3.5rem 0 1.25rem;font:800 clamp(1.8rem,3.4vw,2.5rem)/1.1 var(--display);letter-spacing:-.02em;text-wrap:balance} .doc h3{margin:2.25rem 0 .75rem;font:700 1.3rem/1.25 var(--display);letter-spacing:-.01em} .doc p{margin:0 0 1rem} .foot p{margin:0} .doc ol{margin:0 0 1rem;padding-left:1.6rem} .doc li{margin:0 0 .6rem;padding-left:.3rem} .doc li::marker{color:var(--muted);font-weight:600} .doc ol ol{margin-top:.6rem} .doc ol.alpha{list-style:lower-alpha} .doc a{overflow-wrap:anywhere} .idcard{margin:1.75rem 0;padding:1.25rem 1.5rem;border-left:4px solid var(--sun);border-radius:0 14px 14px 0;background:var(--surface);font-style:normal;line-height:1.75} .idcard strong{font:700 1.2rem var(--display)} @media (max-width:899px){ .layout{grid-template-columns:1fr} .toc{position:static;max-height:none;overflow:visible;padding:0} .toc summary{display:list-item;cursor:pointer;padding:.7rem 1rem;border:2px solid var(--ink);border-radius:12px;font-weight:600;list-style-position:inside} .toc[open] summary{margin-bottom:.75rem} } @media print{ .site-header,.site-head,.toc,.skip,.foot ul{display:none} } .foot ul{display:flex;gap:1.25rem;margin:.9rem 0 0;padding:0;list-style:none} .foot .wrap>div{margin-left:auto;text-align:right} .foot ul{justify-content:flex-end} @media print{ body{background:#fff;color:#000} .layout{display:block} } @keyframes tabin{from{opacity:0;transform:translateY(10px)}} @media (prefers-reduced-motion: reduce){ .site-header,.site-header::before,.logo,.logo .cursor,.soc{transition:none} .nav,.nav li{transition:none!important} } /* ===== Langue (FR / EN) ===== */ html:not(.js) a.lang{display:none} html.i18n-wait body{visibility:hidden} /* ===== Réseaux sociaux ===== */ .soc{display:inline-flex;line-height:0;border-radius:50%;transition:transform .2s ease} .soc svg{display:block;flex:none;max-width:none;width:1.75rem;height:1.75rem} .soc:hover,.soc:focus-visible{transform:translateY(-2px)} /* ===== Bouton « Laisser un avis » ===== */ .reviews-cta{margin-top:2rem} /* ===== Prise de rendez-vous ===== */ .book .rdv-note{margin:0 0 1.1rem;font-size:1.05rem} .rdv{display:grid;gap:1.1rem} .rdv-step{margin:0;padding:0;border:0;min-width:0} .rdv-step legend{margin-bottom:.6rem;font:600 1.1rem/1.2 var(--display)} .book .error{color:#8A1C14} .cal{padding:.7rem .7rem .85rem;border-radius:16px;background:#fff} .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.35rem} .cal-title{font:600 1.05rem var(--display)} .cal-nav{width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:transparent;color:var(--navy);font-size:1.5rem;line-height:1;cursor:pointer} .cal-nav:hover:not(:disabled){background:#EEF1F8} .cal-nav:disabled{opacity:.3;cursor:default} .cal-grid{width:100%;min-width:0;border-collapse:collapse;table-layout:fixed} .cal-grid th{padding:.25rem 0;font:600 .72rem var(--body);color:#4A5772;text-align:center} .cal-grid td{padding:2px;text-align:center} .cal-day{display:block;width:100%;aspect-ratio:1;border:0;border-radius:50%;background:transparent;color:var(--navy);font:500 .95rem var(--body);cursor:pointer} .cal-day:hover:not(:disabled){background:#FFF1C7} .cal-day:disabled{color:#A6AEC0;cursor:default} .cal-day.is-today{box-shadow:inset 0 0 0 1.5px var(--navy)} .cal-day[aria-pressed="true"]{background:var(--navy);color:#fff} .slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem} .slot{padding:.6rem .25rem;border:2px solid var(--navy);border-radius:999px;background:#fff;color:var(--navy);font:600 .95rem var(--body);cursor:pointer} .slot:hover:not(:disabled){background:#FFF1C7} .slot[aria-checked="true"]{background:var(--navy);color:#fff} .slot:disabled{opacity:.35;border-style:dashed;cursor:default} .book .rdv-picked{margin:0 0 .9rem;font-size:1rem;font-weight:700} .rdv-fields{display:grid;gap:.9rem} .rdv-fields textarea{min-height:5.5rem} .book .rdv-fields .btn{width:100%} @media (prefers-reduced-motion: reduce){ .cal-nav,.cal-day,.slot{transition:none} } /* ===== Tarifs : affichage mobile (une offre à la fois, sans défilement horizontal) ===== */ .offer-tabs,.offer-summary{display:none} @media (max-width:859px){ .offer-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:1.1rem 0 1rem} .offer-tabs button{position:relative;display:flex;flex-direction:column;align-items:center;gap:.1rem;padding:.75rem .35rem;border:2px solid var(--ink);border-radius:14px;background:transparent;color:var(--ink);font:600 .95rem var(--body);cursor:pointer} .offer-tabs button[aria-selected="true"]{border-color:var(--sun);background:var(--sun);color:var(--navy)} .ot-name{font:800 1.15rem/1.1 var(--display)} .ot-badge{position:absolute;top:-.75rem;left:50%;transform:translateX(-50%);padding:.1rem .55rem;border-radius:999px;background:var(--ink);color:var(--bg);font:600 .68rem/1.4 var(--body);white-space:nowrap} .offers[data-offer="bronze"] .offer-summary[data-offer="bronze"], .offers[data-offer="argent"] .offer-summary[data-offer="argent"], .offers[data-offer="or"] .offer-summary[data-offer="or"]{display:block;margin-bottom:.75rem;padding:1rem 1.1rem 1.15rem;border:1px solid var(--line);border-radius:16px;background:var(--surface)} .offer-summary p{margin:0} .os-tag{font:800 1.2rem/1.2 var(--display)} .os-note{margin-top:.25rem!important;color:var(--muted)} .offer-summary .btn{width:100%;margin-top:.9rem} .table-scroll{overflow:visible;border:0;border-radius:0;background:transparent} .table-scroll table{min-width:0} .table-scroll thead{display:none} .table-scroll tbody th[scope=row]{position:static;background:transparent;padding:.7rem .75rem .7rem 0} .table-scroll tbody td{width:3rem;padding:.7rem 0 .7rem .5rem;text-align:right;background:transparent} .table-scroll tbody td.best{background:transparent} .table-scroll tr.group th{padding:1.5rem 0 .55rem;background:transparent} .offers[data-offer="bronze"] .table-scroll td:nth-child(3),.offers[data-offer="bronze"] .table-scroll td:nth-child(4), .offers[data-offer="argent"] .table-scroll td:nth-child(2),.offers[data-offer="argent"] .table-scroll td:nth-child(4), .offers[data-offer="or"] .table-scroll td:nth-child(2),.offers[data-offer="or"] .table-scroll td:nth-child(3){display:none} } /* ===== Pied de page : sur petit écran, tout à gauche ===== */ @media (max-width:640px){ .foot .wrap>div{margin-left:0;text-align:left} .foot ul{justify-content:flex-start} } /* ===== Bouton « mode nuit » (à côté du drapeau, dans le menu) ===== */ .nav .tools{display:flex;align-items:center;gap:.5rem} .nav .theme-btn{display:inline-flex;align-items:center;justify-content:center;padding:.32rem .55rem;border:1px solid var(--line);border-radius:999px;background:none;color:var(--ink);line-height:0;cursor:pointer} .nav .theme-btn:hover{border-color:var(--ink)} .theme-btn svg{display:block} .theme-btn .i-sun{display:none} :root[data-theme="dark"] .theme-btn .i-moon{display:none} :root[data-theme="dark"] .theme-btn .i-sun{display:block} html:not(.js) .theme-btn{display:none} /* ===== Page 404 : petit robot debout derrière un « muret » (ses jambes coupées sont cachées par le sol) ===== */ .err-stage{--floor:clamp(2rem,4vw,2.75rem);position:relative;overflow:hidden} .err-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:1rem 2rem} .err-text{align-self:center;padding-bottom:calc(var(--floor) * .6)} .err-bot{position:relative;z-index:1;width:clamp(112px,16.5vw,195px);margin-bottom:calc(-1 * var(--floor));line-height:0;animation:errRise .9s cubic-bezier(.2,.8,.2,1) both} .err-bot-in{position:relative;transform-origin:50% 100%;animation:errSway 5.5s ease-in-out .9s infinite} .err-bot img{display:block;width:100%;height:auto} .err-glow{position:absolute;left:35.5%;top:37%;width:30%;height:16%;border-radius:50%;background:radial-gradient(closest-side,rgba(140,240,255,.9),rgba(80,200,255,0));filter:blur(3px);pointer-events:none;animation:errPulse 2.6s ease-in-out infinite} .err-floor{position:relative;z-index:2;height:var(--floor);background:var(--bg);border-top:2px solid var(--line)} :root[data-theme="dark"] .err-bot img{filter:drop-shadow(0 0 2px rgba(200,225,255,.4)) drop-shadow(0 0 16px rgba(120,190,255,.22))} @keyframes errRise{from{transform:translateY(55%)}to{transform:none}} @keyframes errSway{0%,100%{transform:rotate(-1.1deg)}50%{transform:rotate(1.1deg)}} @keyframes errPulse{0%,100%{opacity:.35}50%{opacity:.95}} @media (max-width:759px){ .err-grid{grid-template-columns:1fr;justify-items:center} .err-text{width:100%;padding-bottom:1rem} .err-bot{width:clamp(105px,31.5vw,143px)} } @media (prefers-reduced-motion:reduce){ .err-bot,.err-bot-in,.err-glow{animation:none} .err-glow{opacity:.7} }