/* ===================================================================== BRNF SERVICES & SOLUTIONS — feuille de style unique Direction « Linge hôtelier » : drap blanc, bleu marine des tenues de gouvernante, fil rouge des bordures de serviettes, et trois couleurs d'appoint (ciel, ocre, sauge) pour distinguer les éléments. --------------------------------------------------------------------- Aucune dépendance externe : les polices sont dans /fonts (licence OFL), aucune requête vers un tiers, donc pas de bandeau cookies nécessaire. Un seul thème, clair, assumé sur tout le site. TOUT SE MODIFIE DEPUIS LE BLOC « PALETTE » CI-DESSOUS. ===================================================================== */ @font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-var.woff2) format("woff2")} @font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-var-italic.woff2) format("woff2")} @font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-sans-3-var.woff2) format("woff2")} /* --------------------------------------------------------------------- 1. PALETTE Contrastes vérifiés WCAG AA (texte courant ≥ 4,5:1 sur --ground, --surface et --sky ; bordures de champs ≥ 3:1). --------------------------------------------------------------------- */ :root{ --ground:#F6F5F1; /* fond général : drap blanc cassé */ --surface:#FFFFFF; /* encadrés, tableaux */ --surface-2:#E9EEF7; /* bande bleu ciel */ --surface-3:#DCE4F1; --ink:#1B2233; /* texte principal */ --muted:#565F73; /* texte secondaire */ --line:#D8DCE3; /* filets */ --line-strong:#848CA0; /* bordures de champs */ --navy:#1B2A47; /* couleur de marque */ --navy-deep:#101B31; --thread:#A3302B; /* le fil rouge */ --thread-soft:#F7E6E3; --ochre:#8F6217; /* ocre, lisible en texte */ --ochre-soft:#F5EBD8; --sage:#3D6A54; /* vert sauge, lisible en texte */ --sage-soft:#E2EEE7; --sky:#E9EEF7; /* noms historiques conservés : des styles inline des pages s'en servent */ --accent:var(--navy); --accent-deep:var(--navy-deep); --accent-soft:#E4E9F3; --accent-ink:#FFFFFF; --green:var(--sage); --green-soft:var(--sage-soft); --warn:#7A5310; --warn-soft:var(--ochre-soft); --invert-ground:var(--navy); --invert-surface:#24365A; --invert-ink:#F2F4F8; --invert-muted:#BCC5D8; --invert-line:#394C74; --shadow-1:0 1px 2px rgba(27,42,71,.06); --shadow-2:0 1px 2px rgba(27,42,71,.06), 0 14px 32px -18px rgba(27,42,71,.35); --serif:"Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; --sans:"Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --font-display:var(--serif); --font-body:var(--sans); --font-mono:var(--sans); --max:1120px; --gutter:clamp(16px,4vw,32px); --radius:2px; --radius-lg:3px; --sec:clamp(52px,8vw,96px); color-scheme:light; } /* ===================================================================== 2. BASE ===================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body{ margin:0; background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:17.5px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; font-variant-numeric:lining-nums; } img{max-width:100%; height:auto; display:block} h1,h2,h3,h4{font-family:var(--serif); margin:0; text-wrap:balance; color:var(--navy); font-weight:500; letter-spacing:-.01em} h4{font-family:var(--sans)} p{margin:0 0 1em} em{font-style:italic} a{color:var(--navy); text-decoration-color:var(--thread); text-underline-offset:.2em; text-decoration-thickness:1px} a:hover{color:var(--thread)} a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{ outline:2px solid var(--thread); outline-offset:3px; } strong{font-weight:650} .mono{font-family:var(--sans); letter-spacing:.02em} .tnum{font-variant-numeric:tabular-nums} .skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:10px 16px; z-index:100; text-decoration:none} .skip:focus{left:0} .wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--gutter)} .sec{padding-block:var(--sec)} .sec-tight{padding-block:calc(var(--sec) * .62)} /* petite étiquette de section : capitales espacées, précédée du fil rouge */ .eyebrow{ font-family:var(--sans); font-size:12.5px; font-weight:650; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; display:flex; align-items:center; gap:12px; } .eyebrow::before{content:""; width:28px; height:1.5px; background:var(--thread); flex:none} .eyebrow.plain::before{display:none} .lede{font-size:clamp(17px,2vw,19.5px); color:var(--muted); max-width:60ch; line-height:1.6} h1{font-size:clamp(36px,6vw,72px); line-height:1.06} h1 em,h2 em{color:var(--thread)} h2{font-size:clamp(28px,4.2vw,46px); margin-bottom:14px; line-height:1.1} h3{font-size:21px; font-weight:600; line-height:1.25} .narrow{max-width:70ch} /* ===================================================================== 3. BANDES ===================================================================== */ .band{background:var(--surface); border-block:1px solid var(--line)} .band-2{background:var(--sky); border-block:1px solid var(--surface-3)} .band-blush{background:var(--thread-soft)} .band-invert{ --ground:var(--invert-ground); --surface:var(--invert-surface); --ink:var(--invert-ink); --muted:var(--invert-muted); --line:var(--invert-line); background:var(--navy); color:var(--invert-ink); } .band-invert h1,.band-invert h2,.band-invert h3{color:#fff} .band-invert h2 em{color:#F2B7B1} .band-invert a{color:#fff} .band-invert .eyebrow{color:var(--invert-muted)} .band-invert .eyebrow::before{background:#E07C73} .band-invert .btn{background:#fff; color:var(--navy); border-color:#fff} .band-invert .btn:hover{background:var(--thread-soft); border-color:var(--thread-soft); color:var(--navy)} .band-invert .btn.ghost{background:transparent; color:#fff; border-color:#7F8DAE} .band-invert .btn.ghost:hover{border-color:#fff; background:transparent} .band-invert .badge{background:rgba(255,255,255,.1); color:#fff} /* ===================================================================== 4. EN-TÊTE — monogramme centré, comme un papier à en-tête d'hôtel ===================================================================== */ header.bar{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:30} header.bar::before{content:""; display:block; height:4px; background:linear-gradient(90deg,var(--navy) 0 60%, var(--thread) 60% 80%, var(--ochre) 80% 90%, var(--sage) 90%)} .bar-in{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; grid-template-areas:"side logo cta" "nav nav nav"; column-gap:16px; } .bar-in::before{content:"06 46 72 46 56 · 7 j/7, 8 h – 20 h"; grid-area:side; font-size:14px; color:var(--muted)} .logo{grid-area:logo; display:flex; flex-direction:column; align-items:center; text-decoration:none; color:var(--navy); padding-block:18px 14px} .logo .mark{ width:40px; height:40px; border:1.5px solid var(--navy); transform:rotate(45deg); display:grid; place-items:center; margin:6px 0 12px; flex:none; } .logo .mark{font-size:0} .logo .mark::after{content:"B"; transform:rotate(-45deg); font-family:var(--serif); font-style:italic; font-weight:600; font-size:20px; color:var(--navy)} .logo .txt{display:block; text-align:center; font-family:var(--serif); font-weight:500; font-size:18px; letter-spacing:.14em; text-transform:uppercase; line-height:1.2} .logo .txt span{display:block; font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.3em; color:var(--muted); margin-top:5px} nav.links{grid-area:nav; display:flex; justify-content:center; gap:34px; border-top:1px solid var(--line); padding-block:12px} nav.links a{font-size:13px; font-weight:650; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding-block:4px; border-bottom:1.5px solid transparent} nav.links a:hover{color:var(--navy)} nav.links a[aria-current="page"]{color:var(--navy); border-bottom-color:var(--thread)} .bar-cta{grid-area:cta; justify-self:end; display:flex; align-items:center; gap:10px} .nav-cta{display:none} .burger{ display:none; background:none; border:1.5px solid var(--navy); border-radius:var(--radius); padding:0 16px; cursor:pointer; color:var(--navy); font:650 13px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; } @media (max-width:880px){ header.bar{position:sticky; top:0} .bar-in{grid-template-columns:1fr auto; grid-template-areas:"logo cta"; position:relative} .bar-in::before{display:none} .logo{flex-direction:row; align-items:center; gap:14px; padding-block:10px} .logo .mark{width:30px; height:30px; margin:0 4px} .logo .mark::after{font-size:15px} .logo .txt{text-align:left; font-size:15px; letter-spacing:.1em} .logo .txt span{font-size:10px; letter-spacing:.22em; margin-top:3px} nav.links{ display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; border-top:0; background:var(--surface); border-bottom:1px solid var(--line); padding:6px var(--gutter) 16px; box-shadow:var(--shadow-2); z-index:2; } nav.links.open{display:flex} nav.links a{padding-block:13px; border-bottom:1px solid var(--line); font-size:14px; min-height:44px; display:flex; align-items:center} nav.links a[aria-current="page"]{border-bottom-color:var(--line); color:var(--thread)} .burger{display:block; min-height:44px; min-width:44px} .bar-cta .btn{display:none} .menu-open body::before{content:""; position:fixed; inset:0; z-index:1; background:rgba(16,27,49,.45)} .nav-cta{ display:flex; justify-content:center; margin-top:14px; border-bottom:0 !important; background:var(--navy); color:#fff !important; font-weight:650; padding-block:13px !important; } } @media (max-width:420px){ .logo .txt span{display:none} .logo .txt{font-size:14px} } /* ===================================================================== 5. BOUTONS ET LIENS ===================================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 26px; background:var(--navy); color:#fff; font-family:var(--sans); font-weight:650; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; border-radius:var(--radius); text-decoration:none; border:1.5px solid var(--navy); cursor:pointer; text-align:center; transition:background .15s ease, border-color .15s ease, color .15s ease; } .btn:hover{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff} .btn.ghost{background:transparent; color:var(--navy); border-color:var(--navy)} .btn.ghost:hover{background:var(--navy); color:#fff} .btn.red{background:var(--thread); border-color:var(--thread)} .btn.red:hover{background:#86241F; border-color:#86241F} .btn.small{min-height:44px; padding:0 20px; font-size:12.5px} .btn .arrow{transition:transform .18s ease} .btn:hover .arrow{transform:translateX(3px)} .arrowlink{ display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:13.5px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border-bottom:1.5px solid var(--thread); padding-bottom:3px; min-height:32px; color:var(--navy); } .arrowlink:hover{color:var(--thread)} .arrowlink span{transition:transform .18s ease} .arrowlink:hover span{transform:translateX(3px)} /* ===================================================================== 6. HÉROS ===================================================================== */ .hero{padding-block:clamp(44px,6vw,80px) clamp(32px,4vw,52px)} .hero h1 em{font-style:italic; color:var(--thread)} .hero .lede{margin-top:20px} .hero-actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:30px} .hero-note{font-size:14.5px; color:var(--muted)} /* héros de l'accueil : centré, sur fond ciel */ .hero-home{background:linear-gradient(180deg,var(--sky) 0%, var(--ground) 100%); text-align:center; padding-block:clamp(52px,8vw,112px) clamp(36px,5vw,64px)} .hero-home .eyebrow{justify-content:center} .hero-home .eyebrow::after{content:""; width:28px; height:1.5px; background:var(--thread)} .hero-home h1{font-size:clamp(40px,6.8vw,84px); max-width:15ch; margin:14px auto 0} .hero-home .lede{margin:26px auto 0; max-width:58ch} .hero-home .hero-actions{justify-content:center; margin-top:34px} .facts{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:clamp(40px,6vw,64px); background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--navy); } .facts div{padding:20px 12px; text-align:center} .facts div:not(:first-of-type){border-left:1px solid var(--line)} .facts b{display:block; font-family:var(--sans); font-weight:650; font-size:clamp(20px,2.2vw,24px); color:var(--navy); line-height:1.2; font-variant-numeric:tabular-nums; letter-spacing:.01em} .facts div:nth-of-type(2) b{color:var(--thread)} .facts div:nth-of-type(3) b{color:var(--ochre)} .facts div:nth-of-type(4) b{color:var(--sage)} .facts span{font-size:14px; color:var(--muted)} @media (max-width:760px){ .facts{grid-template-columns:1fr 1fr} .facts div:nth-of-type(3){border-left:0} .facts div:nth-of-type(-n+2){border-bottom:1px solid var(--line)} } /* ===================================================================== 7. EN-TÊTE DE SECTION CENTRÉ ===================================================================== */ .sec-head{text-align:center; max-width:760px; margin:0 auto clamp(32px,5vw,52px)} .sec-head .eyebrow{justify-content:center} .sec-head .eyebrow::after{content:""; width:28px; height:1.5px; background:var(--thread)} .sec-head h2{margin-top:6px} .sec-head p:not(.eyebrow){color:var(--muted); margin-top:12px} .center{text-align:center} /* ===================================================================== 8. BLOCS DE CONTENU ===================================================================== */ .card{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--navy); border-radius:var(--radius-lg); padding:28px 28px 26px; box-shadow:var(--shadow-1); } .card-flat{box-shadow:none} /* cartes en série : chacune prend une couleur de la palette */ .grid2>.card:nth-child(4n+2),.cards-cycle>.card:nth-child(4n+2){border-top-color:var(--thread)} .grid2>.card:nth-child(4n+3),.cards-cycle>.card:nth-child(4n+3){border-top-color:var(--ochre)} .grid2>.card:nth-child(4n+4),.cards-cycle>.card:nth-child(4n+4){border-top-color:var(--sage)} .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .grid2{display:grid; grid-template-columns:repeat(2,1fr); gap:0 44px} @media (max-width:860px){ .grid3{grid-template-columns:1fr} .grid2{grid-template-columns:1fr} } .tag{ display:inline-block; align-self:flex-start; font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--navy); background:var(--accent-soft); padding:5px 10px; border-radius:var(--radius); } .grid2>.card:nth-child(4n+2) .tag{color:var(--thread); background:var(--thread-soft)} .grid2>.card:nth-child(4n+3) .tag{color:var(--ochre); background:var(--ochre-soft)} .grid2>.card:nth-child(4n+4) .tag{color:var(--sage); background:var(--sage-soft)} .tag.red{color:var(--thread); background:var(--thread-soft)} .tag.ochre{color:var(--ochre); background:var(--ochre-soft)} .tag.sage{color:var(--sage); background:var(--sage-soft)} .svc{ background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--navy); padding:26px 24px; display:flex; flex-direction:column; gap:10px; } .grid3>.svc:nth-child(2){border-top-color:var(--thread)} .grid3>.svc:nth-child(3){border-top-color:var(--ochre)} .grid3>.svc:nth-child(2) .tag{color:var(--thread); background:var(--thread-soft)} .grid3>.svc:nth-child(3) .tag{color:var(--ochre); background:var(--ochre-soft)} .svc h3{margin:2px 0 0; font-size:24px} .svc p{margin:0; color:var(--muted); font-size:16px} .svc .more{margin-top:auto; padding-top:12px} .eng-item{padding:20px 0; border-top:1px solid var(--line)} .eng-item h3{font-size:19px; margin-bottom:5px; display:flex; align-items:baseline; gap:10px} .eng-item h3::before{content:""; width:7px; height:7px; transform:rotate(45deg) translateY(-2px); background:var(--thread); flex:none} .eng-item p{margin:0; color:var(--muted); font-size:16px} /* ===================================================================== 9. ACCUEIL — horaire, chambres, carte des tarifs, parcours ===================================================================== */ .schedule{max-width:660px; margin:0 auto; list-style:none; padding:0} .schedule li{display:flex; align-items:baseline; gap:16px; padding:15px 0; border-bottom:1px solid var(--line)} .schedule time{font-family:var(--sans); font-weight:650; font-size:17px; color:var(--navy); min-width:64px; font-variant-numeric:tabular-nums} .schedule span{flex:1; display:flex; align-items:baseline; gap:10px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; font-weight:650; color:var(--muted)} .schedule span::after{content:""; flex:1; border-bottom:1.5px dotted #AEB5C4; transform:translateY(-4px)} .schedule small{font-size:14px; letter-spacing:0; text-transform:none; font-weight:400; color:var(--muted); white-space:nowrap} .schedule li.on time,.schedule li.on span{color:var(--thread)} .rooms{display:grid; grid-template-columns:repeat(3,1fr); gap:22px} .room{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--navy); padding:30px 28px 26px; display:flex; flex-direction:column} .room:nth-child(2){border-top-color:var(--thread)} .room:nth-child(3){border-top-color:var(--ochre)} .room .no{font-family:var(--serif); font-style:italic; font-size:16px; color:var(--thread)} .room:nth-child(3) .no{color:var(--ochre)} .room h3{font-size:28px; font-weight:500; margin:6px 0 10px} .room .tag{margin-bottom:14px} .room:nth-child(2) .tag{color:var(--thread); background:var(--thread-soft)} .room:nth-child(3) .tag{color:var(--ochre); background:var(--ochre-soft)} .room p{font-size:16px; color:var(--muted)} .room .arrowlink{margin-top:auto; align-self:flex-start} @media (max-width:880px){ .rooms{grid-template-columns:1fr} } .carte{max-width:700px; margin:0 auto; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--thread); padding:clamp(22px,4vw,40px)} .carte ol{list-style:none; margin:0; padding:0} .carte li{display:flex; align-items:baseline; gap:10px; padding:10px 0} .carte li span{display:flex; align-items:baseline; gap:10px; flex:1; min-width:0; font-size:17px} .carte li span::after{content:""; flex:1; border-bottom:1.5px dotted #AEB5C4; transform:translateY(-4px); min-width:20px} .carte li small{color:var(--muted); font-size:14px; white-space:nowrap} .carte li b{font-family:var(--sans); font-weight:700; font-size:17px; color:var(--navy); white-space:nowrap; font-variant-numeric:tabular-nums} .carte .foot{border-top:3px double var(--line); margin:14px 0 0; padding-top:14px; font-size:14.5px; color:var(--muted); text-align:center} @media (max-width:480px){ .carte li small{display:none} } .bio{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,6vw,80px); align-items:start} .bio blockquote{margin:0; font-family:var(--serif); font-size:clamp(24px,3vw,33px); line-height:1.25; color:var(--navy)} .bio blockquote em{color:var(--thread)} .bio .sig{margin-top:18px} .cv{list-style:none; margin:0; padding:0; border-top:1.5px solid var(--navy)} .cv li{padding:18px 0 18px 26px; border-bottom:1px solid var(--line); position:relative} .cv li::before{content:""; position:absolute; left:2px; top:27px; width:8px; height:8px; transform:rotate(45deg); background:var(--thread)} .cv li:nth-child(2)::before{background:var(--ochre)} .cv li:nth-child(3)::before{background:var(--sage)} .cv h3{font-size:21px} .cv p{margin:4px 0 0; font-size:16px; color:var(--muted)} @media (max-width:820px){ .bio{grid-template-columns:1fr} } /* ===================================================================== 10. ÉTAPES ===================================================================== */ .steps{list-style:none; margin:0; padding:0; counter-reset:step; display:grid} .steps li{counter-increment:step; position:relative; padding:20px 0 20px 60px; border-bottom:1px solid var(--line)} .steps li:last-child{border-bottom:0} .steps li::before{ content:counter(step); position:absolute; left:0; top:16px; font-family:var(--serif); font-style:italic; font-size:20px; color:var(--thread); width:38px; height:38px; border:1.5px solid var(--thread); border-radius:50%; display:grid; place-items:center; background:var(--surface); } .steps li::after{content:""; position:absolute; left:19px; top:54px; bottom:-1px; width:1px; background:var(--line)} .steps li:last-child::after{display:none} .steps h3{font-size:19px; margin-bottom:4px} .steps p{margin:0; color:var(--muted); font-size:16px} .steps .when{font-size:12px; font-weight:650; color:var(--ochre); text-transform:uppercase; letter-spacing:.16em; margin-top:6px; display:block} /* ===================================================================== 11. PAIRES CONTRAINTE / RÉPONSE ===================================================================== */ .pairs{display:grid; border-top:1.5px solid var(--navy)} .pair{display:grid; grid-template-columns:1fr 1fr; gap:32px; padding:24px 0; border-bottom:1px solid var(--line); align-items:start} .pair .k{color:var(--muted); font-size:16px} .pair .k b{display:block; font-family:var(--serif); font-weight:500; font-size:22px; color:var(--navy); margin-bottom:4px; line-height:1.2} .pair .v{font-size:16.5px; padding-left:22px; border-left:1.5px solid var(--thread)} .pair:nth-child(2) .v{border-left-color:var(--ochre)} .pair:nth-child(3) .v{border-left-color:var(--sage)} .pair:nth-child(4) .v{border-left-color:var(--navy)} @media (max-width:760px){ .pair{grid-template-columns:1fr; gap:12px} .pair .v{padding-left:16px} } /* ===================================================================== 12. TABLEAUX ===================================================================== */ .tablewrap{overflow-x:auto; border:1px solid var(--line); border-top:3px solid var(--navy); background:var(--surface)} table{border-collapse:collapse; width:100%; min-width:520px} th,td{padding:14px 18px; text-align:left; border-bottom:1px solid var(--line); font-size:16px; vertical-align:top} thead th{background:var(--navy); font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff; border-bottom:3px solid var(--thread)} tbody tr:nth-child(even){background:#F6F8FC} tbody tr:hover{background:var(--sky)} tbody tr:last-child td{border-bottom:0} td.num,th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap} td.price{font-family:var(--sans); font-weight:700; font-size:16.5px; color:var(--navy)} td.name,th.name{font-weight:650; color:var(--navy)} tbody th[scope="row"]{background:none; font-size:16px; text-transform:none; letter-spacing:normal; color:var(--navy)} caption{caption-side:top} /* ===================================================================== 13. ESTIMATEUR (page Tarifs) ===================================================================== */ .est{ margin-top:26px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--thread); padding:28px; display:grid; grid-template-columns:1fr 300px; gap:30px; } @media (max-width:880px){ .est{grid-template-columns:1fr; gap:24px; padding:22px} } .field{margin-bottom:20px} .field:last-child{margin-bottom:0} .field label,.field .lbl{display:block; font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:9px} select,input[type=text],input[type=email],input[type=tel],input[type=number],textarea{ width:100%; padding:11px 13px; font-family:inherit; font-size:16px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); border-radius:var(--radius); transition:border-color .15s ease; } select:hover,input:hover,textarea:hover{border-color:var(--navy)} textarea{min-height:130px; resize:vertical} .checks{display:flex; flex-wrap:wrap; gap:8px} .chk{position:relative; display:block} .chk input{position:absolute; inset:0; opacity:0; width:100%; height:100%; margin:0; cursor:pointer} .chk span{display:block; padding:9px 14px; border:1px solid var(--line-strong); border-radius:var(--radius); font-size:15px; background:var(--surface); transition:background .15s ease, border-color .15s ease, color .15s ease} .chk:hover span{border-color:var(--navy)} .chk input:checked + span{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:600} .chk input:focus-visible + span{outline:2px solid var(--thread); outline-offset:2px} .readout{background:var(--sky); padding:24px; display:flex; flex-direction:column; align-self:start; border-top:3px solid var(--navy)} .readout .lab{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:700} .readout .amt{font-family:var(--sans); font-weight:700; font-size:34px; color:var(--navy); line-height:1.05; margin-top:8px; font-variant-numeric:tabular-nums} .readout .sub{font-size:14px; color:var(--muted); margin-top:6px} .lines{list-style:none; margin:18px 0 0; padding:16px 0 0; border-top:1px solid var(--surface-3); font-size:14px} .lines li{display:flex; justify-content:space-between; gap:12px; padding:3px 0; color:var(--muted)} .lines li b{font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink)} .lines li.tot{border-top:1px solid var(--surface-3); margin-top:8px; padding-top:9px; color:var(--navy); font-weight:700} .monthly{margin-top:18px; padding-top:16px; border-top:1px solid var(--surface-3); font-size:14px; color:var(--muted); display:flex; justify-content:space-between; gap:12px; align-items:baseline} .monthly span{flex:1; min-width:0} .monthly b{font-family:var(--sans); font-size:17px; font-weight:700; color:var(--navy); font-variant-numeric:tabular-nums; white-space:nowrap; flex:none} .copybtn{margin-top:16px; width:100%; background:transparent; color:var(--navy); border:1.5px solid var(--navy); border-radius:var(--radius); padding:11px; font:650 12.5px var(--sans); letter-spacing:.14em; text-transform:uppercase; cursor:pointer} .copybtn:hover{background:var(--navy); color:#fff} .copybtn.done{border-color:var(--sage); color:var(--sage); background:var(--sage-soft)} /* ===================================================================== 14. FAQ ===================================================================== */ .faq{border-top:1.5px solid var(--navy)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none; cursor:pointer; padding:20px 44px 20px 0; position:relative; font-family:var(--serif); font-weight:500; font-size:20px; line-height:1.35; color:var(--navy)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; position:absolute; right:8px; top:50%; transform:translateY(-50%); font-family:var(--sans); font-weight:300; font-size:28px; color:var(--thread); transition:transform .2s ease} .faq summary:hover{color:var(--thread)} .faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)} .faq .ans{padding:0 44px 22px 0; color:var(--muted); font-size:16.5px; max-width:74ch} .faq .ans p:last-child{margin-bottom:0} /* ===================================================================== 15. DIVERS ===================================================================== */ .badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px} .badge{font-size:13px; font-weight:650; padding:6px 12px; border-radius:var(--radius); background:var(--accent-soft); color:var(--navy)} .badges .badge:nth-of-type(4n+2){background:var(--thread-soft); color:var(--thread)} .badges .badge:nth-of-type(4n+3){background:var(--ochre-soft); color:var(--ochre)} .badges .badge:nth-of-type(4n+4){background:var(--sage-soft); color:var(--sage)} .badge.neutral{background:var(--surface); border:1px solid var(--line); color:var(--ink)} .maillink{font-size:clamp(16px,2.6vw,20px); color:var(--navy); text-decoration:none; border-bottom:1.5px solid var(--thread); word-break:break-all} .todo{background:var(--warn-soft); color:var(--warn); font-weight:650; padding:1px 6px; border-radius:2px; font-size:.92em} .note{background:var(--ochre-soft); border-left:3px solid var(--ochre); color:var(--warn); padding:14px 18px; font-size:15px} .note p:last-child{margin-bottom:0} .note strong{color:var(--warn)} .legal h2{font-size:clamp(26px,3.6vw,36px); margin:36px 0 10px} .legal h3{font-size:20px; margin:26px 0 6px} .legal p,.legal li{color:var(--ink); font-size:16.5px} .legal ul{padding-left:1.15em; margin:0 0 1em} .legal li{margin-bottom:.35em} .legal li::marker{color:var(--thread)} .legal .card{margin-bottom:10px} .notfound{text-align:center; padding-block:clamp(60px,10vw,100px)} .notfound .eyebrow{justify-content:center} .notfound .code{font-family:var(--serif); font-style:italic; font-size:clamp(70px,14vw,130px); color:var(--thread); line-height:1} .notfound .links{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:28px} /* barre d'action collante sur mobile */ .dock{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:none; background:var(--surface); border-top:3px solid var(--navy); padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px)); gap:10px; box-shadow:0 -8px 24px -14px rgba(27,42,71,.4); transform:translateY(110%); transition:transform .25s ease; } .dock.up{transform:translateY(0)} .dock .btn{flex:1; white-space:nowrap; padding-inline:10px; font-size:12.5px} .dock .btn.ghost{flex:0 0 96px} @media (max-width:880px){ .dock{display:flex} body{padding-bottom:72px} } footer.site{background:var(--surface); border-top:4px solid var(--thread); padding-block:44px 48px} .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:34px} @media (max-width:780px){ .foot-grid{grid-template-columns:1fr; gap:26px} } footer.site h2{font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--navy); margin:0 0 12px} footer.site p{color:var(--muted); font-size:15px; margin:0 0 6px} footer.site a{color:var(--muted); text-decoration:none; display:block; padding-block:4px; font-size:15px} footer.site a:hover{color:var(--thread)} footer.site strong{color:var(--ink); font-weight:650} .foot-mail a{display:inline-block} .foot-legal{border-top:1px solid var(--line); margin-top:30px; padding-top:20px; font-size:13.5px; color:var(--muted)} /* ===================================================================== 16. APPARITION AU DÉFILEMENT — visible par défaut, sans JavaScript ===================================================================== */ .js-reveal .reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s cubic-bezier(.22,.8,.3,1)} .js-reveal .reveal.in{opacity:1; transform:none} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important; animation:none !important} .js-reveal .reveal{opacity:1 !important; transform:none !important} } /* ===================================================================== 17. FORMULAIRE : validation et pièges à robots ===================================================================== */ .hp{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; padding:0; margin:-1px; opacity:0; pointer-events:none} .err{color:var(--thread); font-size:14px; margin:7px 0 0; display:flex; align-items:flex-start; gap:6px; line-height:1.4} .err[hidden]{display:none} .err::before{content:"!"; font-weight:700; flex:none} .form-err{background:var(--thread-soft); color:var(--thread); padding:11px 13px; margin:0 0 14px; font-size:14.5px} input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--thread); background:#FFF8F7} .field.ok input,.field.ok textarea{border-color:var(--sage)} .sent{background:var(--sage-soft); color:var(--sage); padding:16px 18px; font-size:16px; font-weight:650} /* ===================================================================== 18. CIBLES TACTILES — en dernier pour l'emporter ===================================================================== */ @media (max-width:880px){ .logo{min-height:44px} .arrowlink{min-height:44px} .maillink{display:inline-flex; align-items:center; min-height:44px} footer.site a{min-height:44px; display:flex; align-items:center; padding-block:0} .badge{min-height:32px; display:inline-flex; align-items:center} .faq summary{padding-block:22px} .chk span{min-height:44px; display:flex; align-items:center} } @media print{ header.bar,footer.site,.hero-actions,.est,.dock,.badges{display:none} body{background:#fff; color:#000; padding-bottom:0} .band,.band-2,.band-invert,.hero-home{background:#fff; color:#000; border:0} .card,.svc,.room,.tablewrap{border-color:#bbb; box-shadow:none} a{color:#000} } /* ===================================================================== 19. AJUSTEMENTS ===================================================================== */ /* cartes empilées dans une section : elles aussi prennent la palette */ .sec>.card:nth-of-type(4n+2){border-top-color:var(--thread)} .sec>.card:nth-of-type(4n+3){border-top-color:var(--ochre)} .sec>.card:nth-of-type(4n+4){border-top-color:var(--sage)} .sec>.card:nth-of-type(4n+2) .tag{color:var(--thread); background:var(--thread-soft)} .sec>.card:nth-of-type(4n+3) .tag{color:var(--ochre); background:var(--ochre-soft)} .sec>.card:nth-of-type(4n+4) .tag{color:var(--sage); background:var(--sage-soft)} /* une légende de tableau ne doit pas devenir une boîte flexible */ caption.eyebrow{display:table-caption} caption.eyebrow::before{display:none} /* étiquettes centrées : les filets encadrants sautent quand le texte passe à la ligne */ @media (max-width:600px){ .hero-home .eyebrow::before,.hero-home .eyebrow::after, .sec-head .eyebrow::before,.sec-head .eyebrow::after{display:none} .hero-home .eyebrow,.sec-head .eyebrow{display:block} } /* ===================================================================== 20. FICHES — l'en-tête marine souligné du fil rouge, comme une fiche de service d'étage ; lignes teintées, puces losange de couleur. ===================================================================== */ .fiche-h{ display:flex; justify-content:space-between; align-items:center; gap:6px 14px; flex-wrap:wrap; background:var(--navy); color:#fff; padding:13px clamp(18px,3vw,28px); border-bottom:3px solid var(--thread); font:700 11.5px/1.3 var(--sans); letter-spacing:.18em; text-transform:uppercase; } .fiche-h b{font-family:var(--serif); font-style:italic; font-weight:500; font-size:20px; letter-spacing:0; text-transform:none} .fiche-h .ref{color:#C3CCE0} /* carte des tarifs de l'accueil */ .carte{padding:0; border-top:0; box-shadow:var(--shadow-2)} .carte ol{padding:6px clamp(18px,3vw,28px)} .carte li{padding:12px 0; border-bottom:1px solid var(--line)} .carte li:last-child{border-bottom:0} .carte li::before{content:""; width:8px; height:8px; transform:rotate(45deg); background:var(--navy); flex:none; align-self:center; margin-right:4px} .carte li:nth-child(4n+2)::before{background:var(--thread)} .carte li:nth-child(4n+3)::before{background:var(--ochre)} .carte li:nth-child(4n+4)::before{background:var(--sage)} .carte li b{background:var(--accent-soft); padding:4px 12px; border-radius:2px; min-width:72px; text-align:right} .carte .foot{margin:0; padding:14px 20px; background:var(--sky); border-top:1px solid var(--surface-3)} /* tableaux : en-tête marine (défini plus haut), puce losange sur la 1re colonne */ .tablewrap{border-top:0; box-shadow:var(--shadow-1)} td.name::before{content:""; display:inline-block; width:7px; height:7px; transform:rotate(45deg); background:var(--navy); margin-right:11px; vertical-align:2px} tr:nth-child(4n+2) td.name::before{background:var(--thread)} tr:nth-child(4n+3) td.name::before{background:var(--ochre)} tr:nth-child(4n+4) td.name::before{background:var(--sage)} td.price{white-space:nowrap} caption.eyebrow{background:var(--sky); padding:12px 18px !important; margin:0; color:var(--navy)} /* estimateur : le récapitulatif devient une fiche */ .readout{background:var(--surface); border:1px solid var(--surface-3); border-top:0; padding:0 24px 22px} .readout .lab{display:block; margin:0 -24px 14px; background:var(--navy); color:#fff; padding:13px 24px; border-bottom:3px solid var(--thread)} /* cartes : un dégradé léger de leur couleur en tête */ .card,.room,.svc{background:linear-gradient(180deg,#EEF2F9 0, var(--surface) 120px)} .sec>.card:nth-of-type(4n+2),.grid2>.card:nth-child(4n+2),.room:nth-child(2),.grid3>.svc:nth-child(2){background:linear-gradient(180deg,#FBEFEC 0, var(--surface) 120px)} .sec>.card:nth-of-type(4n+3),.grid2>.card:nth-child(4n+3),.room:nth-child(3),.grid3>.svc:nth-child(3){background:linear-gradient(180deg,#FAF3E6 0, var(--surface) 120px)} .sec>.card:nth-of-type(4n+4),.grid2>.card:nth-child(4n+4){background:linear-gradient(180deg,#EDF5F0 0, var(--surface) 120px)} .band-invert .card{background:var(--invert-surface)} /* chiffres clés : un petit losange de leur couleur au-dessus */ .facts b::before{content:""; display:block; width:7px; height:7px; margin:0 auto 10px; transform:rotate(45deg); background:currentColor} /* les cases d'option sont des