/* ============================================================ A2ROULET-TOITURE — « Ligne de faîtage » Base blanc lumineux · encre indigo nuit · accent indigo du logo · lavande en secondaire Display + Texte : Archivo (grotesque industriel) · Labels : IBM Plex Mono Mobile-first · prefers-reduced-motion respecté SOMMAIRE 1. Variables & tokens (:root) 2. Reset & base 3. Utilitaires (.mono-label, .conteneur, .reveal) 4. Header (.entete) 5. Hero (.hero) 6. Manifeste 7. Services 8. Pourquoi 9. Témoignages + chiffres (bande ardoise) 10. Engagement 11. Qui sommes-nous (.about) 12. Contact & formulaire 13. Pied de page (.pied) ============================================================ */ /* ============================================================ 1. VARIABLES & TOKENS ============================================================ */ :root{ --pierre: #F7F7FB; /* fond principal, blanc lumineux à peine violacé */ --papier: #FFFFFF; /* surfaces posées */ --encre: #16163B; /* encre indigo nuit */ --ardoise: #2B2B73; /* bande indigo du logo */ --indigo: #2B2B73; /* indigo du logo */ --indigo-nuit: #1E1E55; /* hover / profondeur */ /* --zinc n'est destiné qu'aux FONDS CLAIRS (assombri pour atteindre 4,5:1 en petit corps). Sur fond sombre, utiliser --lavande ; sur la bande ardoise, --lavande-clair. */ --zinc: #6E6890; /* gris lavande, secondaire — fonds clairs */ --lavande: #A49CC2; /* lavande du logo — fonds sombres (encre) */ --lavande-clair:#C7C2E6; /* lavande éclairci — bande ardoise / cartes translucides */ --ligne: rgba(22,22,59,.13); --ligne-claire:rgba(255,255,255,.18); --ff-display: "Archivo", "Helvetica Neue", Arial, sans-serif; --ff-texte: "Archivo", "Helvetica Neue", Arial, sans-serif; --ff-mono: "IBM Plex Mono", monospace; /* pente signature ≈ rampant de toit */ --pente: 5.5deg; --gouttiere: clamp(1.25rem, 4vw, 3.5rem); --mesure: 68ch; } /* ============================================================ 2. RESET & BASE ============================================================ */ *,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation:none !important; transition:none !important; } } body{ font-family:var(--ff-texte); font-size:1.0625rem; line-height:1.65; color:var(--encre); /* fond « papier d'ingénieur » : hairlines très pâles à la pente du toit */ background-color:var(--pierre); background-image:repeating-linear-gradient(96deg, rgba(43,43,115,.030) 0 1px, transparent 1px 22px); -webkit-font-smoothing:antialiased; /* `clip` et NON `hidden` : `hidden` ferait du un conteneur de défilement, ce qui, sur iOS Safari, piège les enfants `position:fixed` (la barre d'action mobile se retrouvait à flotter au milieu de la page). `clip` rogne sans créer de conteneur de défilement → position:fixed reste relatif au viewport. Le débordement horizontal réel a de toute façon été corrigé à la source (.hero{overflow-x:clip} + .defile-cadre), ceci n'est qu'un filet. */ overflow-x:clip; } img{ display:block; max-width:100%; height:auto; } a{ color:inherit; } ::selection{ background:var(--indigo); color:var(--papier); } h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:800; line-height:1.02; letter-spacing:-0.02em; text-wrap:balance; } /* ============================================================ 3. UTILITAIRES ============================================================ */ .mono-label{ font-family:var(--ff-mono); font-size:.72rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); } .mono-label::before{ content:"— "; } .conteneur{ width:min(100% - 2*var(--gouttiere), 78rem); margin-inline:auto; } /* ---- reveals ---- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } .reveal.visible{ opacity:1; transform:none; } .reveal[data-delai="1"]{ transition-delay:.1s; } .reveal[data-delai="2"]{ transition-delay:.2s; } .reveal[data-delai="3"]{ transition-delay:.3s; } @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; } } /* ============================================================ 4. HEADER ============================================================ */ .entete{ position:fixed; inset:0 0 auto 0; z-index:60; transition:background .35s, box-shadow .35s; } .entete.solide{ background:rgba(247,247,251,.88); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--ligne); } .entete-int{ display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; } .marque{ font-family:var(--ff-display); font-weight:800; font-size:1.15rem; text-decoration:none; letter-spacing:-.01em; line-height:1; } .marque span{ color:var(--indigo); } .marque small{ display:block; font-family:var(--ff-mono); font-weight:400; font-size:.58rem; letter-spacing:.22em; text-transform:uppercase; color:var(--zinc); margin-top:.3rem; } /* ---- logo SVG (recoloré selon le fond) ---- */ .marque{ display:inline-flex; align-items:center; } .logo{ display:block; width:auto; height:clamp(2.5rem, 5.5vw, 3.05rem); /* header */ color:var(--indigo); /* couleur des versants + typo */ --logo-accent:#6E6BA0; /* pic lavande / TOITURE, lisible sur fond clair */ } .nav-liens{ display:none; } .entete-int .cta-entete{ display:none; } /* CTA du header masqué en mobile (repris par le menu + la barre fixe) */ .cta{ display:inline-block; font-family:var(--ff-mono); font-size:.75rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; text-decoration:none; color:var(--papier); background:var(--encre); padding:.8rem 1.3rem; border-radius:99px; transition:background .25s, transform .25s; } .cta:hover{ background:var(--indigo); transform:translateY(-2px); } .cta:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; } .cta--indigo{ background:var(--indigo); } .cta--indigo:hover{ background:var(--indigo-nuit); } @media (min-width: 56rem){ .nav-liens{ display:flex; gap:2.2rem; list-style:none; align-items:center; } .nav-liens > li{ position:relative; } .nav-liens > li > a, .nav-bouton{ text-decoration:none; font-size:.92rem; font-weight:500; position:relative; padding-block:.25rem; font-family:inherit; color:inherit; } .nav-bouton{ background:none; border:0; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; } .nav-liens > li > a::after, .nav-bouton::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--indigo); transition:width .3s; } .nav-liens > li > a:hover::after, .nav-bouton:hover::after, .nav-bouton[aria-expanded="true"]::after{ width:100%; } /* chevron du menu déroulant margin-right : la rotation à 45° gonfle la boîte englobante de ×√2 (6,39 → 9,04 px). Sans cette réserve, le chevron déborde du bouton de 2 px. */ .chevron{ width:.4rem; height:.4rem; flex:none; margin-right:3px; border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) translate(-1px,-2px); transition:transform .25s; } .nav-bouton[aria-expanded="true"] .chevron{ transform:rotate(-135deg) translate(-2px,-1px); } /* sous-menu « Nos services » */ .sous-menu{ position:absolute; top:calc(100% + .9rem); left:-.9rem; z-index:70; min-width:17.5rem; list-style:none; display:grid; gap:.1rem; background:var(--papier); border:1px solid var(--ligne); border-radius:.65rem; padding:.5rem; box-shadow:0 20px 44px -20px rgba(22,22,59,.4); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .22s, transform .22s, visibility .22s; } .a-sous-menu:hover .sous-menu, .a-sous-menu:focus-within .sous-menu, .sous-menu.ouvert{ opacity:1; visibility:visible; transform:none; } .sous-menu a{ display:block; padding:.62rem .85rem; border-radius:.42rem; font-size:.9rem; font-weight:500; text-decoration:none; white-space:nowrap; } .sous-menu a::after{ display:none; } .sous-menu a:hover, .sous-menu a:focus-visible{ background:rgba(43,43,115,.07); color:var(--indigo); } } /* ============================================================ 5. HERO ============================================================ */ .hero{ position:relative; /* le halo `::before` déborde de -10% de chaque côté ; on le rogne ici. `clip` (et non `hidden`) n'ouvre pas de conteneur de défilement : rien à scroller. */ overflow-x:clip; padding:clamp(7.5rem, 16vh, 11rem) 0 0; } .hero::before{ content:""; position:absolute; inset:-20% -10% auto; height:80vh; z-index:-1; pointer-events:none; background: radial-gradient(58% 48% at 72% 8%, rgba(43,43,115,.12), transparent 70%), radial-gradient(70% 60% at 12% 0%, rgba(255,255,255,.9), transparent 65%); } .hero-int{ position:relative; } .hero .mono-label{ margin-bottom:1.4rem; display:block; } .hero h1{ font-size:clamp(2.9rem, 9.5vw, 7rem); max-width:14ch; } /* ligne mono-clé intégrée au

(SEO) : garde l'allure de l'ancien label */ .hero-kicker{ display:block; line-height:1.5; text-wrap:pretty; margin-bottom:1.4rem; } .hero h1 em{ font-style:normal; color:var(--indigo); position:relative; white-space:nowrap; } .hero .accroche{ margin-top:1.8rem; max-width:52ch; font-size:clamp(1.05rem, 2.3vw, 1.25rem); color:#4B4963; } .hero .accroche strong{ color:var(--encre); } .hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2.2rem; align-items:center; } .lien-tel{ font-family:var(--ff-mono); font-size:.8rem; letter-spacing:.08em; text-decoration:none; color:var(--encre); border-bottom:1px solid var(--ligne); padding-bottom:.2rem; } .lien-tel:hover{ color:var(--indigo); border-color:var(--indigo); } /* entrée discrète vers le dépannage : le visiteur qui a une fuite ne doit pas avoir à parcourir la page. Volontairement sobre — ce n'est pas un 6e bouton. */ .hero-urgence{ margin-top:1.1rem; } .hero-urgence a{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ff-mono); font-size:.76rem; letter-spacing:.06em; color:var(--indigo); text-decoration:none; } .hero-urgence a::after{ content:"→"; transition:transform .25s; } .hero-urgence a:hover{ text-decoration:underline; text-underline-offset:.3em; } .hero-urgence a:hover::after{ transform:translateX(3px); } @media (prefers-reduced-motion: reduce){ .hero-urgence a::after{ transition:none; } .hero-urgence a:hover::after{ transform:none; } } /* profil de toit dessiné */ .ligne-toit{ width:min(100%, 46rem); margin-top:2.6rem; overflow:visible; } .ligne-toit path{ fill:none; stroke:var(--indigo); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1200; stroke-dashoffset:1200; animation:tracer 2.2s .4s cubic-bezier(.4,0,.2,1) forwards; } .ligne-toit .cheminee{ stroke:var(--lavande); animation-delay:1.6s; } @keyframes tracer{ to{ stroke-dashoffset:0; } } @media (prefers-reduced-motion: reduce){ .ligne-toit path{ stroke-dashoffset:0; } } /* ---- marquee chantiers ---- .defile est pivoté ET agrandi (scale 1.06) pour éviter les coins blancs : sa boîte englobante déborde donc du viewport. `overflow:hidden` sur lui-même ne rogne que ses enfants — il faut un cadre parent pour le rogner, lui. Sans ce cadre, la page entière déborde horizontalement (masqué, mais réel). */ .defile-cadre{ overflow:hidden; } .defile{ margin-top:clamp(3rem, 8vw, 5.5rem); overflow:hidden; transform:rotate(calc(var(--pente) * -0.35)); scale:1.06; } .defile-piste{ display:flex; gap:1rem; width:max-content; animation:defiler 42s linear infinite; } .defile:hover .defile-piste{ animation-play-state:paused; } @keyframes defiler{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .defile{ transform:none; scale:1; } .defile-piste{ animation:none; flex-wrap:wrap; } } .defile-piste figure{ width:clamp(15rem, 42vw, 24rem); aspect-ratio:3/2; overflow:hidden; border-radius:.5rem; flex-shrink:0; } .defile-piste img{ width:100%; height:100%; object-fit:cover; filter:brightness(1.03) saturate(1.02); transition:transform .6s; } .defile-piste figure:hover img{ transform:scale(1.04); } /* ============================================================ 6. MANIFESTE ============================================================ */ .manifeste{ padding:clamp(4.5rem, 10vw, 8rem) 0; } .manifeste-int{ display:grid; gap:2rem; } .manifeste h2{ font-size:clamp(1.9rem, 5.2vw, 3.4rem); max-width:22ch; } .manifeste p{ max-width:var(--mesure); color:#4B4963; } .manifeste p strong{ color:var(--encre); } .manifeste .mono-label{ display:block; margin-bottom:1.2rem; } @media (min-width: 56rem){ .manifeste-int{ grid-template-columns: 1.1fr .9fr; gap:4rem; align-items:end; } } /* ============================================================ 7. SERVICES ============================================================ */ .services{ position:relative; background:var(--papier); padding:clamp(4.5rem, 10vw, 8rem) 0 clamp(5rem, 11vw, 9rem); clip-path:polygon(0 0, 100% clamp(1.5rem,4vw,3.5rem), 100% 100%, 0 100%); } .services-tete{ max-width:var(--mesure); margin-bottom:clamp(2.5rem,6vw,4.5rem); } .services-tete h2{ font-size:clamp(2.1rem, 6vw, 4rem); margin:.9rem 0 1.2rem; } .services-tete p{ color:#4B4963; } .services-tete p strong{ color:var(--encre); } .grille-services{ display:grid; gap:1.1rem; } .carte-service{ position:relative; overflow:hidden; border-radius:.6rem; aspect-ratio:4/5; color:var(--papier); display:flex; align-items:flex-end; text-decoration:none; } .carte-service img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .7s cubic-bezier(.2,.7,.2,1), filter .7s; filter:brightness(1.02); } .carte-service::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(11deg, rgba(23,23,62,.88) 18%, rgba(23,23,62,.16) 62%, rgba(23,23,62,0)); } .carte-service:hover img{ transform:scale(1.05); filter:brightness(1.06) saturate(1.05); } .carte-corps{ position:relative; z-index:2; padding:1.4rem 1.4rem 1.5rem; } /* Pastille sombre : à cette hauteur, le dégradé de .carte-service::after ne pose plus que ~45 % d'opacité. Sur les zones claires des photos (ciel, tuiles ocre), le libellé tombait à 2,0:1. La pastille le remonte à 6,9:1 sans assombrir la photo. Même motif que .portrait figcaption. */ .carte-corps .metier{ display:inline-block; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:#C7C2E6; background:rgba(23,23,62,.74); backdrop-filter:blur(6px); padding:.34rem .62rem; border-radius:99px; } .carte-corps h3{ font-size:clamp(1.35rem, 3.4vw, 1.7rem); margin:.55rem 0 .5rem; color:var(--papier); } .carte-corps p{ font-size:.94rem; color:rgba(255,255,255,.85); max-width:34ch; } @media (min-width: 40rem){ .grille-services{ grid-template-columns:repeat(2, 1fr); } } @media (min-width: 64rem){ .grille-services{ grid-template-columns:repeat(5, 1fr); gap:.9rem; } .carte-service:nth-child(2), .carte-service:nth-child(4){ transform:translateY(2rem); } } /* ============================================================ 8. POURQUOI ============================================================ */ .pourquoi{ padding:clamp(4.5rem, 10vw, 8rem) 0; } .pourquoi h2{ font-size:clamp(2rem, 5.6vw, 3.6rem); max-width:16ch; margin-top:.9rem; } .grille-pourquoi{ margin-top:clamp(2.5rem, 6vw, 4rem); display:grid; gap:0; border-top:1px solid var(--ligne); } .raison{ padding:1.8rem 0; border-bottom:1px solid var(--ligne); display:grid; gap:.7rem; } .raison h3{ font-size:1.25rem; font-weight:600; letter-spacing:-.01em; } .raison p{ color:#4B4963; max-width:var(--mesure); } .raison .repere{ font-family:var(--ff-mono); font-size:.72rem; color:var(--zinc); letter-spacing:.12em; } @media (min-width: 56rem){ .raison{ grid-template-columns: 8rem 18rem 1fr; gap:2rem; align-items:start; } .raison h3{ font-size:1.35rem; } } /* ============================================================ 9. TÉMOIGNAGES + CHIFFRES (bande ardoise) ============================================================ */ .ardoise{ background:var(--ardoise); color:var(--papier); padding:clamp(5rem, 11vw, 9rem) 0; clip-path:polygon(0 clamp(1.5rem,4vw,3.5rem), 100% 0, 100% 100%, 0 100%); } .ardoise .mono-label{ color:#C7C2E6; } .ardoise-tete h2{ font-size:clamp(2rem, 5.8vw, 3.8rem); max-width:20ch; margin-top:.9rem; } /* ---- bloc « Avis Google » (les avis vivent sur Google, pas ici) ---- */ .avis-google{ margin-top:clamp(2.5rem, 6vw, 4rem); display:grid; gap:2rem; border:1px solid var(--ligne-claire); border-radius:.7rem; background:rgba(255,255,255,.04); padding:clamp(1.6rem, 4vw, 2.6rem); } .note-bloc{ display:grid; gap:.5rem; justify-items:start; } .note-valeur{ font-family:var(--ff-display); font-weight:800; font-size:clamp(3.4rem, 9vw, 5rem); line-height:1; letter-spacing:-.02em; color:var(--papier); font-variant-numeric:tabular-nums; } .note-etoiles{ color:#F5C451; font-size:1.35rem; letter-spacing:.18em; } .note-detail{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.12em; /* la carte .avis-google pose un voile blanc à 4 % sur l'ardoise : le fond réel est #333379, où --lavande ne donne que 4,29:1. */ text-transform:uppercase; color:var(--lavande-clair); } .note-texte p{ color:rgba(255,255,255,.8); max-width:54ch; } .note-texte strong{ color:var(--papier); } .lien-avis{ margin-top:1.4rem; background:var(--papier); color:var(--encre); } .lien-avis:hover{ background:var(--lavande); } @media (min-width: 52rem){ .avis-google{ grid-template-columns:auto 1fr; gap:3.5rem; align-items:center; } .note-bloc{ border-right:1px solid var(--ligne-claire); padding-right:3rem; } } .grille-chiffres{ margin-top:clamp(3.5rem, 8vw, 6rem); display:grid; gap:2.4rem; border-top:1px solid var(--ligne-claire); padding-top:clamp(2.5rem, 6vw, 4rem); } .chiffre .valeur{ font-family:var(--ff-display); font-weight:800; font-size:clamp(2.6rem, 7vw, 4.2rem); line-height:1; letter-spacing:-.02em; color:var(--papier); font-variant-numeric:tabular-nums; } .chiffre .valeur em{ font-style:normal; color:var(--indigo); font-size:.55em; vertical-align:.35em; } .chiffre h3{ font-size:1.02rem; font-weight:600; margin:.7rem 0 .35rem; font-family:var(--ff-texte); letter-spacing:0; } .chiffre p{ font-size:.92rem; color:rgba(255,255,255,.68); max-width:30ch; } @media (min-width: 40rem){ .grille-chiffres{ grid-template-columns:repeat(2,1fr); } } @media (min-width: 64rem){ .grille-chiffres{ grid-template-columns:repeat(4,1fr); } } /* ============================================================ 10. ENGAGEMENT ============================================================ */ .engagement{ padding:clamp(4.5rem, 10vw, 8rem) 0; } .engagement-int{ display:grid; gap:2.5rem; } .engagement h2{ font-size:clamp(2rem, 5.4vw, 3.4rem); max-width:16ch; margin-top:.9rem; } .engagement p{ color:#4B4963; max-width:var(--mesure); margin-top:1.2rem; } .engagement .duo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; } .engagement .duo figure{ overflow:hidden; border-radius:.6rem; } .engagement .duo img{ width:100%; height:100%; object-fit:cover; aspect-ratio:3/4; } .engagement .duo figure:nth-child(2){ margin-top:2.2rem; } @media (min-width: 56rem){ .engagement-int{ grid-template-columns: 1fr 1fr; gap:4rem; align-items:center; } } /* ============================================================ 11. QUI SOMMES-NOUS ============================================================ */ .about{ background:var(--papier); padding:clamp(4.5rem, 10vw, 8rem) 0; clip-path:polygon(0 0, 100% clamp(1.5rem,4vw,3.5rem), 100% 100%, 0 100%); } .about-int{ display:grid; gap:2.5rem; } .about h2{ font-size:clamp(2rem, 5.6vw, 3.6rem); margin-top:.9rem; } .about p{ color:#4B4963; max-width:var(--mesure); margin-top:1.2rem; } .about p strong{ color:var(--encre); } .portrait{ overflow:hidden; border-radius:.6rem; position:relative; } .portrait img{ width:100%; aspect-ratio:3/4; object-fit:cover; } .portrait figcaption{ position:absolute; left:1rem; bottom:1rem; font-family:var(--ff-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--papier); background:rgba(22,22,59,.74); backdrop-filter:blur(6px); padding:.5rem .8rem; border-radius:99px; } /* les deux portraits d'Anthony et Alexis, côte à côte, légèrement décalés */ .portraits-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; align-items:start; } @media (min-width: 56rem){ .about-int{ grid-template-columns: .85fr 1.15fr; gap:4.5rem; align-items:center; } .about-int .portrait, .about-int .portraits-duo{ order:-1; } .portraits-duo figure:last-child{ margin-top:2.2rem; } } /* ============================================================ 12. CONTACT & FORMULAIRE ============================================================ */ .contact{ padding:clamp(4.5rem, 10vw, 8rem) 0; } .contact-int{ display:grid; gap:3rem; } .contact h2{ font-size:clamp(2rem, 5.6vw, 3.6rem); margin-top:.9rem; } .coordonnees{ margin-top:2rem; display:grid; gap:.8rem; } .coordonnees a{ font-family:var(--ff-mono); font-size:.86rem; letter-spacing:.05em; text-decoration:none; display:inline-flex; gap:.6rem; align-items:baseline; border-bottom:1px solid transparent; width:fit-content; } .coordonnees a:hover{ color:var(--indigo); } .coordonnees .tag{ color:var(--zinc); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; min-width:5.5rem; } .formulaire{ display:grid; gap:1.1rem; background:var(--papier); border:1px solid var(--ligne); border-radius:.8rem; padding:clamp(1.4rem, 4vw, 2.2rem); } .champ-cache{ display:none; } /* honeypot anti-spam Netlify (bot-field) */ .champ{ display:grid; gap:.4rem; } .champ label{ font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:#565471; } .champ input, .champ textarea{ font-family:var(--ff-texte); font-size:1rem; color:var(--encre); background:transparent; border:none; border-bottom:1px solid var(--ligne); padding:.6rem 0; border-radius:0; transition:border-color .3s; } .champ input:focus, .champ textarea:focus{ outline:none; border-bottom-color:var(--indigo); } .champ textarea{ min-height:7rem; resize:vertical; } .formulaire button{ font-family:var(--ff-mono); font-size:.78rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--papier); background:var(--encre); border:none; cursor:pointer; padding:.95rem 1.6rem; border-radius:99px; width:fit-content; transition:background .25s, transform .25s; } .formulaire button:hover{ background:var(--indigo); transform:translateY(-2px); } .duo-champs{ display:grid; gap:1.1rem; } @media (min-width: 40rem){ .duo-champs{ grid-template-columns:1fr 1fr; } } @media (min-width: 60rem){ .contact-int{ grid-template-columns: .9fr 1.1fr; gap:4.5rem; align-items:start; } } /* ============================================================ 13. PIED DE PAGE ============================================================ */ .pied{ background:var(--encre); color:rgba(255,255,255,.8); padding:clamp(3.5rem, 8vw, 6rem) 0 2rem; clip-path:polygon(0 clamp(1.2rem,3vw,2.5rem), 100% 0, 100% 100%, 0 100%); } .pied-int{ display:grid; gap:2.5rem; } .pied .marque{ color:var(--papier); } .pied .marque small{ color:var(--lavande); } .pied .logo{ height:clamp(3.1rem, 7vw, 3.9rem); /* plus grand dans le pied */ color:var(--papier); /* versants + typo en blanc */ --logo-accent:var(--lavande); /* pic + TOITURE en lavande */ } .pied p{ font-size:.94rem; max-width:44ch; margin-top:1rem; } .pied h4{ font-family:var(--ff-mono); font-weight:500; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--lavande); margin-bottom:1rem; } .pied ul{ list-style:none; display:grid; gap:.6rem; } .pied-adresse{ font-style:normal; font-size:.92rem; line-height:1.6; margin-top:1.2rem; color:rgba(255,255,255,.8); } .pied-horaires{ font-family:var(--ff-mono); font-size:.72rem; letter-spacing:.06em; color:var(--lavande); margin-top:.7rem; } .pied ul a{ text-decoration:none; font-size:.95rem; color:rgba(255,255,255,.72); transition:color .2s; } /* fond encre : l'indigo y était illisible — le survol s'éclaircit en lavande */ .pied ul a:hover{ color:var(--lavande-clair); } /* carte « secteur » (page Contact) : placeholder, chargée au clic */ .carte-conteneur{ border:1px solid var(--ligne); border-radius:.7rem; overflow:hidden; background: repeating-linear-gradient(96deg, rgba(43,43,115,.05) 0 1px, transparent 1px 16px), var(--papier); min-height:250px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.85rem; padding:1.9rem 1.4rem; text-align:center; } .carte-conteneur.carte-chargee{ padding:0; background:none; } .carte-conteneur iframe{ display:block; width:100%; height:340px; border:0; filter:grayscale(.2) brightness(1.03); } .carte-zone{ font-size:.94rem; color:#4B4963; margin:0; max-width:40ch; } .carte-charger{ cursor:pointer; font-family:var(--ff-mono); font-size:.74rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--papier); background:var(--indigo); border:none; padding:.8rem 1.3rem; border-radius:99px; transition:background .25s, transform .25s; } .carte-charger:hover{ background:var(--indigo-nuit); transform:translateY(-2px); } .carte-note{ font-size:.7rem; color:var(--zinc); margin:0; max-width:40ch; } .carte-fallback{ display:inline-block; margin-top:1rem; font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.06em; color:var(--indigo); text-decoration:none; } .carte-fallback:hover{ text-decoration:underline; } .mention{ margin-top:3rem; padding-top:1.4rem; border-top:1px solid var(--ligne-claire); font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; color:var(--lavande); /* fond sombre (--encre) : --zinc y tomberait à 3,34:1 */ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; } /* crédit studio : même écriture que la ligne de mention, aligné à droite sur desktop (centré sur mobile, comme la mention) */ .credit-studio{ display:block; text-align:center; margin-top:.9rem; padding-bottom:.2rem; font-family:var(--ff-mono); font-size:.7rem; letter-spacing:.1em; text-decoration:none; color:var(--lavande); transition:color .25s; } .credit-studio:hover{ color:var(--lavande-clair); } .credit-studio strong{ color:#C7C2E6; font-weight:600; } @media (min-width: 56rem){ .credit-studio{ text-align:right; margin-top:.5rem; } } @media (min-width: 56rem){ /* ---- pied desktop : la marque s'étire sur toute la largeur au-dessus d'un filet, puis quatre colonnes équilibrées. Avant, la colonne centrale empilait « Le site » + « Zones » et déséquilibrait tout. ---- */ .pied-int{ grid-template-columns: 1.05fr .8fr 1.05fr 1fr; gap:2.4rem 3rem; } .pied-int > :first-child{ grid-column:1 / -1; display:flex; align-items:center; gap:3rem; padding-bottom:2.1rem; border-bottom:1px solid rgba(255,255,255,.08); } .pied-int > :first-child p{ margin-top:0; font-size:.9rem; max-width:52ch; } .pied h4{ margin-bottom:1.1rem; } .pied ul{ gap:.65rem; } } /* ============================================================ 14. FOND DYNAMIQUE — blueprint charpente + parallaxe (intensité modérée · désactivé si prefers-reduced-motion) ============================================================ */ /* ---- plan de charpente « blueprint » qui se dessine au scroll ---- */ .pourquoi{ position:relative; overflow:hidden; } .pourquoi > .conteneur{ position:relative; z-index:1; } .plan-charpente{ position:absolute; z-index:0; pointer-events:none; right:clamp(-8rem, -6vw, -2rem); top:50%; width:min(48rem, 78vw); height:auto; transform:translateY(-50%); color:var(--indigo); opacity:.085; } .plan-charpente [data-trait]{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1700; stroke-dashoffset:1700; } .plan-charpente.trace [data-trait]{ animation:tracer-plan 2.3s cubic-bezier(.4,0,.2,1) forwards; } .plan-charpente.trace [data-trait="2"]{ animation-delay:.18s; } .plan-charpente.trace [data-trait="3"]{ animation-delay:.36s; } .plan-charpente.trace [data-trait="4"]{ animation-delay:.6s; } .plan-charpente.trace [data-trait="5"]{ animation-delay:.85s; } @keyframes tracer-plan{ to{ stroke-dashoffset:0; } } /* ---- parallaxe douce sur les grandes images ---- */ [data-parallax]{ transform:translate3d(0, var(--py, 0), 0) scale(1.2); will-change:transform; } /* ---- accessibilité : on fige tout ---- */ @media (prefers-reduced-motion: reduce){ .plan-charpente [data-trait]{ stroke-dashoffset:0; } [data-parallax]{ transform:none; } } /* ============================================================ 15. MOBILE — menu plein écran · carrousels · barre d'action (base = mobile ; le desktop reprend la main ≥ 56rem) ============================================================ */ /* ---- bouton burger ---- */ .burger{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; width:2.9rem; height:2.9rem; padding:0 .6rem; background:var(--papier); border:1px solid var(--ligne); border-radius:13px; cursor:pointer; position:relative; z-index:60; } .burger span{ display:block; height:2px; width:100%; background:var(--encre); border-radius:2px; transition:transform .3s cubic-bezier(.2,.7,.2,1), opacity .2s; } .burger[aria-expanded="true"]{ background:transparent; border-color:var(--ligne-claire); } .burger[aria-expanded="true"] span{ background:var(--papier); } .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ---- menu mobile plein écran ---- */ .menu-mobile{ position:fixed; inset:0; z-index:55; background:linear-gradient(158deg, var(--indigo-nuit), var(--encre)); color:var(--papier); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .35s ease, transform .4s ease, visibility .35s; } .menu-mobile.ouvert{ opacity:1; visibility:visible; transform:none; } .menu-mobile-int{ min-height:100%; width:100%; max-width:34rem; margin-inline:auto; padding:clamp(6rem,17vh,8.5rem) var(--gouttiere) calc(2.5rem + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:1.6rem; } .menu-mobile .mono-label{ color:var(--lavande); } .menu-liens{ list-style:none; display:flex; flex-direction:column; gap:.1rem; margin-top:.3rem; } /* liens de premier niveau uniquement (pas les sous-liens services) */ .menu-liens > li > a, .menu-groupe-titre{ display:flex; align-items:baseline; gap:1rem; font-family:var(--ff-display); font-weight:800; letter-spacing:-.02em; font-size:clamp(1.75rem, 8vw, 2.5rem); line-height:1.15; text-decoration:none; color:var(--papier); padding:.5rem 0; border-bottom:1px solid var(--ligne-claire); transition:color .2s, padding-left .25s; } .menu-liens > li > a:hover, .menu-liens > li > a:focus-visible{ color:var(--lavande); padding-left:.4rem; } .menu-liens .idx{ font-family:var(--ff-mono); font-weight:500; font-size:.78rem; color:var(--lavande); letter-spacing:.1em; flex:none; } /* « Nos services » : bouton dépliant */ /* NB : pas de `font:inherit` ici — le raccourci écraserait la typo display définie plus haut pour .menu-groupe-titre (même spécificité, règle plus tardive). */ .menu-groupe-titre{ width:100%; background:none; border:0; border-bottom:1px solid var(--ligne-claire); text-align:left; cursor:pointer; color:var(--papier); } .menu-groupe-titre:hover, .menu-groupe-titre:focus-visible{ color:var(--lavande); } .chevron-mobile{ margin-left:auto; margin-right:4px; align-self:center; flex:none; width:.62rem; height:.62rem; border-right:2.5px solid var(--lavande); border-bottom:2.5px solid var(--lavande); transform:rotate(45deg) translateY(-2px); transition:transform .3s cubic-bezier(.2,.7,.2,1); } .menu-groupe-titre[aria-expanded="true"] .chevron-mobile{ transform:rotate(-135deg) translateY(-2px); } /* repli/dépli animé : grid-template-rows 0fr → 1fr */ .menu-sous-wrap{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s cubic-bezier(.2,.7,.2,1); } .menu-groupe-titre[aria-expanded="true"] + .menu-sous-wrap{ grid-template-rows:1fr; } .menu-sous-wrap > ul{ overflow:hidden; min-height:0; } /* sous-liens « Nos services » Aucun padding/marge sur le