/* ========================================================== 1. TOKENS ========================================================== */ :root{ --color-accent: #B09862; --color-accent-light: #CBB78C; --color-accent-rgb: 176, 152, 98; --color-night: #041C2C; --color-night-2: #071f30; --color-night-3: #0c2c40; --color-text: #F2EFE9; --color-text-muted: #A7B4BC; --shadow-dark: rgba(0,0,0,0.6); --shadow-light: rgba(255,255,255,0.045); --radius-md: 14px; --radius-lg: 18px; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior: smooth; } body{ font-family:'Oxygen', sans-serif; background: var(--color-night); color: var(--color-text); min-height: 100vh; padding-bottom: 168px; position: relative; } a{ color:inherit; text-decoration:none; } img{ max-width:100%; display:block; } /* ========================================================== 2. FOND ANIMÉ — courbes topographiques (.topo-bg) canvas fixe en z-index négatif, tout le reste peint par-dessus ========================================================== */ .topo-bg{ position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; display:block; } /* ========================================================== 3. CURSEUR CUSTOM ========================================================== */ .cursor__dot, .cursor__ring{ position: fixed; top:0; left:0; pointer-events:none; border-radius:50%; z-index: 999; transform: translate(-50%,-50%); } .cursor__dot{ width:6px; height:6px; background: var(--color-accent-light); transition: opacity 0.2s ease; } .cursor__ring{ width:34px; height:34px; border:1px solid rgba(var(--color-accent-rgb),0.55); transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease; } .cursor__ring--hover{ width:56px; height:56px; border-color: rgba(var(--color-accent-rgb),0.9); background: rgba(var(--color-accent-rgb),0.08); } @media (pointer:coarse){ .cursor__dot, .cursor__ring{ display:none; } } /* filet de securite : tous les elements du site utilisent "cursor:none" pour laisser place au curseur personnalise (rond + anneau). Si ce curseur ne s'active pas (JS non execute, pointeur non détecté comme "fin"...), la classe .has-custom-cursor n'est jamais ajoutee sur — dans ce cas on force le curseur natif partout, pour ne jamais se retrouver avec un pointeur invisible au survol. */ html:not(.has-custom-cursor) *{ cursor: auto !important; } html:not(.has-custom-cursor) a, html:not(.has-custom-cursor) button, html:not(.has-custom-cursor) .bento__card, html:not(.has-custom-cursor) .case-card, html:not(.has-custom-cursor) .certs__item{ cursor: pointer !important; } /* ========================================================== 4. SÉLECTEUR DE LANGUE ========================================================== */ .langsw{ position: fixed; top: var(--space-5); right: var(--space-5); z-index: 60; display:flex; align-items:center; background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2)); border-radius: 999px; padding: var(--space-1); box-shadow: 5px 5px 12px var(--shadow-dark), -4px -4px 8px var(--shadow-light), 0 0 0 1px rgba(167,180,188,0.08); } .langsw__btn{ border:none; background:none; cursor:none; font-family:'Oxygen', sans-serif; font-size: 14px; letter-spacing: 0.06em; color: var(--color-text-muted); padding: var(--space-2) var(--space-4); border-radius: 999px; transition: color 0.25s ease, background 0.25s ease; } .langsw__btn--active{ color: var(--color-night); background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent)); } /* ========================================================== 5. TYPOGRAPHIE PARTAGÉE ========================================================== */ .eyebrow{ font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent-light); margin-bottom: var(--space-4); } .heading-lg{ font-weight: 300; font-size: clamp(32px, 5.5vw, 53px); line-height: 1.18; letter-spacing: -0.01em; } .heading-lg em{ font-style:normal; color: var(--color-accent-light); font-weight:400; } .text-body{ color: var(--color-text-muted); font-size: 17px; font-weight: 300; line-height: 1.75; } /* ========================================================== 6. HERO ========================================================== */ .hero{ position:relative; min-height: 86vh; display:flex; align-items:center; padding: var(--space-6) clamp(1.2rem, 5vw, 3rem); overflow:hidden; } .hero__mountain-canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; display:block; } .hero__mountain-fallback{ position:absolute; inset:0; z-index:-1; background: radial-gradient(circle at 66% 70%, rgba(var(--color-accent-rgb),0.30), transparent 45%), linear-gradient(180deg, #041C2C 0%, #0c2c40 45%, #3a2f4a 72%, var(--color-accent) 100%); } .hero::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background: linear-gradient(180deg, rgba(4,28,44,0.25) 0%, rgba(4,28,44,0.7) 75%, var(--color-night) 100%); } .hero__content{ position:relative; z-index:1; max-width: 640px; } .hero__title{ margin-bottom: var(--space-5); } .hero__subtitle{ max-width: 46ch; margin-bottom: var(--space-6); } .btn{ display:inline-flex; align-items:center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2)); box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.35); color: var(--color-text); font-family:'Oxygen', sans-serif; font-size: 16px; letter-spacing: 0.03em; border:none; cursor:none; transition: box-shadow 0.3s ease, transform 0.15s ease; } .btn:hover{ box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 6px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.6); } .btn:active{ transform: scale(0.97); } .btn__arrow{ color: var(--color-accent-light); } /* ========================================================== 7. SECTION générique ========================================================== */ .section{ position:relative; padding: var(--space-8) clamp(1.2rem, 5vw, 3rem); max-width: 1080px; margin:0 auto; } .section__head{ margin-bottom: var(--space-6); } .section__head .eyebrow{ margin-bottom: var(--space-2); } .section__head h2{ font-weight:400; font-size: clamp(25px,3.4vw,34px); letter-spacing:-0.01em; } /* ========================================================== 8. BENTO ========================================================== */ .bento__grid{ display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(200px, auto); grid-auto-flow: dense; gap: var(--space-5); } .bento__card{ position: relative; display: flex; flex-direction: column; gap: var(--space-3); border-radius: var(--radius-lg); padding: var(--space-5); background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2)); border: 1px solid rgba(167,180,188,0.10); box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light); overflow: hidden; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.4s ease, opacity 0.4s ease, filter 0.4s ease; cursor: none; } /* effet spotlight : quand une carte grossit et deborde sur ses voisines, celles-ci s'estompent legerement — le debordement se lit comme un choix de mise en scene, plus jamais comme une bordure qui "tranche" un texte */ .bento__grid.is-hovering .bento__card:not(:hover){ opacity: 0.55; filter: saturate(0.7) blur(0.5px); } .bento__card::before{ content:""; position:absolute; inset:0; opacity:0; border-radius: inherit; background: radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(var(--color-accent-rgb),0.24), transparent 70%); transition: opacity 0.6s ease; pointer-events:none; } .bento__card:hover::before{ opacity:1; } .bento__card:hover{ transform: scale(1.14); z-index: 30; overflow: visible; border-color: rgba(var(--color-accent-rgb),0.55); box-shadow: 16px 16px 32px var(--shadow-dark), -12px -12px 22px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.4); } /* la carte "avale" son coin de jonction pour que le panneau supplementaire lise comme un simple prolongement d'elle-meme, pas comme un second bloc */ .bento__card:hover:has(.bento__more--down){ border-bottom-left-radius:0; border-bottom-right-radius:0; } .bento__card:hover:has(.bento__more--up){ border-top-left-radius:0; border-top-right-radius:0; } .bento__card--large{ grid-column: span 3; grid-row: span 2; } .bento__card--medium{ grid-column: span 2; grid-row: span 1; } /* panneau d'info complementaire — hors flux (position:absolute), donc ne modifie jamais la taille de la carte ni de la grille au repos ; accole directement au bord de la carte (meme fond, meme bordure sur 3 cotes, coin de jonction carre) pour lire comme UN SEUL bloc qui grandit, jamais comme une zone distincte */ .bento__more{ position:absolute; left:0; right:0; padding: var(--space-4) var(--space-5); background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2)); border: 1px solid rgba(var(--color-accent-rgb),0.55); font-size: 14.5px; color: var(--color-text-muted); line-height: 1.6; opacity: 0; transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s; pointer-events: none; z-index: 5; } .bento__more--down{ top: 100%; margin-top: -2px; transform: translateY(-8px); border-top: none; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .bento__more--up{ bottom: 100%; margin-bottom: -2px; transform: translateY(8px); border-bottom: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .bento__card:hover .bento__more{ opacity: 1; transform: translateY(0); pointer-events: auto; } .bento__head{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--space-2) var(--space-3); } .bento__level{ opacity: 0.75; } /* photo en fond de carte, sous le contenu — la disposition texte/icone ne change pas d'un pixel, l'image est juste posee derriere */ .bento__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; border-radius:inherit; } .bento__bg img{ width:100%; height:100%; object-fit:cover; } .bento__bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2)); opacity: 0.86; } .bento__dot{ z-index:2; } .bento__head, .bento__body, .bento__cta{ position:relative; z-index:2; } .bento__icon{ width: 24px; height: 24px; display:inline-flex; align-items:center; justify-content:center; color: var(--color-accent-light); flex-shrink:0; } .bento__icon svg{ width:100%; height:100%; } .bento__card--large .bento__icon{ width: 30px; height: 30px; } .bento__tag{ display:inline-block; font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-light); font-weight: 400; padding: var(--space-1) var(--space-3); border-radius: 999px; background: rgba(var(--color-accent-rgb),0.14); border: 1px solid rgba(var(--color-accent-rgb),0.32); width: fit-content; } .bento__body{ flex:1; display:flex; flex-direction:column; gap: var(--space-2); } .bento__level{ font-size: 12px; letter-spacing: 0.08em; color: var(--color-text-muted); font-weight: 300; font-style: italic; } .bento__title{ font-weight: 400; font-size: 20.5px; line-height: 1.3; letter-spacing: -0.01em; color: var(--color-text); } .bento__card--medium .bento__title{ font-size: 24px; } .bento__card--large .bento__title{ font-size: 28.5px; max-width: 14ch; } .bento__text{ font-weight: 300; font-size: 15.5px; color: var(--color-text-muted); line-height: 1.6; max-width: 36ch; } .bento__cta{ display:inline-flex; align-items:center; gap: var(--space-2); font-size: 14.5px; font-weight:400; color: var(--color-text-muted); opacity:0; transform: translateY(4px); transition: opacity 0.35s ease, transform 0.35s ease, color 0.3s ease; margin-top: auto; padding-top: var(--space-2); } .bento__card:hover .bento__cta{ opacity:1; transform:translateY(0); color: var(--color-accent-light); } .bento__cta-arrow{ transition: transform 0.3s ease; } .bento__card:hover .bento__cta-arrow{ transform: translateX(3px); } .bento__dot{ position:absolute; top: var(--space-5); right: var(--space-5); width: 7px; height: 7px; border-radius: 50%; background: var(--color-accent-light); box-shadow: 0 0 12px 2px rgba(var(--color-accent-rgb),0.55); } /* ========================================================== 9. SEO — texte + photo ========================================================== */ .seo__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items:center; } .seo__text{ display:flex; flex-direction:column; gap: var(--space-4); } .seo__text strong{ color: var(--color-text); font-weight:400; } .seo__photo{ border-radius: var(--radius-lg); overflow:hidden; border: 1px solid rgba(167,180,188,0.12); box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light); aspect-ratio: 4/3; } .seo__photo img{ width:100%; height:100%; object-fit:cover; } /* ========================================================== 10. CERTIFICATIONS ========================================================== */ .certs__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .certs__item{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: var(--space-3); padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2)); border: 1px solid rgba(167,180,188,0.10); box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light); transition: border-color 0.35s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); cursor: none; } .certs__item:hover{ transform: translateY(-3px); border-color: rgba(var(--color-accent-rgb),0.5); } .certs__icon{ width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; font-size: 23px; border-radius: 50%; background: rgba(var(--color-accent-rgb),0.14); border: 1px solid rgba(var(--color-accent-rgb),0.32); } .certs__icon img{ display:block; } .certs__name{ font-size: 15.5px; font-weight:400; color: var(--color-text); line-height:1.4; } .certs__issuer{ font-size: 13px; color: var(--color-text-muted); font-weight:300; } .certs__desc{ font-size: 13px; color: var(--color-text-muted); font-weight:300; line-height:1.5; margin-top: -4px; } /* ========================================================== 10bis. MARQUEE — bandeau de logos partenaires, défilement continu ========================================================== */ .marquee{ position: relative; width: 100%; overflow: hidden; padding: var(--space-6) 0; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); } .marquee__track{ display:flex; align-items:center; gap: var(--space-5); width: max-content; animation: marquee-scroll 36s linear infinite; } .marquee:hover .marquee__track{ animation-play-state: paused; } @keyframes marquee-scroll{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } } .marquee__logo{ flex: 0 0 auto; display:flex; align-items:center; justify-content:center; width: 192px; height: 126px; padding: var(--space-4); border-radius: var(--radius-md); background: #FFFFFF; box-shadow: 6px 6px 14px var(--shadow-dark), -4px -4px 10px var(--shadow-light); font-family:'Oxygen', sans-serif; font-size: 19.5px; font-weight: 400; letter-spacing: 0.01em; text-align:center; line-height:1.25; color: var(--color-night); white-space: normal; opacity: 0.9; transition: opacity 0.35s ease, transform 0.35s ease; } .marquee__logo:hover{ opacity: 1; transform: translateY(-2px); color: var(--color-night); } .marquee__logo img{ max-width: 84%; max-height: 78%; object-fit: contain; } @media (prefers-reduced-motion: reduce){ .marquee__track{ animation: none; } } /* ========================================================== 11. QBAR — barre de question, repensée pour être bien plus visible panneau plein (plus de fondu), bordure haute accent, label au-dessus ========================================================== */ .qbar{ position: fixed; left:0; right:0; bottom:0; z-index: 50; padding: var(--space-5) clamp(1rem, 4vw, 2rem) var(--space-4); background: var(--color-night-2); border-top: 1px solid rgba(var(--color-accent-rgb),0.4); box-shadow: 0 -12px 30px rgba(0,0,0,0.45); backdrop-filter: blur(8px); } .qbar__inner{ max-width: 720px; margin:0 auto; display:flex; flex-direction:column; gap: var(--space-3); } .qbar__label{ display:flex; align-items:center; gap: var(--space-2); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-light); font-weight: 400; } .qbar__label-dot{ width:6px; height:6px; border-radius:50%; background: var(--color-accent-light); box-shadow: 0 0 8px 2px rgba(var(--color-accent-rgb),0.7); } .qbar__answer{ display:none; padding: var(--space-4); border-radius: 12px; background: var(--color-night-3); border: 1px solid rgba(var(--color-accent-rgb),0.35); font-size: 15.5px; color: var(--color-text-muted); line-height:1.5; } .qbar__answer--show{ display:block; } .qbar__answer a{ color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 2px; } .qbar__form{ display:flex; align-items:center; gap: var(--space-3); background: var(--color-night-3); border-radius: 999px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5); box-shadow: 0 0 0 1.5px rgba(var(--color-accent-rgb),0.5), 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light); transition: box-shadow 0.3s ease; } .qbar__form:focus-within{ box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb),0.85), 0 0 16px rgba(var(--color-accent-rgb),0.25); } .qbar__input{ flex:1; background:none; border:none; outline:none; color: var(--color-text); font-family:'Oxygen', sans-serif; font-size: 18px; font-weight: 300; } .qbar__input::placeholder{ color: var(--color-text-muted); } .qbar__submit{ flex-shrink:0; width: 42px; height:42px; border-radius:50%; border:none; cursor:none; background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent)); color: var(--color-night); font-size: 19.5px; font-weight:700; display:flex; align-items:center; justify-content:center; transition: transform 0.15s ease; } .qbar__submit:active{ transform: scale(0.9); } .qbar__nav{ display:flex; align-items:center; justify-content:center; gap: var(--space-6); } .qbar__nav a{ display:inline-flex; align-items:center; gap: var(--space-1); font-size: 14.5px; letter-spacing: 0.05em; color: var(--color-text-muted); padding: var(--space-1) 0; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-color 0.25s ease; } .qbar__nav a:hover{ color: var(--color-accent-light); border-color: rgba(var(--color-accent-rgb),0.5); } .qbar__nav svg{ width:13px; height:13px; fill: currentColor; } /* ========================================================== 12bis. EN-TÊTE DE SOUS-PAGE — .pagehead (remplace le hero plein écran sur les pages secondaires : plus court, même esprit visuel) ========================================================== */ .pagehead{ position:relative; padding: calc(var(--space-9) + var(--space-5)) clamp(1.2rem, 5vw, 3rem) var(--space-7); max-width: 1080px; margin: 0 auto; } .pagehead__title{ margin-bottom: var(--space-4); max-width: 20ch; } .pagehead__subtitle{ max-width: 56ch; } /* ========================================================== 13. CASE CARDS — grille masonry de projets (page Projets) colonnes CSS plutot que grid : chaque carte garde sa hauteur naturelle (variable selon le format de vignette), donc les cartes s'empilent en cascade plutot qu'en rangees figees ========================================================== */ .cases__grid{ column-count: 3; column-gap: var(--space-5); } .case-card{ position:relative; display:flex; flex-direction:column; gap: var(--space-3); width:100%; break-inside: avoid; margin-bottom: var(--space-5); border-radius: var(--radius-lg); padding: var(--space-6); background: linear-gradient(155deg, var(--color-night-3), var(--color-night-2)); border: 1px solid rgba(167,180,188,0.10); box-shadow: 8px 8px 18px var(--shadow-dark), -6px -6px 14px var(--shadow-light); overflow:hidden; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), border-color 0.4s ease, box-shadow 0.5s ease; cursor:none; } .case-card:hover{ transform: translateY(-4px); border-color: rgba(var(--color-accent-rgb),0.5); box-shadow: 12px 12px 26px var(--shadow-dark), -9px -9px 18px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.3); } .case-card__thumb{ border-radius: var(--radius-md); aspect-ratio: 16/10; /* format par defaut, ecrase par les modificateurs ci-dessous */ overflow:hidden; border: 1px solid rgba(167,180,188,0.12); } /* formats varies, repartis sur les cartes pour un vrai rendu masonry */ .case-card__thumb--tall{ aspect-ratio: 3/4; } .case-card__thumb--square{ aspect-ratio: 1/1; } .case-card__thumb--wide{ aspect-ratio: 21/9; } .case-card__thumb--portrait{ aspect-ratio: 2/3; } .case-card__thumb img{ width:100%; height:100%; object-fit:cover; } .case-card__tag{ display:inline-block; width:fit-content; font-size: 12.5px; letter-spacing: 0.14em; text-transform:uppercase; color: var(--color-accent-light); padding: var(--space-1) var(--space-3); border-radius: 999px; background: rgba(var(--color-accent-rgb),0.14); border: 1px solid rgba(var(--color-accent-rgb),0.32); } .case-card__title{ font-size: 23px; font-weight:400; color: var(--color-text); letter-spacing:-0.01em; } .case-card__text{ font-size: 15.5px; color: var(--color-text-muted); line-height:1.6; } .case-card__meta{ display:flex; gap: var(--space-4); margin-top: auto; padding-top: var(--space-3); border-top: 1px solid rgba(167,180,188,0.10); font-size: 13px; color: var(--color-text-muted); } .placeholder-note{ font-size: 14px; color: var(--color-text-muted); font-style: italic; border: 1px dashed rgba(var(--color-accent-rgb),0.35); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-6); } /* ========================================================== 13quater. ARTICLES — page "Carnet de bord" ========================================================== */ .articles-list{ display:flex; flex-direction:column; } .article-block{ padding: var(--space-8) 0; border-bottom: 1px solid rgba(167,180,188,0.12); } .article-block:first-child{ padding-top: 0; } .article-block:last-child{ border-bottom: none; } .article-block__meta{ display:flex; align-items:center; gap: var(--space-3); margin-bottom: var(--space-3); } .article-block__tag{ font-size: 12.5px; letter-spacing: 0.14em; text-transform:uppercase; color: var(--color-accent-light); padding: var(--space-1) var(--space-3); border-radius: 999px; background: rgba(var(--color-accent-rgb),0.14); border: 1px solid rgba(var(--color-accent-rgb),0.32); } .article-block__date{ font-size: 13px; color: var(--color-text-muted); } .article-block__title{ font-weight:400; font-size: 26px; letter-spacing:-0.01em; color: var(--color-text); margin-bottom: var(--space-4); } .article-block__body p{ color: var(--color-text-muted); font-size: 15.5px; line-height:1.75; font-weight:300; margin-bottom: var(--space-4); } .article-block__body ol, .article-block__body ul{ color: var(--color-text-muted); font-size: 15.5px; line-height:1.75; font-weight:300; margin: 0 0 var(--space-4) var(--space-5); } .article-block__body strong{ color: var(--color-text); font-weight:400; } .article-block__note{ font-size: 13.5px; color: var(--color-text-muted); font-style:italic; border-left: 2px solid rgba(var(--color-accent-rgb),0.4); padding-left: var(--space-4); margin-bottom: var(--space-5); } .code-block{ background: #05151f; border: 1px solid rgba(167,180,188,0.15); border-radius: var(--radius-md); padding: var(--space-5); margin-bottom: var(--space-5); overflow-x: auto; } .code-block__filename{ font-size: 11px; letter-spacing:0.06em; text-transform:uppercase; color: var(--color-accent-light); margin-bottom: var(--space-3); font-family: 'Oxygen', sans-serif; } .code-block pre{ margin:0; } .code-block code{ font-family: 'SF Mono', 'Courier New', monospace; font-size: 13px; line-height:1.7; color: #cbd5df; white-space: pre; } /* ========================================================== 13quinquies. CODE CARDS — bloc de code replie par defaut (details/summary natif), en colonnes type masonry, le texte complet ne s'affiche qu'au clic ========================================================== */ .code-cards{ column-count: 2; column-gap: var(--space-5); margin: var(--space-6) 0; } .code-card{ break-inside: avoid; margin-bottom: var(--space-5); background: var(--color-night-3); border: 1px solid rgba(167,180,188,0.14); border-radius: var(--radius-lg); padding: var(--space-5); cursor: pointer; } .code-card summary{ list-style:none; cursor: none; display:flex; align-items:center; justify-content:space-between; gap: var(--space-3); } .code-card summary::-webkit-details-marker{ display:none; } .code-card summary::after{ content:"+"; flex-shrink:0; font-size: 20px; font-weight:300; color: var(--color-accent-light); } .code-card[open] summary::after{ content:"−"; } .code-card__label{ display:flex; flex-direction:column; gap: var(--space-1); } .code-card__lang{ font-size: 11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-accent-light); } .code-card__name{ font-size: 15px; color: var(--color-text); font-weight:400; } .code-card__preview{ margin-top: var(--space-3); font-family: 'SF Mono', 'Courier New', monospace; font-size: 12px; color: var(--color-text-muted); white-space: nowrap; overflow:hidden; text-overflow:ellipsis; } .code-card[open] .code-card__preview{ display:none; } .code-card .code-block{ margin-top: var(--space-4); margin-bottom:0; } /* ========================================================== 13sexies. DÉMO INTERACTIVE — grille reactive au survol (simulation reelle du code presente dans l'article) ========================================================== */ .hey-demo{ position:relative; background:#000; border-radius: var(--radius-lg); border: 1px solid rgba(167,180,188,0.14); overflow:hidden; margin-bottom: var(--space-6); padding: var(--space-6) var(--space-5) var(--space-5); } .hey-demo__label{ font-size: 11px; letter-spacing:0.1em; text-transform:uppercase; color: var(--color-accent-light); margin-bottom: var(--space-4); } .hey-demo__grid{ --cols: 14; --rows: 6; display:grid; grid-template: repeat(var(--rows), 1fr) / repeat(var(--cols), 1fr); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 600; line-height: 1; height: 220px; touch-action: none; } .hey-demo__grid div{ padding: 2px; opacity: calc(var(--opacity, 0.15) * 0.5); aspect-ratio: 1; display:grid; place-items:center; scale: 1.3; filter: grayscale(1); color: hsl(var(--hue, 20) 80% 60%); transition-property: opacity, rotate, filter; transition-duration: 0.8s, 0.4s, 0.6s; transition-timing-function: ease-in, ease-out, ease-out; } @media (hover:hover) and (pointer:fine){ .hey-demo__grid div:hover{ transition-duration: 0s; rotate: calc(var(--grade, 0) * 90deg); filter: grayscale(0) brightness(1.5); opacity: 1; } } .hey-demo__follow{ position:absolute; top: var(--space-4); right: var(--space-4); color: var(--color-accent-light); width: 34px; height:34px; display:flex; align-items:center; justify-content:center; opacity:0.85; cursor:none; } .hey-demo__follow:hover{ opacity:1; } .hey-demo__follow svg{ width:75%; } @media (max-width: 700px){ .code-cards{ column-count: 1; } } /* ========================================================== 13ter. FILTRES — tags cliquables au-dessus de la grille de projets ========================================================== */ .filter-tags{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-bottom: var(--space-6); } .filter-tag{ font-family:'Oxygen', sans-serif; font-size: 15px; letter-spacing:0.03em; color: var(--color-text-muted); background: var(--color-night-3); border: 1px solid rgba(167,180,188,0.14); border-radius: 999px; padding: var(--space-2) var(--space-5); cursor: none; transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease; } .filter-tag:hover{ color: var(--color-text); border-color: rgba(var(--color-accent-rgb),0.35); } .filter-tag--active{ color: var(--color-night); background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent)); border-color: transparent; } /* vignette "logo" (fond blanc) quand on n'a pas de vraie capture d'ecran du projet */ .case-card__thumb--logo{ background:#FFFFFF; display:flex; align-items:center; justify-content:center; padding: var(--space-6); } .case-card__thumb--logo img{ width:100%; height:100%; object-fit:contain; } /* ========================================================== 13bis. FAQ — accordéon (details/summary natif : accessible, pas de JS necessaire, question visible, reponse au clic) ========================================================== */ .faq-item{ cursor: pointer; } .faq-item summary{ list-style: none; cursor: none; display:flex; align-items:center; justify-content:space-between; gap: var(--space-4); } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary::after{ content:"+"; flex-shrink:0; font-size: 23px; font-weight:300; color: var(--color-accent-light); transition: transform 0.3s ease; } .faq-item[open] summary::after{ content:"−"; } .faq-item .case-card__text{ margin-top: var(--space-3); } /* ========================================================== 14. FORMULAIRE DE CONTACT — .form-field ========================================================== */ .contact__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-7); align-items:start; } .form-field{ display:flex; flex-direction:column; gap: var(--space-2); margin-bottom: var(--space-5); } .form-field label{ font-size: 14px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); } .form-field input, .form-field textarea{ font-family:'Oxygen', sans-serif; font-size: 16.5px; color: var(--color-text); background: var(--color-night-3); border: 1px solid rgba(167,180,188,0.14); border-radius: var(--radius-md); padding: var(--space-4); outline: none; box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light); transition: border-color 0.25s ease, box-shadow 0.25s ease; resize: vertical; } .form-field input:focus, .form-field textarea:focus{ border-color: rgba(var(--color-accent-rgb),0.6); box-shadow: inset 3px 3px 8px var(--shadow-dark), inset -2px -2px 6px var(--shadow-light), 0 0 0 2px rgba(var(--color-accent-rgb),0.25); } .form-field input::placeholder, .form-field textarea::placeholder{ color: var(--color-text-muted); } .form-submit{ display:inline-flex; align-items:center; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: linear-gradient(145deg, var(--color-accent-light), var(--color-accent)); color: var(--color-night); font-family:'Oxygen', sans-serif; font-size: 16px; font-weight:400; letter-spacing:0.03em; border:none; cursor:none; box-shadow: 6px 6px 14px var(--shadow-dark), -5px -5px 10px var(--shadow-light); transition: transform 0.15s ease, box-shadow 0.3s ease; } .form-submit:hover{ box-shadow: 3px 3px 8px var(--shadow-dark), -3px -3px 6px var(--shadow-light); } .form-submit:active{ transform: scale(0.97); } .contact__info{ display:flex; flex-direction:column; gap: var(--space-5); } .contact__info-block{ display:flex; flex-direction:column; gap: var(--space-1); } .contact__info-block .label{ font-size: 14px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); } .contact__info-block a{ color: var(--color-text); text-decoration:none; } .contact__info-block a:hover{ color: var(--color-accent-light); } /* ========================================================== 15. PAGES LÉGALES — typographie de contenu long ========================================================== */ .legal{ max-width: 760px; margin: 0 auto; padding: calc(var(--space-9) + var(--space-5)) clamp(1.2rem, 5vw, 3rem) var(--space-8); } .legal h2{ font-weight:400; font-size: 23px; margin-top: var(--space-7); margin-bottom: var(--space-3); color: var(--color-text); } .legal h2:first-of-type{ margin-top: var(--space-5); } .legal p{ color: var(--color-text-muted); font-size: 16.5px; line-height:1.75; font-weight:300; margin-bottom: var(--space-4); } .legal ul{ color: var(--color-text-muted); font-size: 16.5px; line-height:1.75; font-weight:300; margin: 0 0 var(--space-4) var(--space-5); } .legal strong{ color: var(--color-text); font-weight:400; } .legal-updated{ font-size: 14px; color: var(--color-text-muted); font-style:italic; margin-bottom: var(--space-6); } /* ========================================================== 16. PIED DE PAGE — liens légaux, discret, avant la qbar ========================================================== */ .footer{ max-width: 1080px; margin: 0 auto; padding: var(--space-6) clamp(1.2rem, 5vw, 3rem) var(--space-4); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap: var(--space-3); border-top: 1px solid rgba(167,180,188,0.10); } .footer__copy{ font-size: 14px; color: var(--color-text-muted); } .footer__links{ display:flex; gap: var(--space-5); } .footer__links a{ font-size: 14px; color: var(--color-text-muted); text-decoration:none; } .footer__links a:hover{ color: var(--color-accent-light); } /* ========================================================== 17bis. WIDGET DE CONTACT — onglet fixe sur le bord droit + popup (remplace la page contact dediee, pas de formulaire) ========================================================== */ .contact-widget{ position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 70; appearance: none; -webkit-appearance: none; text-align: left; display:flex; align-items:center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: linear-gradient(145deg, var(--color-night-3), var(--color-night-2)); border: 1px solid rgba(var(--color-accent-rgb),0.35); border-right: none; border-radius: var(--radius-md) 0 0 var(--radius-md); box-shadow: -6px 6px 16px var(--shadow-dark), -2px -2px 8px var(--shadow-light); color: var(--color-text); font-family:'Oxygen', sans-serif; font-size: 14px; letter-spacing: 0.03em; cursor: none; pointer-events: auto; transition: padding 0.25s ease, box-shadow 0.25s ease; } .contact-widget:hover{ padding-right: var(--space-6); box-shadow: -8px 8px 20px var(--shadow-dark), -2px -2px 8px var(--shadow-light), 0 0 0 1px rgba(var(--color-accent-rgb),0.4); } .contact-widget svg{ width:18px; height:18px; color: var(--color-accent-light); flex-shrink:0; } .contact-popup{ position: fixed; inset: 0; z-index: 90; display:none; align-items:center; justify-content:center; padding: var(--space-5); } .contact-popup.is-open{ display:flex; } .contact-popup__backdrop{ position:absolute; inset:0; background: rgba(4,28,44,0.72); backdrop-filter: blur(5px); } .contact-popup__card{ position:relative; z-index:1; width:100%; max-width: 380px; background: var(--color-night-2); border: 1px solid rgba(var(--color-accent-rgb),0.4); border-radius: var(--radius-lg); padding: var(--space-7) var(--space-6) var(--space-6); box-shadow: 16px 16px 34px var(--shadow-dark), -10px -10px 20px var(--shadow-light); animation: contact-pop-in 0.3s cubic-bezier(0.16,1,0.3,1); } @keyframes contact-pop-in{ from{ opacity:0; transform: scale(0.94) translateY(8px); } to{ opacity:1; transform: scale(1) translateY(0); } } .contact-popup__close{ position:absolute; top: var(--space-4); right: var(--space-4); width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--color-night-3); border: 1px solid rgba(167,180,188,0.15); color: var(--color-text-muted); font-size: 18px; line-height:1; cursor:none; } .contact-popup__close:hover{ color: var(--color-accent-light); border-color: rgba(var(--color-accent-rgb),0.4); } .contact-popup__title{ font-weight:400; font-size: 21px; color: var(--color-text); margin: var(--space-2) 0 var(--space-5); letter-spacing:-0.01em; } .contact-popup__item{ display:flex; flex-direction:column; gap: var(--space-1); margin-bottom: var(--space-4); } .contact-popup__item .label{ font-size:12px; letter-spacing:0.08em; text-transform:uppercase; color: var(--color-accent-light); } .contact-popup__item a, .contact-popup__item span{ color: var(--color-text); font-size: 15px; } .contact-popup__item a{ text-decoration:none; } .contact-popup__item a:hover{ color: var(--color-accent-light); } @media (max-width: 560px){ .contact-widget span{ display:none; } .contact-widget{ padding: var(--space-3); } .contact-widget:hover{ padding-right: var(--space-3); } } /* ========================================================== 18. RESPONSIVE ========================================================== */ @media (max-width: 860px){ .bento__grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(190px, auto); } .bento__card--large{ grid-column: span 2; grid-row: span 1; } .bento__card--medium{ grid-column: span 2; grid-row: span 1; } .seo__grid{ grid-template-columns: 1fr; gap: var(--space-6); } .seo__photo{ order:-1; aspect-ratio: 16/9; } .certs__grid{ grid-template-columns: repeat(2, 1fr); } .cases__grid{ column-count: 2; } .contact__grid{ grid-template-columns: 1fr; } } @media (max-width: 560px){ .hero{ min-height: 78vh; align-items:flex-end; padding-bottom: var(--space-7); } .bento__grid{ grid-template-columns: 1fr; grid-auto-rows: auto; } .bento__card--large{ grid-column: span 1; grid-row: span 1; } .bento__card--medium{ grid-column: span 1; } .cases__grid{ column-count: 1; } .qbar__form{ padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); } .qbar__nav{ gap: var(--space-5); flex-wrap:wrap; row-gap: var(--space-2); } .langsw{ top: var(--space-4); right: var(--space-4); } .footer{ flex-direction:column; align-items:flex-start; } } /* ========================================================== 12ter. GRANDS ÉCRANS — au-dela de 1440px, les conteneurs a largeur fixe (1080px) laissaient trop de vide et la grille bento restait figee a 4 colonnes quel que soit l'espace disponible ; on etale un peu plus le contenu pour que la composition reste equilibree. ========================================================== */ @media (min-width: 1440px){ .section, .pagehead, .footer, .qbar__inner{ max-width: 1320px; } .bento__grid{ grid-template-columns: repeat(5, 1fr); } .bento__card--medium{ grid-column: span 2; grid-row: span 1; } .certs__grid{ grid-template-columns: repeat(3, 1fr); } .cases__grid{ column-count: 4; } .hero__content{ max-width: 720px; } } @media (min-width: 1920px){ .section, .pagehead, .footer, .qbar__inner{ max-width: 1520px; } .bento__grid{ grid-template-columns: repeat(6, 1fr); } }