/* ========================================================================== arsdekor-design — couche design d'arsdekor.mc Version 3, 20/09/2026. Direction arrêtée par Paolo après étude de deux références qu'il a données : visionnaire-home.com et ljprenovation.com. Ce que ces deux sites font, et qui devient la règle ici : · fond clair du haut en bas, jamais d'alternance clair / sombre ; · la couleur vient uniquement des photos, posées à fond perdu ; · des titres grands et gras, interlettrage négatif ; · presque pas de chrome : ni étiquette à filet, ni carte encadrée ; · peu de sections, chacune grande. LJP tient son accueil en 6 855 px. Le brun de la charte ne fait plus le fond : il tient les boutons, les filets et le pied de page. Version 4, 20/09/2026, après relecture de Paolo. Deux corrections de fond : · le blanc pur est proscrit. Le fond est un papier crème. Un écran de blanc pur à côté d'une photo de marbre crème donne un trou froid dans la page ; · l'encre n'est plus un gris neutre mais un brun très sombre, pris sur la même teinte que le logo. Un titre en noir pur sur blanc pur, c'est le réglage par défaut de tous les sites : la marque n'y est plus lisible. Ars Dekor tient désormais sur une seule échelle de bruns, du #a6836f du logo au #2f251e du pied de page, et la page entière s'y accorde. Prismaze, Monaco. ========================================================================== */ /* ---------- DM Sans, variable, auto-hébergée ---------- */ @font-face{ font-family:"DM Sans"; src:url(../fonts/dmsans-latin-ext.woff2) format("woff2-variations"); font-weight:300 700;font-stretch:100%;font-style:normal;font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } /* Le pont vers Kadence ne vaut QUE sur une page refondue : sur les anciennes pages, il remplacerait la palette du thème sans que personne l'ait voulu. */ body.ars-design{ /* pont vers Kadence */ --global-palette1:var(--ars-brun); --global-palette2:var(--ars-marron); --global-palette3:var(--ars-txt); --global-palette4:var(--ars-txt-2); --global-palette5:var(--ars-txt-3); --global-palette6:var(--ars-joint); --global-palette7:var(--ars-fond-2); --global-palette8:var(--ars-fond); --global-palette9:var(--ars-fond); --global-palette-highlight:var(--ars-brun); --global-body-font-family:var(--ars-sans); --global-heading-font-family:var(--ars-sans); --global-content-edge-padding:var(--ars-gut); --global-content-width:var(--ars-max); } @font-face{ font-family:"DM Sans"; src:url(../fonts/dmsans-latin.woff2) format("woff2-variations"); font-weight:300 700;font-stretch:100%;font-style:normal;font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* ========================================================================== 1 · Jetons ========================================================================== */ :root{ /* L'échelle de bruns de la marque, du plus clair au plus sombre. Tout ce qui porte de la couleur sur ce site sort de cette colonne. */ --ars-marron:#a6836f; /* marron du logo : filets, chiffres. Ne porte jamais de texte */ --ars-brun:#735e51; /* boutons, liens, second membre des titres. Blanc dessus : 6,1:1 */ --ars-brun-fonce:#4a3b32; /* survol des boutons pleins. Blanc dessus : 10,8:1 */ --ars-pied:#2f251e; /* pied de page */ /* Le papier. Jamais #fff : le blanc pur fait un trou froid entre les photos. */ --ars-fond:#f9f5f0; /* crème du papier à en-tête Ars Dekor */ --ars-fond-2:#f1eae1; /* crème plus dense, une seule surface secondaire */ --ars-fond-clair:#fdfbf8; /* le plus clair admis : boutons sur photo */ /* L'encre, prise sur la teinte du logo et non sur un gris neutre. */ --ars-txt:#2a1f18; /* 14,9:1 sur le papier */ --ars-txt-2:#5a4c42; /* 7,6:1 */ --ars-txt-3:#786357; /* 5,2:1, mentions seulement */ --ars-joint:rgba(42,31,24,.14); --ars-joint-fort:rgba(42,31,24,.28); --ars-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --ars-gut:clamp(20px,5vw,72px); --ars-max:1320px; --ars-s2:clamp(20px,2.4vw,34px); --ars-s3:clamp(36px,4.4vw,64px); /* Passé de 168 à 128 px le 20/09/2026 : entre deux sections on additionne deux fois cette valeur, soit 336 px de vide au plus large. Paolo : « l'espace vertical me semble encore trop important ». 256 px suffisent à séparer sans couper la lecture. */ --ars-s4:clamp(64px,7.8vw,128px); --ars-r:clamp(12px,1.1vw,16px); /* Un bouton d'appel à l'action a UNE hauteur sur tout le site. La seule variante admise est la version compacte de l'en-tête, qui vit dans une pilule collante et ne peut pas faire 46 px. Toute autre section qui redéfinit un rembourrage de bouton est un défaut. */ --ars-btn-h:46px; --ars-btn-h-compact:38px; --ars-ease:cubic-bezier(.16,1,.3,1); } /* ========================================================================== 2 · Le fond et les surfaces du navigateur ========================================================================== */ body{ margin:0;background:var(--ars-fond);color:var(--ars-txt); font-family:var(--ars-sans);font-optical-sizing:auto; font-size:clamp(16px,1.05vw,17.5px);line-height:1.62;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } ::selection{background:var(--ars-brun);color:#fff} .ars-racine :where(a,.ars-racine button,.ars-racine input,.ars-racine select,.ars-racine textarea,.ars-racine summary,.ars-racine [tabindex]):focus-visible{ outline:2px solid var(--ars-brun);outline-offset:3px;border-radius:6px; } html{scrollbar-color:var(--ars-marron) var(--ars-fond-2)} ::-webkit-scrollbar{width:11px;height:11px} ::-webkit-scrollbar-track{background:var(--ars-fond-2)} ::-webkit-scrollbar-thumb{background:var(--ars-marron);border-radius:99px;border:3px solid var(--ars-fond-2)} :root{caret-color:var(--ars-brun)} .ars-racine a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px} .ars-racine img{max-width:100%} /* Kadence enveloppe chaque groupe : laisser nos grilles voir leurs vrais enfants */ .ars-racine [class*="ad-"] > .wp-block-group__inner-container{display:contents} /* ========================================================================== 3 · Typographie — grande et grasse, comme les références ========================================================================== */ .ars-racine h1,.ars-racine h2,.ars-racine h3,.ars-racine h4,.ars-racine h5,.ars-racine h6{ font-family:var(--ars-sans);font-weight:600;color:var(--ars-txt); text-transform:none;text-wrap:balance;margin:0 0 .5em; } .ars-racine h1{font-size:clamp(40px,7vw,86px);line-height:1.015;letter-spacing:-.028em} .ars-racine h2{font-size:clamp(31px,4.4vw,58px);line-height:1.05;letter-spacing:-.026em} .ars-racine h3{font-size:clamp(21px,2.2vw,30px);line-height:1.16;letter-spacing:-.02em} .ars-racine h4{font-size:clamp(17px,1.5vw,21px);line-height:1.28;letter-spacing:-.014em;font-weight:500} .ars-racine p{margin:0 0 1.15em;max-width:70ch;color:var(--ars-txt-2)} .ars-racine strong,.ars-racine b{font-weight:600;color:var(--ars-txt)} .ars-racine .ars-chapeau{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--ars-txt-2);max-width:54ch} .ars-racine .ars-mention{font-size:14.5px;line-height:1.6;color:var(--ars-txt-3)} /* Le second membre d'un titre : plus maigre ET en brun. C'est ce qui distingue un titre Ars Dekor d'un titre noir sur blanc générique. #735e51 sur le papier crème : 5,6:1, au-delà du seuil d'un grand corps. */ .ars-racine h1 .ars-leger,.ars-racine h2 .ars-leger,.ars-racine .ars-identite-phrase .ars-leger,.ars-racine .ars-parcours-vue h3 .ars-leger{font-weight:300;letter-spacing:-.022em;color:var(--ars-brun)} .ars-racine .ars-heros h1 .ars-leger{color:rgba(255,255,255,.72)} /* ========================================================================== 4 · Trame — un seul fond. Les sections se séparent par l'espace, pas par la couleur. Une seule surface secondaire, à peine teintée. ========================================================================== */ .ars-racine .ars-bande{padding:var(--ars-s4) 0;position:relative} .ars-racine .ars-bande-serree{padding:var(--ars-s3) 0} .ars-racine .ars-teinte{background:var(--ars-fond-2)} .ars-racine .ars-large{width:min(100% - var(--ars-gut)*2,var(--ars-max));margin-inline:auto} .ars-racine .ars-pleine{width:100%;max-width:none} .ars-racine .ars-filet{height:1px;background:var(--ars-joint);border:0;margin:0} /* ========================================================================== 5 · Boutons — pilule, aimantation légère, aucun halo ========================================================================== */ .ars-racine .ars-btn{ position:relative;overflow:hidden;isolation:isolate; display:inline-flex;align-items:center;gap:11px; font:500 15px/1.3 var(--ars-sans);letter-spacing:-.005em;text-decoration:none; /* 13/26 au lieu de 16/30, hauteur 44 au lieu de 50 : les pilules du héros paraissaient massives à côté du texte. */ /* box-sizing est indispensable ici : sans lui, min-height s'applique à la boîte de CONTENU et le rembourrage vient s'ajouter par-dessus. Un bouton réglé à 46 px mesurait 70 px, et l'en-tête 56 au lieu de 38. C'est la cause réelle des « boutons trop hauts » signalés trois fois. */ box-sizing:border-box; padding:11px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer; min-height:var(--ars-btn-h);will-change:transform; transition:background .4s var(--ars-ease),border-color .4s var(--ars-ease), box-shadow .4s var(--ars-ease),color .4s var(--ars-ease); } /* Tout pictogramme posé dans un bouton prend la couleur du texte du bouton et la même taille : c'est ce qui fait qu'un WhatsApp blanc sur verre et un WhatsApp brun sur filet restent le même objet. */ .ars-racine .ars-btn svg{width:18px;height:18px;flex:none;display:block} .ars-racine .ars-btn .ars-j-plein{fill:currentColor} .ars-racine .ars-btn .ars-j-trait{stroke:currentColor;stroke-width:1.5;fill:none; stroke-linecap:round;stroke-linejoin:round} .ars-racine .ars-fleche{transition:transform .45s var(--ars-ease)} .ars-racine .ars-btn:hover .ars-fleche{transform:translateX(5px)} /* Principal : le brun de la marque, pas du noir. Un bouton noir à côté d'un logo brun, c'est deux marques dans le même en-tête. */ .ars-racine .ars-btn-encre,.ars-racine .ars-btn-brun{background:var(--ars-brun);color:#fff} .ars-racine .ars-btn-encre:hover,.ars-racine .ars-btn-brun:hover{background:var(--ars-brun-fonce);box-shadow:0 12px 26px -16px rgba(42,31,24,.6)} /* secondaire : un filet */ .ars-racine .ars-btn-filet{background:transparent;color:var(--ars-txt);border-color:var(--ars-joint-fort)} .ars-racine .ars-btn-filet:hover{border-color:var(--ars-brun);color:var(--ars-brun);background:rgba(115,94,81,.06)} /* sur photo : le verre */ .ars-racine .ars-btn-verre{ background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.4); backdrop-filter:blur(16px) saturate(170%);-webkit-backdrop-filter:blur(16px) saturate(170%); } .ars-racine .ars-btn-verre:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.62)} .ars-racine .ars-btn-blanc{background:var(--ars-fond-clair);color:var(--ars-txt)} /* Pas de pastille ronde à côté des pilules du héros : refusée par Paolo, « esthétiquement un non-sens ». Deux pilules de même forme se lisent comme un couple ; un troisième objet d'une autre géométrie casse la ligne et se voit comme un ajout. WhatsApp reste joignable en un appui dans le bloc de contact et dans la barre collante du téléphone, là où il sert vraiment. */ /* Le bouton de verre en grand format, pour le seul appel à l'action qui compte vraiment : celui du panneau « Parlons de votre projet ». */ .ars-racine .ars-btn-verre-fort{ /* Aucune reprise de gabarit : seule la matière change. */ background:rgba(255,255,255,.17);color:#fff;border-color:rgba(255,255,255,.46); backdrop-filter:blur(18px) saturate(180%);-webkit-backdrop-filter:blur(18px) saturate(180%); box-shadow:0 18px 40px -26px rgba(0,0,0,.85); transition:background .45s var(--ars-ease),border-color .45s var(--ars-ease), transform .45s var(--ars-ease),box-shadow .45s var(--ars-ease); } .ars-racine .ars-btn-verre-fort:hover{ background:rgba(255,255,255,.27);border-color:rgba(255,255,255,.7); transform:translateY(-2px);box-shadow:0 24px 48px -26px rgba(0,0,0,.9); } .ars-racine .ars-btn-blanc:hover{box-shadow:0 12px 28px -16px rgba(0,0,0,.5)} /* ========================================================================== 6 · En-tête — îlot collant, logotype au centre (validé par Paolo) ========================================================================== */ .ars-racine .ars-entete{ position:fixed;inset:0 0 auto;z-index:90;pointer-events:none; padding:clamp(12px,1.6vw,20px) 0; } /* L'îlot se cale sur la MÊME formule que .ars-large, sinon il déborde du contenu : avec une gouttière en rembourrage du bandeau et une largeur de 100 % sur l'îlot, on additionne les deux et la pilule dépasse à droite. Mesuré sur un écran de 390 px : l'îlot allait de 20 à 396. */ .ars-racine .ars-ilot{ pointer-events:auto;box-sizing:border-box; width:min(100% - var(--ars-gut)*2,var(--ars-max));margin-inline:auto; display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px; padding:12px 20px;border-radius:999px; border:1px solid transparent;background:transparent; transition:background .45s var(--ars-ease),border-color .45s var(--ars-ease), box-shadow .45s var(--ars-ease); } .ars-defile .ars-racine .ars-ilot,body:not(.ars-a-heros) .ars-racine .ars-ilot{ background:rgba(249,245,240,.84);border-color:var(--ars-joint); backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%); box-shadow:0 12px 28px -24px rgba(42,31,24,.5); } .ars-racine .ars-ilot .ars-logo{display:flex;align-items:center;justify-content:center;text-decoration:none} .ars-racine .ars-ilot .ars-logo img{ height:clamp(26px,2.6vw,32px);width:auto;display:block; transform-origin:center;transition:transform .45s var(--ars-ease); } .ars-defile .ars-racine .ars-ilot .ars-logo img{transform:scale(.92)} /* Sur le héros le logo est blanc ; dès que l'îlot s'habille il passe en brun. */ .ars-racine .ars-ilot .ars-logo .ars-logo-sombre{display:none} .ars-defile .ars-racine .ars-ilot .ars-logo .ars-logo-clair,body:not(.ars-a-heros) .ars-racine .ars-ilot .ars-logo .ars-logo-clair{display:none} .ars-defile .ars-racine .ars-ilot .ars-logo .ars-logo-sombre,body:not(.ars-a-heros) .ars-racine .ars-ilot .ars-logo .ars-logo-sombre{display:block} .ars-racine .ars-nav{display:flex;align-items:center;gap:clamp(12px,1.8vw,26px)} .ars-racine .ars-nav a{ font:500 14.5px/1.3 var(--ars-sans);letter-spacing:-.004em;color:#fff; text-decoration:none;padding:9px 2px;position:relative; transition:color .45s var(--ars-ease); } .ars-defile .ars-racine .ars-nav a,body:not(.ars-a-heros) .ars-racine .ars-nav a{color:var(--ars-txt)} .ars-racine .ars-nav a::after{ content:"";position:absolute;left:2px;right:2px;bottom:4px;height:1px; background:currentColor;transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ars-ease); } .ars-racine .ars-nav a:hover::after{transform:scaleX(1)} .ars-racine .ars-entete-droite{display:flex;align-items:center;gap:12px;justify-content:flex-end} .ars-racine .ars-entete-droite .ars-btn{padding:8px 20px;min-height:var(--ars-btn-h-compact);font-size:13.5px} /* Le bouton du header suit l'îlot : verre blanc sur le héros, encre dès que l'îlot s'habille. Sans cette bascule, c'est du blanc sur blanc. */ .ars-defile .ars-racine .ars-entete-droite .ars-btn-verre,body:not(.ars-a-heros) .ars-racine .ars-entete-droite .ars-btn-verre{ background:var(--ars-brun);color:#fff;border-color:transparent; backdrop-filter:none;-webkit-backdrop-filter:none; } .ars-defile .ars-racine .ars-entete-droite .ars-btn-verre:hover,body:not(.ars-a-heros) .ars-racine .ars-entete-droite .ars-btn-verre:hover{background:var(--ars-brun-fonce)} .ars-racine .ars-globe{ width:42px;height:42px;border-radius:999px;flex:none; display:grid;place-items:center;cursor:pointer; border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.14); backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%); transition:background .35s var(--ars-ease),border-color .35s var(--ars-ease),color .35s var(--ars-ease); } .ars-defile .ars-racine .ars-globe,body:not(.ars-a-heros) .ars-racine .ars-globe{ border-color:var(--ars-joint-fort);color:var(--ars-brun);background:rgba(115,94,81,.06); } .ars-racine .ars-globe svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.5;fill:none} /* Le burger : même pastille que le globe, pour que l'en-tête mobile tienne sur deux objets identiques encadrant le logotype. Il n'existe qu'en dessous de 780 px, là où la navigation en clair ne tient plus. */ .ars-racine .ars-burger{ display:none;width:42px;height:42px;border-radius:999px;flex:none; place-items:center;cursor:pointer; border:1px solid rgba(255,255,255,.4);color:#fff;background:rgba(255,255,255,.14); backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%); transition:background .35s var(--ars-ease),border-color .35s var(--ars-ease),color .35s var(--ars-ease); } .ars-defile .ars-racine .ars-burger,body:not(.ars-a-heros) .ars-racine .ars-burger{ border-color:var(--ars-joint-fort);color:var(--ars-brun);background:rgba(115,94,81,.06); } .ars-racine .ars-burger svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round} .ars-racine .ars-globe:hover{background:rgba(255,255,255,.26)} .ars-defile .ars-racine .ars-globe:hover,body:not(.ars-a-heros) .ars-racine .ars-globe:hover{background:rgba(42,31,24,.08)} /* ========================================================================== 7 · Héros — photo à fond perdu, titre ancré en bas ========================================================================== */ .ars-racine .ars-heros{ position:relative;min-height:min(100svh,920px); display:flex;align-items:flex-end;overflow:hidden;isolation:isolate; background:#221b17; } .ars-racine .ars-heros-media{position:absolute;inset:0;z-index:-2} .ars-racine .ars-heros-media img{width:100%;height:100%;object-fit:cover;display:block} .ars-racine .ars-heros::after{ content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(42,31,24,.86) 0%,rgba(42,31,24,.42) 30%, rgba(42,31,24,.04) 62%,rgba(42,31,24,.34) 100%); } .ars-racine .ars-heros-texte{ width:min(100% - var(--ars-gut)*2,var(--ars-max));margin-inline:auto; padding-bottom:clamp(44px,6vw,92px);padding-top:clamp(130px,17vw,220px); } .ars-racine .ars-heros-texte h1{color:#fff;max-width:16ch;margin-bottom:.3em} .ars-racine .ars-heros-texte .ars-chapeau{color:rgba(255,255,255,.93);max-width:48ch;margin-bottom:clamp(24px,2.8vw,34px)} .ars-racine .ars-heros-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center} /* ========================================================================== 8 · Ouverture de section — titre à gauche, texte à droite, rien d'autre ========================================================================== */ .ars-racine .ars-ouverture{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(20px,4vw,80px);align-items:end;margin-bottom:clamp(30px,3.6vw,56px); } @media(max-width:860px){.ars-racine .ars-ouverture{grid-template-columns:1fr;gap:18px;align-items:start}} .ars-racine .ars-ouverture h2{margin:0;max-width:16ch} .ars-racine .ars-ouverture p{margin:0} /* ========================================================================== 9 · Panneaux photo — le titre est posé sur l'image, à fond perdu ========================================================================== */ .ars-racine .ars-panneaux{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.2vw,18px)} @media(max-width:820px){.ars-racine .ars-panneaux{grid-template-columns:1fr}} .ars-racine .ars-panneau{ position:relative;isolation:isolate;display:flex;align-items:flex-end; min-height:clamp(340px,42vw,560px);overflow:hidden;border-radius:var(--ars-r); background:#221b17;text-decoration:none;color:#fff; } .ars-racine .ars-panneau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform 1.2s var(--ars-ease)} .ars-racine .ars-panneau:hover img{transform:scale(1.045)} .ars-racine .ars-panneau::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(0deg,rgba(42,31,24,.86),rgba(42,31,24,.24) 46%,rgba(42,31,24,0) 76%)} .ars-racine .ars-panneau-corps{padding:clamp(24px,2.8vw,40px)} .ars-racine .ars-panneau h3{color:#fff;margin:0 0 .35em} .ars-racine .ars-panneau p{color:rgba(255,255,255,.9);margin:0 0 1.1em;max-width:36ch;font-size:15.5px} .ars-racine .ars-panneau .ars-lien{display:inline-flex;align-items:center;gap:9px;font:500 14.5px/1 var(--ars-sans)} /* Un panneau sur toute la largeur, pour un moment fort */ .ars-racine .ars-panneau-large{grid-column:1 / -1;min-height:clamp(420px,50vw,680px)} .ars-racine .ars-panneau-large h3{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.026em} /* ========================================================================== 10 · Mosaïque de matières — cinq formats inégaux ========================================================================== */ .ars-racine .ars-mosaique{ display:grid;gap:clamp(10px,1.2vw,18px); grid-template-columns:repeat(12,1fr); grid-auto-rows:clamp(96px,11.5vw,158px); } .ars-racine .ars-mosaique figure,.ars-racine .ars-mosaique a{ margin:0;overflow:hidden;border-radius:var(--ars-r);position:relative;background:#221b17; display:block;text-decoration:none;color:#fff; } /* Une tuile de matière n'est pas une vignette décorative : elle mène à la page du savoir-faire qu'elle montre. La flèche le dit, sinon personne ne clique. */ .ars-racine .ars-mosaique a figcaption::after{ content:"→";display:inline-block;margin-left:9px; transition:transform .45s var(--ars-ease); } .ars-racine .ars-mosaique a:hover figcaption::after{transform:translateX(5px)} .ars-racine .ars-mosaique img{width:100%;height:100%;object-fit:cover;display:block; transition:transform 1.2s var(--ars-ease)} .ars-racine .ars-mosaique figure:hover img,.ars-racine .ars-mosaique a:hover img{transform:scale(1.045)} .ars-racine .ars-mosaique figure::after,.ars-racine .ars-mosaique a::after{ content:"";position:absolute;inset:auto 0 0 0;height:46%;pointer-events:none; background:linear-gradient(0deg,rgba(42,31,24,.7),rgba(42,31,24,0)); } .ars-racine .ars-mosaique figcaption{ position:absolute;left:18px;bottom:15px;z-index:2; font:500 14px/1.3 var(--ars-sans);color:#fff; } .ars-racine .ars-m-a{grid-column:span 7;grid-row:span 3} .ars-racine .ars-m-b{grid-column:span 5;grid-row:span 2} .ars-racine .ars-m-c{grid-column:span 5;grid-row:span 1} .ars-racine .ars-m-d{grid-column:span 4;grid-row:span 2} .ars-racine .ars-m-e{grid-column:span 8;grid-row:span 2} @media(max-width:780px){ .ars-racine .ars-mosaique{grid-template-columns:repeat(6,1fr);grid-auto-rows:clamp(88px,27vw,150px)} .ars-racine .ars-m-a{grid-column:span 6;grid-row:span 2} .ars-racine .ars-m-b,.ars-racine .ars-m-c,.ars-racine .ars-m-d{grid-column:span 3;grid-row:span 1} .ars-racine .ars-m-e{grid-column:span 6;grid-row:span 1} } /* ========================================================================== 11 · Registre — des lignes, pas des cartes encadrées ========================================================================== */ .ars-racine .ars-registre{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:0 clamp(24px,3vw,56px)} .ars-racine .ars-registre > div{padding:22px 0;border-top:1px solid var(--ars-joint)} .ars-racine .ars-registre dt{margin:0 0 6px;font:400 13.5px/1.3 var(--ars-sans);color:var(--ars-txt-3)} .ars-racine .ars-registre dd{margin:0;font:500 clamp(16px,1.5vw,18px)/1.35 var(--ars-sans); letter-spacing:-.014em;color:var(--ars-txt)} /* ========================================================================== 12 · Avant / après — cadre à bords arrondis ========================================================================== */ .ars-racine .ars-ba{ position:relative;overflow:hidden;--ars-ba-p:50%; background:var(--ars-fond-2);touch-action:pan-y;cursor:ew-resize;border-radius:var(--ars-r); } .ars-racine .ars-ba img{width:100%;display:block} .ars-racine .ars-ba-apres{position:absolute;inset:0;height:100%;object-fit:cover;clip-path:inset(0 0 0 var(--ars-ba-p))} .ars-racine .ars-ba-poignee{position:absolute;top:0;bottom:0;left:var(--ars-ba-p);width:1px; background:rgba(255,255,255,.95);z-index:3;pointer-events:none} .ars-racine .ars-ba-poignee::after{ content:"";position:absolute;top:50%;left:50%;width:54px;height:54px;margin:-27px 0 0 -27px; border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.92); backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%); box-shadow:0 8px 24px -12px rgba(42,31,24,.55); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6 4 12l5 6M15 6l5 6-5 6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:center; } .ars-racine .ars-ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:4;opacity:0;cursor:ew-resize} .ars-racine .ars-ba input[type=range]:focus-visible + .ars-ba-poignee::after{outline:2px solid var(--ars-brun);outline-offset:3px} .ars-racine .ars-ba-etiq{ position:absolute;bottom:16px;z-index:3; font:500 11.5px/1 var(--ars-sans);letter-spacing:.06em;color:#fff; background:rgba(42,31,24,.5);padding:9px 15px;border-radius:999px; border:1px solid rgba(255,255,255,.26); backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%); pointer-events:none; } .ars-racine .ars-ba-etiq-g{left:18px} .ars-racine .ars-ba-etiq-d{right:18px} /* ========================================================================== 13 · Galerie en accordéon ========================================================================== */ .ars-racine .ars-accordeon{display:flex;gap:clamp(6px,.7vw,10px);height:clamp(300px,44vw,520px)} .ars-racine .ars-accordeon figure{ flex:1;margin:0;border-radius:var(--ars-r);overflow:hidden;position:relative; background:#221b17;transition:flex .7s var(--ars-ease); } .ars-racine .ars-accordeon figure.ars-ouvert{flex:3} .ars-racine .ars-accordeon img{width:100%;height:100%;object-fit:cover;display:block} .ars-racine .ars-accordeon figure::after{ content:"";position:absolute;inset:auto 0 0 0;height:44%;pointer-events:none; background:linear-gradient(0deg,rgba(42,31,24,.88),rgba(42,31,24,.42) 45%,rgba(42,31,24,0)); } .ars-racine .ars-accordeon figcaption{ position:absolute;left:20px;right:20px;bottom:18px;z-index:2; font:500 15px/1.35 var(--ars-sans);color:#fff; opacity:0;transform:translateY(8px); transition:opacity .5s var(--ars-ease),transform .5s var(--ars-ease); } .ars-racine .ars-accordeon figure.ars-ouvert figcaption{opacity:1;transform:none} /* La règle globale strong,b impose l'encre brune ; sur une photo, un nom de projet devenait illisible. L'héritage ne suffit pas à la contrer, il faut une règle directe sur l'élément. Vérifier tout posé sur fond sombre. */ .ars-racine .ars-accordeon figcaption b{ color:#fff;font-size:17px;font-weight:600;letter-spacing:-.018em; /* Une photo de marbre clair remonte très haut même sous le dégradé : l'ombre portée garantit le nom quelle que soit l'image. */ text-shadow:0 1px 16px rgba(20,14,10,.6); } .ars-racine .ars-accordeon figcaption i{text-shadow:0 1px 14px rgba(20,14,10,.55)} .ars-racine .ars-accordeon figure::after{height:58%} @media(max-width:700px){ .ars-racine .ars-accordeon{flex-direction:column;height:auto} .ars-racine .ars-accordeon figure{flex:none;aspect-ratio:16/10} .ars-racine .ars-accordeon figcaption{opacity:1;transform:none} } /* ========================================================================== 14 · SpotlightCard : retiré Même motif que le halo des boutons, et refusé pour la même raison. Un panneau photo se signale au survol par le lent agrandissement de son image, déjà en place au §9. Rien de plus n'est nécessaire. ========================================================================== */ /* ========================================================================== 15 · FAQ (bloc Détails natif) — alimente le FAQPage du plugin ========================================================================== */ .ars-racine .ars-faq details{border-top:1px solid var(--ars-joint)} .ars-racine .ars-faq details:last-of-type{border-bottom:1px solid var(--ars-joint)} .ars-racine .ars-faq summary{ cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative; font:500 clamp(17px,1.6vw,21px)/1.35 var(--ars-sans);letter-spacing:-.016em;color:var(--ars-txt); } .ars-racine .ars-faq summary::-webkit-details-marker{display:none} .ars-racine .ars-faq summary::after{ content:"";position:absolute;right:6px;top:50%;width:14px;height:14px;margin-top:-7px; background:var(--ars-brun);transition:transform .4s var(--ars-ease); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat; } .ars-racine .ars-faq details[open] summary::after{transform:rotate(45deg)} .ars-racine .ars-faq details > :not(summary){padding-bottom:24px;max-width:68ch} /* ========================================================================== 16 · Pied de page — le seul aplat brun du site, validé par Paolo ========================================================================== */ .ars-racine .ars-pied{ position:relative;isolation:isolate;overflow:hidden; background:var(--ars-pied);color:#fdf7ee; padding:clamp(52px,6vw,88px) var(--ars-gut) clamp(24px,2.8vw,34px); --ars-pied-logo:clamp(96px,10vw,128px); } .ars-racine .ars-pied::before{ content:"";position:absolute;inset:0;z-index:-2; background: radial-gradient(70% 90% at 82% 0%,rgba(166,131,111,.42),transparent 68%), radial-gradient(60% 70% at 8% 100%,rgba(115,94,81,.5),transparent 72%); } .ars-racine .ars-pied-filigrane{ position:absolute;z-index:-1;top:0;bottom:0;right:clamp(10px,3vw,64px); aspect-ratio:664 / 700; background:rgba(253,247,238,.085); -webkit-mask:var(--ars-sigle) center/contain no-repeat; mask:var(--ars-sigle) center/contain no-repeat; pointer-events:none;user-select:none; } .ars-racine .ars-pied-in{ position:relative;z-index:1; width:min(100%,var(--ars-max));margin-inline:auto; display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr)); gap:clamp(26px,3.4vw,54px);align-items:start; } @media(max-width:860px){.ars-racine .ars-pied-in{grid-template-columns:1fr 1fr} .ars-racine .ars-pied-marque{grid-column:1 / -1}} @media(max-width:560px){.ars-racine .ars-pied-in{grid-template-columns:1fr}} /* Le logo seul dépasse en hauteur ; les colonnes démarrent à la ligne du texte descriptif. Les deux blocs partagent ainsi une vraie ligne de référence, au lieu de flotter l'un au-dessus de l'autre. */ .ars-racine .ars-pied-marque img{height:var(--ars-pied-logo);width:auto;margin-bottom:22px;display:block} .ars-racine .ars-pied-marque p{margin:0;font-size:14px;line-height:1.6;color:#e2cdb2;max-width:32ch} .ars-racine .ars-pied-in > div:not(.ars-pied-marque){padding-top:calc(var(--ars-pied-logo) + 22px)} @media(max-width:860px){.ars-racine .ars-pied-in > div:not(.ars-pied-marque){padding-top:0}} .ars-racine .ars-pied h3{margin:0 0 14px;font:500 12.5px/1 var(--ars-sans);letter-spacing:.03em;color:#fdf7ee} .ars-racine .ars-pied ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px;color:#e9d9c3} .ars-racine .ars-pied a{text-decoration:none} /* Le soulignement au survol vaut pour les liens de colonne, qui SONT des liens. Les pastilles de contact sont des boutons : jamais de soulignement, ni au repos ni au survol, sinon elles cessent de se lire comme tels. */ .ars-racine .ars-pied ul a:hover,.ars-racine .ars-pied .ars-pied-marque p a:hover{text-decoration:underline} .ars-racine .ars-pied .ars-pilules a,.ars-racine .ars-pied .ars-pilules a:hover{text-decoration:none} .ars-racine .ars-pied-bas{ position:relative;z-index:1; /* Aucun filet : la séparation vient de l'espace et du corps de texte. Consigne de Paolo, valable aussi pour la ligne « depuis 2011 ». */ width:min(100%,var(--ars-max));margin:clamp(44px,5vw,72px) auto 0; font-size:12.5px;color:#c7b298;display:flex;gap:18px;flex-wrap:wrap;justify-content:space-between; } /* ========================================================================== 17 · Encadré de relance client ========================================================================== */ .ars-racine .ars-todo{ border:1px dashed var(--ars-joint-fort);border-radius:var(--ars-r); background:rgba(166,131,111,.08); padding:17px 19px;margin:20px 0 0; font-size:14.5px;line-height:1.6;color:var(--ars-txt-2);max-width:72ch; } .ars-racine .ars-todo b{display:block;color:var(--ars-brun);font-size:12.5px;margin-bottom:.4em;letter-spacing:.02em} /* ========================================================================== 18 · Mouvement — ports maison de React Bits ========================================================================== */ .ars-js .ars-racine .ars-mot{ display:inline-block;opacity:0;filter:blur(12px);transform:translateY(.3em); transition:opacity 1s var(--ars-ease),filter 1s var(--ars-ease),transform 1s var(--ars-ease); transition-delay:calc(var(--i) * 60ms); } .ars-js .ars-racine .ars-mot.ars-vu{opacity:1;filter:none;transform:none} .ars-js .ars-racine .ars-reveal{ opacity:0;transform:translateY(22px); transition:opacity .9s var(--ars-ease),transform .9s var(--ars-ease); transition-delay:var(--d,0ms); } .ars-js .ars-racine .ars-reveal.ars-vu{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .ars-racine *,.ars-racine *::before,.ars-racine *::after{animation-duration:.001ms !important;transition-duration:.001ms !important} .ars-js .ars-racine .ars-mot,.ars-js .ars-racine .ars-reveal{opacity:1 !important;filter:none !important;transform:none !important} .ars-racine .ars-btn{transform:none !important} } /* ========================================================================== 19 · Les pastilles de contact Une seule définition, deux emplois : sous « Parlons de votre projet » et au pied de la modale de devis. Paolo a validé ce dessin dans la modale et l'a voulu identique sur la page — donc une seule règle, pas deux composants qui se ressemblent. Les valeurs (numéro, e-mail) ne sont pas répétées ici : elles vivent dans la carte d'identité juste en dessous. ========================================================================== */ .ars-racine .ars-pilules{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .ars-racine .ars-pilules p{margin:0;font-size:13.5px;color:var(--ars-txt-3)} .ars-racine .ars-pilules a{ display:inline-flex;align-items:center;gap:9px;text-decoration:none; padding:9px 16px;border-radius:999px;background:var(--ars-fond-2); font:500 14px/1 var(--ars-sans);color:var(--ars-txt); transition:background .35s var(--ars-ease),transform .35s var(--ars-ease); } .ars-racine .ars-pilules a:hover{background:rgba(166,131,111,.18);transform:translateY(-2px)} .ars-racine .ars-pilules svg{width:17px;height:17px;flex:none;display:block} .ars-racine .ars-pilules .ars-j-trait{stroke:var(--ars-brun);stroke-width:1.5;fill:none; stroke-linecap:round;stroke-linejoin:round} .ars-racine .ars-pilules .ars-j-plein{fill:var(--ars-brun)} /* Sur l'aplat brun du pied, la même pastille en négatif. C'est une variante de contexte, pas un second composant : seules les couleurs changent. */ .ars-racine .ars-pied .ars-pilules{margin-top:18px} .ars-racine .ars-pied .ars-pilules a{background:rgba(253,247,238,.1);color:#fdf7ee} .ars-racine .ars-pied .ars-pilules a:hover{background:rgba(253,247,238,.2)} .ars-racine .ars-pied .ars-pilules .ars-j-trait{stroke:#e2cdb2} .ars-racine .ars-pied .ars-pilules .ars-j-plein{fill:#e2cdb2} /* ========================================================================== 20 · Barre collante du téléphone Demandée par Paolo : sur mobile, devis et WhatsApp restent sous le pouce du haut en bas de la page. Les deux boutons sortent de l'échelle de bruns : pas de vert WhatsApp, qui ferait une seconde marque. ========================================================================== */ .ars-racine .ars-barre{ position:fixed;left:0;right:0;bottom:0;z-index:95;display:none; grid-template-columns:1fr 1fr;gap:9px; padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(249,245,240,.88);border-top:1px solid var(--ars-joint); backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%); } .ars-racine .ars-barre .ars-btn{justify-content:center;padding:11px 16px;font-size:14.5px} @media(max-width:820px){ .ars-racine .ars-barre{display:grid} /* Le pied de page rend la place que la barre prend, sinon elle couvre la dernière ligne du site. Le rembourrage va au pied, pas au corps : sur le corps il laisserait une bande crème sous l'aplat brun. */ .ars-racine .ars-pied{padding-bottom:calc(var(--ars-s3) + 78px)} } @media(prefers-reduced-motion:reduce){.ars-racine .ars-barre{backdrop-filter:none;background:var(--ars-fond)}} /* ========================================================================== 23 · Le parcours d'un chantier, piloté par le défilement Quatre temps qui avancent pendant qu'on descend. La logique vient de la section « Dal mandato al closing » d'Alma Next ; la forme n'a rien à voir, les deux marques n'ayant pas le même langage. Refondu après relecture : une séquence qui se contente de décrire un déroulé est de l'espace perdu. Chaque temps est donc illustré par une photo du chantier, dit ce que le client y gagne, et la scène porte un appel à l'action qui reste à l'écran du premier au dernier temps. ========================================================================== */ .ars-racine .ars-parcours{position:relative;height:180vh} /* Des crans d'arrêt. Sans eux, les quatre temps défilaient sur une demi-hauteur d'écran et l'on passait de 01 à 04 sans s'arrêter nulle part (retour de Paolo, 21/09/2026). Chaque cran est posé au milieu de la plage d'un temps ; l'accroche « proximity » n'agit que lorsqu'on s'en approche, elle ne capture pas le reste de la page. */ .ars-racine .ars-parcours-cran{position:absolute;left:0;width:1px;height:1px;pointer-events:none} .ars-racine .ars-parcours-cran:nth-of-type(1){top:10vh} .ars-racine .ars-parcours-cran:nth-of-type(2){top:30vh} .ars-racine .ars-parcours-cran:nth-of-type(3){top:50vh} .ars-racine .ars-parcours-cran:nth-of-type(4){top:70vh} @media (min-width:861px) and (prefers-reduced-motion:no-preference){ html:has(.ars-parcours){scroll-snap-type:y proximity} .ars-racine .ars-parcours-cran{scroll-snap-align:start} } .ars-racine .ars-parcours-scene{ position:sticky;top:0;min-height:100vh; display:grid;align-content:center; padding:clamp(72px,9vh,104px) 0 clamp(26px,3.6vh,44px); } .ars-racine .ars-parcours-grille{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(26px,4vw,72px);align-items:center; } /* La photo de l'étape : un seul cadre, quatre images qui se relaient. */ .ars-racine .ars-parcours-photo{ position:relative;border-radius:var(--ars-r);overflow:hidden; aspect-ratio:4 / 3;background:#221b17; } .ars-racine .ars-parcours-photo img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.04); transition:opacity .7s var(--ars-ease),transform 1.2s var(--ars-ease); } .ars-racine .ars-parcours-photo img.ars-actif{opacity:1;transform:none} .ars-racine .ars-parcours-vue{position:relative;min-height:clamp(168px,16.5vw,204px);margin-bottom:clamp(14px,1.7vw,22px)} .ars-racine .ars-parcours-vue > div{ position:absolute;inset:0;opacity:0;transform:translateY(18px); transition:opacity .55s var(--ars-ease),transform .55s var(--ars-ease); pointer-events:none; } .ars-racine .ars-parcours-vue > div.ars-actif{opacity:1;transform:none;pointer-events:auto} .ars-racine .ars-parcours-num{ display:block;margin-bottom:10px; font:500 12px/1 var(--ars-sans);letter-spacing:.2em;color:var(--ars-marron); } .ars-racine .ars-parcours-vue h3{ font-size:clamp(24px,2.7vw,38px);line-height:1.08;letter-spacing:-.026em;margin:0 0 .4em; } .ars-racine .ars-parcours-vue p{margin:0;font-size:clamp(15.5px,1.35vw,18px);line-height:1.55;max-width:42ch} .ars-racine .ars-parcours-liste{ list-style:none;margin:0 0 clamp(20px,2.4vw,30px);padding:0 0 0 clamp(20px,2.2vw,28px); position:relative; } .ars-racine .ars-parcours-liste::before,.ars-racine .ars-parcours-liste::after{ content:"";position:absolute;left:0;top:0;width:2px;border-radius:2px; } .ars-racine .ars-parcours-liste::before{bottom:0;background:var(--ars-joint-fort)} .ars-racine .ars-parcours-liste::after{height:calc(var(--p,0) * 100%);background:var(--ars-brun)} .ars-racine .ars-parcours-liste li{ padding:clamp(9px,1vw,13px) 0; font:500 clamp(15px,1.35vw,17px)/1.3 var(--ars-sans);letter-spacing:-.016em; color:var(--ars-txt-3);transition:color .5s var(--ars-ease),transform .5s var(--ars-ease); } .ars-racine .ars-parcours-liste li.ars-actif{color:var(--ars-txt);transform:translateX(5px)} /* L'appel à l'action de la section : il ne bouge pas, donc il est joignable à tout moment de la séquence, y compris au premier temps. */ .ars-racine .ars-parcours-agir{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .ars-racine .ars-parcours-agir p{margin:0;font-size:14.5px;color:var(--ars-txt-2);max-width:26ch} @media(max-width:860px),(prefers-reduced-motion:reduce){ .ars-racine .ars-parcours{height:auto} .ars-racine .ars-parcours-scene{position:static;min-height:0;padding:var(--ars-s4) 0} .ars-racine .ars-parcours-grille{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)} .ars-racine .ars-parcours-vue{display:none} .ars-racine .ars-parcours-photo{aspect-ratio:16/10} .ars-racine .ars-parcours-photo img:first-child{opacity:1;transform:none} .ars-racine .ars-parcours-liste li{color:var(--ars-txt)} .ars-racine .ars-parcours-liste::after{height:100%} } /* ========================================================================== 24 · La carte d'identité de la maison Remplace le registre en colonnes, jugé « trop classique et vieillot ». La hiérarchie a été inversée après relecture : l'information qui distingue Ars Dekor, ce n'est pas « maison monégasque », que tous ses concurrents peuvent écrire, c'est la date. Elle passe donc en tête et en grand, la nature de l'activité la suit en second rang. ========================================================================== */ .ars-racine .ars-identite{ display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(30px,5vw,96px);align-items:start; } @media(max-width:820px){.ars-racine .ars-identite{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}} .ars-racine .ars-identite-date{ display:block;margin:0 0 .14em;color:var(--ars-txt);font-weight:600; font-size:clamp(46px,6.4vw,104px);line-height:.92;letter-spacing:-.04em; } .ars-racine .ars-identite p{margin:0} .ars-racine .ars-identite-phrase{ display:block;margin:0;max-width:24ch;color:var(--ars-txt-2);font-weight:400; font-size:clamp(17px,1.7vw,23px);line-height:1.35;letter-spacing:-.014em; } .ars-racine .ars-identite-faits{display:grid;gap:clamp(22px,2.6vw,36px)} .ars-racine .ars-identite-faits b{ display:block;margin-bottom:8px; font:500 11.5px/1 var(--ars-sans);letter-spacing:.16em;text-transform:uppercase; color:var(--ars-marron); } .ars-racine .ars-identite-faits span{ display:block;font:500 clamp(16px,1.45vw,19px)/1.45 var(--ars-sans); letter-spacing:-.016em;color:var(--ars-txt);max-width:34ch; } /* Pas de soulignement permanent : rien d'autre sur le site n'en porte. */ .ars-racine .ars-identite-faits a{color:inherit;text-decoration:none;transition:color .35s var(--ars-ease)} .ars-racine .ars-identite-faits a:hover{color:var(--ars-brun)} /* ========================================================================== 24 bis · Le tiroir de navigation du téléphone Verre sombre, comme le veut le standard Prismaze. Il porte ce que l'en-tête ne peut plus montrer sous 780 px : les rubriques, le devis, les trois contacts et les langues. ========================================================================== */ .ars-racine .ars-tiroir{position:fixed;inset:0;z-index:150;visibility:hidden} .ars-racine .ars-tiroir[data-ouvert="1"]{visibility:visible} .ars-racine .ars-tiroir-voile{ position:absolute;inset:0;background:rgba(20,14,10,.66); opacity:0;transition:opacity .45s var(--ars-ease); } .ars-racine .ars-tiroir[data-ouvert="1"] .ars-tiroir-voile{opacity:1} .ars-racine .ars-tiroir-panneau{ position:absolute;inset:0 0 auto; padding:calc(env(safe-area-inset-top,0px) + 18px) var(--ars-gut) clamp(26px,5vw,38px); background:rgba(47,37,30,.93);color:#fdf7ee; backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%); border-radius:0 0 clamp(20px,4vw,28px) clamp(20px,4vw,28px); transform:translateY(-100%);transition:transform .5s var(--ars-ease); max-height:100dvh;overflow:auto; } .ars-racine .ars-tiroir[data-ouvert="1"] .ars-tiroir-panneau{transform:none} .ars-racine .ars-tiroir-haut{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(22px,5vw,32px)} .ars-racine .ars-tiroir-haut img{height:30px;width:auto;display:block} .ars-racine .ars-tiroir-fermer{ width:42px;height:42px;border-radius:999px;display:grid;place-items:center;cursor:pointer; border:1px solid rgba(253,247,238,.28);background:rgba(253,247,238,.08);color:#fdf7ee; } .ars-racine .ars-tiroir-fermer svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round} .ars-racine .ars-tiroir nav{display:grid;gap:2px;margin-bottom:clamp(20px,4vw,28px)} .ars-racine .ars-tiroir nav a{ display:block;padding:13px 0;text-decoration:none;color:#fdf7ee; font:500 clamp(21px,5.4vw,26px)/1.2 var(--ars-sans);letter-spacing:-.022em; } .ars-racine .ars-tiroir nav a:hover{color:var(--ars-marron)} .ars-racine .ars-tiroir .ars-btn{width:100%;justify-content:center;margin-bottom:clamp(16px,3.4vw,22px)} .ars-racine .ars-tiroir .ars-pilules a{background:rgba(253,247,238,.1);color:#fdf7ee} .ars-racine .ars-tiroir .ars-pilules .ars-j-trait{stroke:#e2cdb2} .ars-racine .ars-tiroir .ars-pilules .ars-j-plein{fill:#e2cdb2} .ars-racine .ars-tiroir-langues{display:flex;gap:8px;margin-top:clamp(18px,3.6vw,24px)} .ars-racine .ars-tiroir-langues a{ padding:8px 15px;border-radius:999px;text-decoration:none; font:500 13.5px/1 var(--ars-sans);color:#e2cdb2;background:rgba(253,247,238,.07); } .ars-racine .ars-tiroir-langues a[aria-current="true"]{color:#2f251e;background:#e2cdb2} @media(min-width:781px){.ars-racine .ars-tiroir{display:none}} @media(prefers-reduced-motion:reduce){ .ars-racine .ars-tiroir-panneau,.ars-racine .ars-tiroir-voile{transition:none} } /* ========================================================================== 25 · La modale « Demander un devis » Un seul composant pour tout le site : chaque bouton de devis l'ouvre, sur n'importe quelle page. Bâtie sur , qui apporte le piège au clavier, la touche Échap et l'inertie du fond sans une ligne de script. ========================================================================== */ .ars-racine .ars-modale{ border:0;padding:0;background:transparent;color:var(--ars-txt); width:min(100% - 32px,660px);max-height:calc(100dvh - 48px);overflow:visible; } .ars-racine .ars-modale::backdrop{ background:rgba(26,18,12,.58); backdrop-filter:blur(10px) saturate(130%);-webkit-backdrop-filter:blur(10px) saturate(130%); } .ars-racine .ars-modale-boite{ background:var(--ars-fond);border-radius:clamp(18px,1.8vw,26px); padding:clamp(26px,3.2vw,46px);max-height:calc(100dvh - 48px);overflow:auto; box-shadow:0 48px 100px -46px rgba(20,14,10,.75); } .ars-racine .ars-modale h2{font-size:clamp(26px,3vw,40px);margin:0 0 .3em} .ars-racine .ars-modale .ars-chapeau{margin:0 0 clamp(20px,2.4vw,30px);font-size:16px} .ars-racine .ars-modale-fermer{ position:absolute;top:14px;right:14px;width:40px;height:40px;border-radius:999px; display:grid;place-items:center;cursor:pointer; border:0;background:rgba(42,31,24,.06);color:var(--ars-txt-2); transition:background .35s var(--ars-ease),color .35s var(--ars-ease); } .ars-racine .ars-modale-fermer:hover{background:rgba(42,31,24,.12);color:var(--ars-txt)} .ars-racine .ars-modale-fermer svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none; stroke-linecap:round} .ars-racine .ars-champs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,16px)} @media(max-width:560px){.ars-racine .ars-champs{grid-template-columns:1fr}} .ars-racine .ars-champs .ars-large-champ{grid-column:1 / -1} .ars-racine .ars-champs label{ display:block;margin-bottom:7px; font:500 11.5px/1 var(--ars-sans);letter-spacing:.14em;text-transform:uppercase; color:var(--ars-txt-3); } .ars-racine .ars-champs input,.ars-racine .ars-champs select,.ars-racine .ars-champs textarea{ width:100%;box-sizing:border-box; font:400 15.5px/1.4 var(--ars-sans);color:var(--ars-txt); background:var(--ars-fond-2);border:1px solid transparent;border-radius:12px; padding:13px 15px; transition:background .3s var(--ars-ease),border-color .3s var(--ars-ease); } .ars-racine .ars-champs textarea{min-height:104px;resize:vertical} .ars-racine .ars-champs input:focus,.ars-racine .ars-champs select:focus,.ars-racine .ars-champs textarea:focus{ outline:none;background:var(--ars-fond-clair);border-color:var(--ars-brun); } .ars-racine .ars-champs input::placeholder,.ars-racine .ars-champs textarea::placeholder{color:var(--ars-txt-3)} .ars-racine .ars-modale .ars-btn{margin-top:clamp(16px,1.8vw,22px);width:100%;justify-content:center} /* Dans la modale, les mêmes pastilles, simplement décalées. */ .ars-racine .ars-modale .ars-pilules{margin-top:clamp(20px,2.4vw,28px)} /* ========================================================================== 26 · Le sélecteur de langues Le globe ouvre un menu de verre. Trois langues dès maintenant, même si Polylang ne les servira qu'à l'internationalisation : le comportement se met en place avant le contenu, pour ne pas redessiner l'en-tête. ========================================================================== */ .ars-racine .ars-langues{position:relative;display:flex} .ars-racine .ars-langues-menu{ position:absolute;top:calc(100% + 12px);right:0;z-index:5;min-width:180px; padding:8px;border-radius:18px;display:grid;gap:2px; background:rgba(249,245,240,.92); backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%); box-shadow:0 26px 54px -28px rgba(42,31,24,.6); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .35s var(--ars-ease),transform .35s var(--ars-ease),visibility .35s; } .ars-racine .ars-langues[data-ouvert="1"] .ars-langues-menu{opacity:1;visibility:visible;transform:none} .ars-racine .ars-langues-menu a{ display:block;padding:11px 16px;border-radius:999px;text-decoration:none; font:500 14.5px/1 var(--ars-sans);letter-spacing:-.008em;color:var(--ars-txt); transition:background .3s var(--ars-ease),color .3s var(--ars-ease); } .ars-racine .ars-langues-menu a:hover{background:rgba(115,94,81,.1)} .ars-racine .ars-langues-menu a[aria-current="true"]{color:var(--ars-brun)} @media(prefers-reduced-motion:reduce){.ars-racine .ars-langues-menu{transition:none}} /* ========================================================================== 22 · L'ancienneté Ars Dekor est l'une des plus anciennes entreprises de rénovation de la Principauté. C'est son seul argument qu'un concurrent ne peut pas copier, et c'est exactement ce qu'une IA cite quand on lui demande à qui confier un chantier à Monaco. Il se dit une fois dans le héros, une fois au pied, et il alimente foundingDate dans le schema. ========================================================================== */ /* Aucun filet : Paolo les refuse sur cette page, décoratifs comme d'accompagnement. La mention tient par son corps et son interlettrage. */ .ars-racine .ars-depuis{ display:block;margin:0 0 clamp(16px,1.8vw,22px); font:600 13.5px/1.2 var(--ars-sans);letter-spacing:.2em;text-transform:uppercase; color:var(--ars-txt-2); } /* Sur la photo du héros, du blanc fin se perd : il faut du poids, du blanc franc et une ombre portée basse, sinon la ligne n'existe pas. */ .ars-racine .ars-heros .ars-depuis{ color:#fff;font-weight:600;font-size:14px;letter-spacing:.22em; text-shadow:0 1px 18px rgba(20,14,10,.75),0 0 2px rgba(20,14,10,.4); } .ars-racine .ars-pied .ars-depuis{color:rgba(253,247,238,.62);margin:16px 0 0} .ars-racine .ars-pied .ars-depuis::before{display:none} /* ========================================================================== 21 · Téléphone — livrable à part entière ========================================================================== */ @media(max-width:780px){ .ars-racine .ars-heros{min-height:min(94svh,760px)} .ars-racine .ars-heros-texte h1{max-width:100%} .ars-racine .ars-heros-texte{padding-bottom:clamp(30px,7vw,48px)} .ars-racine .ars-heros-actions .ars-btn{width:100%;justify-content:center} .ars-racine .ars-nav{display:none} .ars-racine .ars-burger{display:grid} /* Deux pastilles de 42 px encadrent le logotype : les colonnes latérales ont la même largeur, donc le logo tombe réellement au centre optique. */ .ars-racine .ars-ilot{grid-template-columns:42px 1fr 42px;padding:9px 12px;gap:10px} .ars-racine .ars-entete-droite{gap:0} .ars-racine .ars-entete-droite .ars-btn{display:none} .ars-racine .ars-ba-etiq{font-size:11px;padding:7px 12px} .ars-racine .ars-ba-poignee::after{width:44px;height:44px;margin:-22px 0 0 -22px} .ars-racine .ars-panneau-large h3{font-size:clamp(24px,7vw,34px)} } /* ========================================================================== 26 quater · Boutons à icône : aucun rembourrage hérité Kadence donne à tout