/* ============================================================ LA GUILDE — Design System (feuille de style partagée) Tout est défini ICI une seule fois : couleurs, typo, espacements, composants. Chaque section pioche dans ces tokens et ces classes. Règle d'or : aucune taille ni distance "en dur" dans les sections. ============================================================ */ /* ---- Polices ---------------------------------------------- En prod : héberger en local (RGPD + fiabilité). Les .woff2 vont dans assets/fonts/. En attendant le dev tourne via les du (CDN). On bascule en @font-face local à la finition. */ /* Polices 100% LOCALES (libres, licence OFL) — fichiers variables, aucun appel externe. Inter = corps ; Space Grotesk = titres (remplace Posterama, abandonnée pour cause de licence commerciale). RGPD-clean + fiable. */ @font-face { font-family:'Inter'; src:url('../assets/fonts/inter.woff2') format('woff2'); font-weight:400 600; font-style:normal; font-display:swap; } @font-face { font-family:'Space Grotesk'; src:url('../assets/fonts/space-grotesk.woff2') format('woff2'); font-weight:300 700; font-style:normal; font-display:swap; } /* ---- Reset minimal ---------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } ul { list-style: none; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* ============================================================ TOKENS ============================================================ */ :root { /* Couleurs — couleur = statut de parole, jamais décorative */ --fond: #f6f6f4; /* fond / respiration */ --blanc: #ffffff; /* cartes (relief sans bordure) */ --noir: #1a1a18; /* texte / structure */ --jaune: #edc23b; /* reconnaissance / pairs */ --bleu: #2f889e; /* structure / opérabilité */ --rouge: #be3f35; /* position / responsabilité */ --vert: #2f7559; /* ouverture / invitation */ --muted: #6c6c64; /* texte secondaire */ --hair: #d7d7d0; /* filets */ --chip: #e8e8e5; /* étiquettes neutres */ /* Polices */ --font-display: 'Space Grotesk', sans-serif; --font-body: 'Inter', sans-serif; /* ÉCHELLE TYPO (validée) — une taille par rôle, partout */ --t-hero: clamp(2.6rem, 7vw, 6.4rem); /* titre Hero (unique) — le plus grand de la page ; min abaissé pour tenir sur mobile 375px */ --t-section: clamp(2.1rem, 4.6vw, 3.8rem); /* titres de section (h2) */ --t-card: clamp(1.35rem,2.4vw, 2rem); /* titres de cartes/valeurs (h3) */ --t-lead: clamp(1.05rem,1.4vw, 1.2rem); /* chapôs / intros */ --t-body: clamp(0.95rem,1.05vw,1.05rem); /* corps / descriptions */ --t-eyebrow: 0.78rem; /* sur-titres */ --t-meta: 0.74rem; /* petits labels / tags */ --lh-tight: 1.0; /* titres */ --lh-body: 1.6; /* texte courant */ --ls-title: -0.01em; --ls-eyebrow: 0.2em; /* BARÈME D'ESPACEMENTS — toute distance vient d'ici */ --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 3rem; --space-2xl: 4rem; --space-3xl: 6rem; --gap-marker: 0.65rem; /* distance marqueur (losange/puce) ↔ texte */ /* Divers */ --radius: 0; /* angles droits */ --maxw: 1320px; /* largeur de contenu */ --shadow-card: 0 1px 2px rgba(26,26,24,.04), 0 6px 18px rgba(26,26,24,.04); --shadow-card-hover: 0 2px 4px rgba(26,26,24,.05), 0 12px 28px rgba(26,26,24,.07); --ease: cubic-bezier(.16,1,.3,1); } /* ============================================================ BASE ============================================================ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--fond); color: var(--noir); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-tight); letter-spacing: var(--ls-title); } em { font-style: italic; font-weight: 600; } /* emphase de marque */ /* ============================================================ LAYOUT ============================================================ */ .container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.5rem, 6vw, 7rem); } .section { padding-block: clamp(3rem, 6vh, 5rem); } /* Respiration (Silence) — espace + trait coloré centré */ .silence { position: relative; height: clamp(3rem, 7vh, 6rem); } .silence--long { height: clamp(4rem, 10vh, 8rem); } .silence__mark { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 1px; background: var(--hair); } .silence__mark--jaune { background: var(--jaune); } .silence__mark--bleu { background: var(--bleu); } .silence__mark--rouge { background: var(--rouge); } .silence__mark--vert { background: var(--vert); } /* ============================================================ TYPO — classes de rôle ============================================================ */ .eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); } .section-title { font-size: var(--t-section); } .card-title { font-size: var(--t-card); } .lead { font-family: var(--font-body); font-size: var(--t-lead); color: var(--muted); line-height: var(--lh-body); } .text { font-size: var(--t-body); color: var(--muted); } /* ============================================================ BOUTONS — signature (Posterama, ombre dure, ◆) ============================================================ */ .btn { display: inline-flex; align-items: center; gap: var(--space-2xs); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fond); background: var(--noir); padding: 14px 28px; border: 2px solid var(--noir); box-shadow: 4px 4px 0 rgba(26,26,24,.15); transition: background .2s, color .2s, box-shadow .15s, translate .15s; } .btn:hover { background: var(--fond); color: var(--noir); box-shadow: 2px 2px 0 rgba(26,26,24,.10); translate: 1px 1px; } .btn--vert { background: var(--vert); border-color: var(--vert); } .btn--vert:hover { background: var(--fond); color: var(--vert); box-shadow: 2px 2px 0 rgba(47,117,89,.18); } .btn--rouge { background: var(--rouge); border-color: var(--rouge); } .btn--rouge:hover { background: var(--fond); color: var(--rouge); } /* Bouton secondaire bordé (ex. « Découvrir les offres ») — outline plein, inversion du primaire : contour au repos, se remplit en noir au survol. */ .btn--ghost { background: transparent; color: var(--noir); box-shadow: 4px 4px 0 rgba(26,26,24,.10); } .btn--ghost::after { content: '→'; } .btn--ghost:hover { background: var(--noir); color: var(--fond); box-shadow: 2px 2px 0 rgba(26,26,24,.15); translate: 1px 1px; } /* Lien-CTA discret (flèche) */ .link-cta { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.04em; transition: gap .25s ease; } .link-cta::after { content: '→'; } .link-cta:hover { gap: var(--space-xs); } /* ============================================================ CARTES — blanc sur crème, sans bordure, ombre douce. Filet coloré (= statut) qui se déploie en haut au survol. ============================================================ */ .card { position: relative; background: var(--blanc); padding: clamp(1.6rem, 2.4vw, 2.1rem); display: flex; flex-direction: column; gap: var(--space-xs); box-shadow: var(--shadow-card); transition: box-shadow .25s ease, translate .25s ease; } .card:hover { box-shadow: var(--shadow-card-hover); translate: 0 -2px; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--card-accent, var(--jaune)); transform: scaleX(0); transform-origin: left center; transition: transform .5s var(--ease); } .card:hover::before { transform: scaleX(1); } .tag { align-self: flex-start; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; color: #fff; background: var(--card-accent, var(--jaune)); } .tag--on-light { color: var(--noir); } /* sur fond jaune */ /* ============================================================ MARQUEUR LOSANGE ↔ texte (distance harmonisée) ============================================================ */ .diamond { display: inline-block; flex-shrink: 0; width: 0.6em; height: 0.6em; background: currentColor; transform: rotate(45deg); margin-right: var(--gap-marker); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 860px) { .section { padding-block: clamp(2.5rem, 5vh, 4rem); } } /* ============================================================ EN-TÊTE PERSISTANT — fixe, transparent sur le Hero, fond crème + fine bordure au scroll (comme la V1). ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 150; display: flex; align-items: center; justify-content: space-between; padding: 12px clamp(1.5rem, 6vw, 7rem); border-bottom: 1px solid transparent; transition: background .3s ease, box-shadow .3s ease, border-color .3s ease; } .site-header.is-scrolled { background: rgba(246,246,244,.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: var(--hair); box-shadow: 0 1px 2px rgba(26,26,24,.04); } .site-header__logo { display: inline-flex; align-items: center; gap: 22px; text-decoration: none; } .site-header__logo-img { height: 48px; width: auto; flex-shrink: 0; } .site-header__logo-text { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: clamp(.72rem, 1.3vw, .95rem); line-height: 1.1; color: var(--noir); } /* ============================================================ HERO (Zone A titre+losanges · Zone B carousel · Zone C CTA) Section validée — portée fidèlement, couleurs en tokens. ============================================================ */ .hero__a { position: relative; overflow: hidden; background: var(--fond); padding: clamp(100px, 13vh, 132px) clamp(1.5rem,6vw,7rem) clamp(240px,30vw,380px); } .hero__header { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--space-2xl); } .hero__logo-img { height: 52px; width: auto; } /* Hamburger */ .hamburger { display:flex; flex-direction:column; gap:5px; padding:4px; z-index:200; } .hamburger span { display:block; width:24px; height:2px; background:var(--noir); transition: transform .25s, opacity .25s, background .2s; } .hamburger.open span { background: var(--fond); } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Nav overlay */ .nav-overlay { position: fixed; top:0; right:-340px; width:300px; height:100vh; background: var(--noir); padding: 88px clamp(1.5rem,6vw,7rem) 48px; display:flex; flex-direction:column; transition: right .35s cubic-bezier(.4,0,.2,1); z-index:150; } .nav-overlay.open { right: 0; } .nav-overlay a { font-family: var(--font-display); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color: var(--fond); opacity:.4; padding:18px 0; border-bottom: 1px solid rgba(246,246,244,.07); display:flex; align-items:center; gap:12px; transition: opacity .2s, gap .2s; } .nav-overlay a::before { content:'◆'; font-size:6px; flex-shrink:0; opacity:.5; } .nav-overlay a:hover { opacity:1; gap:16px; } .nav-overlay__cta { margin-top:auto; border-bottom:none; border-top:1px solid rgba(246,246,244,.12); padding-top:24px; opacity:1; color:var(--jaune); font-size:13px; letter-spacing:.12em; } .nav-overlay__cta::before { color: var(--jaune); } /* Titre Hero */ .hero__eyebrow { font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--noir); opacity:.55; margin-bottom: var(--space-md); } .hero__title { font-size: var(--t-hero); line-height:1.0; color:var(--noir); } .hero__title em { font-family: var(--font-body); font-weight: 400; } /* mot de liaison en Inter italique */ .badge { display:inline-flex; align-items:center; background:var(--rouge); color:var(--fond); transition: background .9s ease, color .9s ease; padding:0.6rem 1.8rem 0.78rem; font-family:var(--font-display); font-size: clamp(1.5rem,3vw,2.6rem); letter-spacing:.12em; text-transform:uppercase; transform: rotate(-3deg); clip-path: polygon(5% 0,100% 0,95% 100%,0 100%); vertical-align:middle; margin-left:6px; white-space:nowrap; } /* Losanges animés */ .losanges-wrap { position:absolute; bottom:0; left:0; right:0; height: clamp(180px,28vw,380px); } .losanges-wrap svg { width:100%; height:100%; } .loz { transition: opacity .8s ease; } /* Zone B — carousel sur fond noir */ .hero__b { background: var(--noir); padding: 22px clamp(1.5rem,6vw,7rem) 28px; } .carousel-label { font-size:var(--t-meta); font-weight:600; letter-spacing:var(--ls-eyebrow); text-transform:uppercase; color: rgba(246,246,244,.42); margin-bottom:12px; } .carousel-track { position:relative; min-height:48px; } .carousel-phrase { display:none; font-family:var(--font-display); font-size: clamp(1.05rem,2vw,1.35rem); color: var(--fond); line-height:1.45; max-width:680px; opacity:0; transition: opacity .4s ease; } .carousel-phrase.active { display:block; opacity:1; } .carousel-controls { display:flex; align-items:center; gap:20px; margin-top:20px; } .carousel-dots { display:flex; gap:8px; } .dot { width:6px; height:6px; background: rgba(246,246,244,.25); transform: rotate(45deg); cursor:pointer; transition: background .2s; } .dot.active { background: rgba(246,246,244,.82); } .carousel-arrows { display:flex; gap:8px; margin-left:auto; } .arrow { width:32px; height:32px; border:1px solid rgba(246,246,244,.2); color:var(--fond); display:flex; align-items:center; justify-content:center; font-size:14px; transition: border-color .2s, background .2s; } .arrow:hover { border-color: rgba(246,246,244,.7); background: rgba(246,246,244,.06); } /* Zone C — CTA */ .hero__c { background: var(--fond); padding: var(--space-2xl) clamp(1.5rem,6vw,7rem) clamp(1.5rem,4vw,2.5rem); } .hero__sub { font-size: clamp(1.05rem,1.5vw,1.2rem); color: var(--noir); line-height:1.7; max-width:560px; margin-bottom:12px; } .hero__aside { font-size: clamp(.85rem,1.1vw,.95rem); color: var(--muted); letter-spacing:.03em; margin-bottom: var(--space-2xl); } .hero__cta { display:flex; align-items:center; gap:20px; flex-wrap:wrap; } @media (max-width:640px) { .hero__a { padding-bottom: clamp(180px,40vw,260px); } } /* ============================================================ POUR QUI — « Être accompagné ou accompagner » Cartes système partagé : tag (= statut), titre Posterama, liste, lien-CTA. ============================================================ */ .pourqui__head { margin-bottom: clamp(3rem, 7vh, 5rem); } .pourqui__head .eyebrow { margin-bottom: var(--space-md); } .pourqui__head .section-title { max-width: 22ch; } .pourqui__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem, 2vw, 1.8rem); } .pourqui__grid .card { gap: 0; padding: clamp(1.8rem, 3vw, 2.6rem); } .pourqui__grid .tag { margin-bottom: var(--space-md); } .pourqui__name { font-size: clamp(1.4rem, 2.4vw, 2.1rem); font-weight: 400; line-height: 1.18; max-width: 20ch; margin-bottom: var(--space-md); } .pourqui__items { display: flex; flex-direction: column; gap: var(--space-sm); } .pourqui__items li { font-size: var(--t-body); line-height: var(--lh-body); color: var(--muted); } .pourqui__cta { margin-top: auto; padding-top: clamp(1.8rem, 4vh, 2.6rem); color: var(--noir); } .pourqui__cta:hover { text-decoration: underline; text-underline-offset: 4px; } @media (max-width: 720px) { .pourqui__grid { grid-template-columns: 1fr; } } /* ============================================================ ESPRIT — « L'esprit de la Guilde » Liste de 4 valeurs. Survol/focus : la ligne colorée se déploie sur le filet du haut, le losange pivote, le titre glisse, les autres lignes s'estompent. Clic = épingle (.is-active piloté en JS). ============================================================ */ .esprit__head { margin-bottom: clamp(3rem, 7vh, 6rem); } .esprit__head .eyebrow { margin-bottom: var(--space-md); } .esprit__head .section-title { max-width: 16ch; } .esprit__list { border-bottom: 1px solid var(--hair); } .esprit__row { position: relative; border-top: 1px solid var(--hair); padding: clamp(1.9rem, 3.8vw, 3.4rem) 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr); gap: clamp(1rem, 2vw, 2.2rem); align-items: baseline; cursor: pointer; outline: none; transition: opacity .42s ease; } /* La ligne colorée se déploie sur le filet du haut */ .esprit__accent { position: absolute; top: -1px; left: 0; height: 1px; width: 100%; background: var(--row-accent, var(--jaune)); transform: scaleX(0); transform-origin: left center; transition: transform .56s var(--ease); } .esprit__row.is-active .esprit__accent { transform: scaleX(1); } /* Les autres lignes s'estompent quand une est active */ .esprit__list.has-active .esprit__row:not(.is-active) { opacity: .4; } .esprit__name { grid-column: 1; } .esprit__row--indent .esprit__name { padding-left: clamp(2rem, 4vw, 4rem); } .esprit__title { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1.25rem, 2.4vw, 2.1rem); line-height: 1.0; letter-spacing: -.005em; text-transform: uppercase; color: var(--noir); display: flex; align-items: baseline; transition: transform .52s var(--ease); } .esprit__row.is-active .esprit__title { transform: translateX(.18em); } .esprit__diamond { display: inline-block; flex: 0 0 auto; width: .62em; height: .62em; background: var(--row-accent, var(--jaune)); margin-right: .7em; transform: rotate(45deg); transition: transform .52s var(--ease); } .esprit__row.is-active .esprit__diamond { transform: rotate(135deg) scale(1.22); } .esprit__desc { grid-column: 2; align-self: center; font-size: clamp(.98rem, 1.15vw, 1.18rem); line-height: var(--lh-body); color: var(--muted); max-width: 56ch; text-wrap: pretty; } @media (max-width: 820px) { .esprit__row { grid-template-columns: 1fr; gap: 1.2rem; } .esprit__row--indent .esprit__name { padding-left: 0; } .esprit__desc { grid-column: 1; max-width: none; align-self: start; } } /* ============================================================ QUATRE PILIERS — « Les branches de la Guilde » 1 branche mature (vedette bleu) + 3 en prototypage (cartes). Tout en système de cartes partagé — zéro bordure d'accent. ============================================================ */ .piliers__head { margin-bottom: clamp(2.5rem, 6vh, 4.5rem); } .piliers__head .eyebrow { margin-bottom: var(--space-md); } .piliers__vedette { gap: var(--space-md); padding: clamp(2rem, 4vw, 3rem); max-width: 880px; } .piliers__vedette-title { font-size: var(--t-card); color: var(--rouge); } .piliers__vedette-desc { font-size: var(--t-lead); color: var(--muted); line-height: var(--lh-body); max-width: 52ch; } .piliers__cta { color: var(--noir); } .piliers__cta:hover { color: var(--bleu); } .piliers__sublabel { margin: clamp(2.5rem, 5vh, 3.5rem) 0 var(--space-lg); } .piliers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); } .piliers__branch { gap: var(--space-sm); } .piliers__branch-title { font-size: var(--t-card); color: var(--noir); } .piliers__branch-desc { font-size: var(--t-body); color: var(--muted); line-height: var(--lh-body); } .piliers__note { margin-top: clamp(2rem, 4vh, 3rem); font-size: var(--t-body); color: var(--muted); font-style: italic; } @media (max-width: 820px) { .piliers__grid { grid-template-columns: 1fr; } } /* ============================================================ OFFRES — Entrepreneur's Studio (onglets par étape) Bandeau noir + sélecteur segmenté + panneaux + cartes partagées avec pied « Livrable » + fil rouge. ============================================================ */ /* Bandeau noir pleine largeur */ .offres__head { background: var(--noir); color: var(--fond); text-align: center; padding-block: clamp(1.4rem, 3vh, 2.1rem); } .offres__eyebrow { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--jaune); margin-bottom: var(--space-md); } .offres__title { font-size: var(--t-section); line-height: 1.08; max-width: 20ch; margin-inline: auto; color: var(--fond); } .offres__title em { font-family: var(--font-body); font-style: italic; font-weight: 400; } .offres__lead { font-size: var(--t-lead); color: rgba(246,246,244,.62); line-height: var(--lh-body); max-width: 60ch; margin: var(--space-md) auto 0; text-wrap: balance; } /* Corps : onglets + panneaux */ .offres__body { padding-block: clamp(2.6rem, 5vh, 4rem) clamp(3.5rem, 8vh, 6rem); } /* Phrase-guide (déplacée depuis le bandeau noir) — juste au-dessus des onglets */ .offres__guide { font-size: var(--t-lead); color: var(--muted); line-height: var(--lh-body); margin-bottom: clamp(1.4rem, 3vh, 2.1rem); } /* Onglets « pleins » — inactif = bloc blanc sobre, actif = aplat de la couleur de l'étape (vert/rouge/bleu). La couleur vit dans le sélecteur (= l'étape) ; en compensation, les tags des cartes passent en neutre (voir plus bas). */ .offres__tabs { display: flex; gap: clamp(8px, 1vw, 12px); } .offres__tab { flex: 1; text-align: center; position: relative; padding: clamp(16px, 2.1vw, 22px) clamp(12px, 1.6vw, 20px); font-family: var(--font-display); font-size: clamp(15px, 1.45vw, 18px); font-weight: 500; letter-spacing: .005em; color: var(--noir); line-height: 1.3; background: var(--blanc); box-shadow: 4px 4px 0 rgba(26,26,24,.12); /* relief dur — signature des boutons */ transition: color .2s ease, background .2s ease, box-shadow .15s ease, translate .15s ease; } /* liseré couleur d'étape qui se déploie au survol = invite au clic */ .offres__tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tab-color, var(--rouge)); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); } .offres__tab:not(.is-active):hover { translate: 1px 1px; box-shadow: 2px 2px 0 rgba(26,26,24,.10); } .offres__tab:not(.is-active):hover::after { transform: scaleX(1); } .offres__tab:focus-visible { outline: 2px solid var(--noir); outline-offset: 2px; } .offres__tab.is-active { color: var(--fond); font-weight: 600; background: var(--tab-color, var(--rouge)); box-shadow: none; translate: 2px 2px; /* enfoncé = onglet sélectionné */ } /* Panneaux */ .offres__panel { display: none; padding-top: clamp(2.4rem, 5vh, 3.6rem); } .offres__panel.is-active { display: block; animation: offresFade .5s var(--ease); } @keyframes offresFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .offres__panel-eyebrow { font-size: var(--t-meta); font-weight: 600; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-xs); } .offres__panel-intro { font-family: var(--font-display); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.3rem); color: var(--noir); line-height: 1.45; max-width: 48ch; margin-bottom: clamp(2rem, 4vh, 3rem); } /* Grille de cartes */ .offres__grid { display: grid; gap: clamp(1.2rem, 2vw, 1.6rem); align-items: start; } .offres__grid--3 { grid-template-columns: repeat(3, 1fr); } .offres__grid--2 { grid-template-columns: repeat(2, 1fr); } .offres__grid--1 { grid-template-columns: 1fr; } .offres__card { gap: var(--space-xs); } /* Compensation couleur : dans les Offres, les tags passent en neutre — la couleur est désormais portée par l'onglet actif, pas répétée sur chaque carte. (Le filet coloré au survol reste : c'est le geste signature du site.) */ .offres__card .tag { background: var(--chip); color: var(--noir); } /* Carte unique « partenaire » — focalisée, ni étirée ni full-width */ .offres__card--featured { max-width: 760px; padding: clamp(1.8rem, 3vw, 2.6rem); } .offres__card-name { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.1; } .offres__card-desc { font-size: var(--t-body); color: var(--muted); line-height: var(--lh-body); } /* Couche « Pourquoi nous » — masquée, se déploie au survol */ .offres__more { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: calc(-1 * var(--space-xs)); /* annule le gap flex quand replié */ transition: grid-template-rows .42s var(--ease), opacity .3s ease, margin-top .42s var(--ease); } .offres__why { overflow: hidden; min-height: 0; font-size: var(--t-body); color: var(--noir); line-height: var(--lh-body); } .offres__why strong { color: var(--noir); font-weight: 600; } @media (hover: hover) { .offres__card:hover .offres__more, .offres__card:focus-within .offres__more { grid-template-rows: 1fr; opacity: 1; margin-top: 0; } } @media (hover: none) { .offres__more { grid-template-rows: 1fr; opacity: 1; margin-top: 0; } } /* Pied « Livrable » — détaché par un filet */ .offres__livrable { padding-top: var(--space-sm); border-top: 1px solid var(--hair); font-size: .85rem; color: var(--muted); line-height: 1.5; } .offres__livrable strong { color: var(--noir); font-weight: 600; } /* CTA du panneau */ .offres__cta { margin-top: clamp(2rem, 4vh, 3rem); display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; } @media (max-width: 860px) { .offres__grid--3, .offres__grid--2 { grid-template-columns: 1fr; } .offres__tabs { flex-direction: column; } } /* ============================================================ FONDATEURS — « Les entrepreneurs derrière la Guilde » Section neutre/silence. Portraits N&B uniforme (gomme les écarts de qualité). Grille aérée 2 colonnes, bios + KPIs en chips neutres. ============================================================ */ .fondateurs .container { max-width: 1040px; } .fondateurs .eyebrow { margin-bottom: var(--space-md); } .fondateurs__title { font-size: var(--t-section); margin-bottom: var(--space-sm); } .fondateurs__sub { font-size: var(--t-lead); color: var(--muted); line-height: var(--lh-body); max-width: 62ch; margin-bottom: clamp(2.5rem, 6vh, 4rem); } .fondateurs__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 5vw, 3.2rem); } @media (min-width: 768px) { .fondateurs__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 4vw, 4rem); } } .fondateur { display: flex; gap: var(--space-sm); } .fondateur__portrait { width: clamp(5rem, 7vw, 7rem); aspect-ratio: 4 / 5; background: var(--hair); flex-shrink: 0; overflow: hidden; } .fondateur__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; filter: grayscale(1) contrast(1.06); } .fondateur__body { flex: 1; min-width: 0; } .fondateur__name { font-size: clamp(1.1rem, 1.5vw, 1.25rem); font-weight: 400; line-height: 1.2; margin-bottom: var(--space-2xs); display: flex; align-items: center; gap: .55rem; } .fondateur__name a { display: inline-flex; align-items: center; transition: opacity .2s ease, transform .2s ease; } .fondateur__name a:hover { opacity: .82; transform: translateY(-1px); } .fondateur__bio { font-size: clamp(.88rem, 1vw, .98rem); color: var(--muted); line-height: var(--lh-body); margin-bottom: var(--space-xs); } .fondateur__kpis { display: flex; flex-wrap: wrap; gap: .4rem; } .fondateur__kpi { font-size: .72rem; background: var(--chip); color: var(--noir); padding: 4px 9px; } /* ============================================================ LIVRE BLANC — sobre (section de lecture, colonne étroite) Pas d'aplat ni de trait latéral : typo + eyebrow vert + CTA vert. ============================================================ */ .livre .container { max-width: 760px; } .livre__eyebrow { color: var(--vert); margin-bottom: var(--space-md); } .livre__title { font-size: var(--t-section); margin-bottom: clamp(2rem, 5vh, 3rem); } .livre__body { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: clamp(2rem, 5vh, 3rem); } .livre__body p { font-size: var(--t-lead); color: var(--muted); line-height: var(--lh-body); } .livre__body p.livre__emphasis { color: var(--noir); font-weight: 500; } .livre__cta { color: var(--noir); } .livre__cta:hover { color: var(--vert); } /* ============================================================ FORMULAIRE — point de conversion (carte blanche centrée) ============================================================ */ .formulaire__card { max-width: 820px; margin-inline: auto; text-align: center; background: var(--blanc); padding: clamp(2.6rem, 6vw, 4.5rem) clamp(1.8rem, 5vw, 4rem); box-shadow: 0 1px 2px rgba(26,26,24,.04), 0 8px 24px rgba(26,26,24,.05); } .formulaire__title { font-size: var(--t-section); line-height: 1.05; } .formulaire__text { font-size: var(--t-lead); color: var(--muted); line-height: 1.65; max-width: 46ch; margin: clamp(1.3rem, 3vh, 2rem) auto clamp(2.2rem, 5vh, 3rem); } .formulaire__btn::after { content: '→'; } /* ============================================================ FOOTER — micro-footer minimal ============================================================ */ .footer { border-top: 1px solid var(--hair); padding-block: clamp(2.5rem, 5vh, 3.5rem); } .footer .container { max-width: 1040px; } .footer__inner { display: flex; flex-direction: column; gap: var(--space-md); } .footer__top { display: flex; flex-direction: column; gap: var(--space-2xs); } @media (min-width: 700px) { .footer__top { flex-direction: row; align-items: center; justify-content: space-between; } } .footer__note { font-size: var(--t-meta); color: var(--muted); } .footer__email { font-size: var(--t-meta); color: var(--noir); transition: color .2s ease; } .footer__email:hover { color: var(--bleu); } .footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-size: var(--t-meta); } .footer__legal a { color: var(--muted); transition: color .2s ease; } .footer__legal a:hover { color: var(--bleu); } /* ============================================================ FORMULAIRE « Rejoindre la Guilde » — vrai formulaire HTML (intégré le 21/06/2026, remplace l'ancien CTA Google Form) ============================================================ */ .formulaire { padding-block: clamp(3rem, 6vh, 5rem); } .form-card { max-width: 780px; margin: 0 auto; background: var(--blanc); padding: clamp(2.2rem, 5vw, 3.6rem) clamp(1.6rem, 4.5vw, 3.2rem); box-shadow: var(--shadow-card); } .form-card .eyebrow { color: var(--vert); } .form-intro { font-size: var(--t-lead); color: var(--noir); line-height: var(--lh-body); margin: var(--space-sm) 0 var(--space-md); max-width: 60ch; } .form-intro--note { font-size: 0.92rem; color: var(--muted); margin-bottom: var(--space-2xl); } .form-intro strong { color: var(--noir); font-weight: 600; } /* Groupes */ .field-group { margin-bottom: var(--space-lg); } .field-group > .legend, .field > label { display: block; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; margin-bottom: var(--space-xs); } .field-hint { font-size: var(--t-meta); color: var(--muted); font-weight: 400; } /* Inputs texte : épurés, filet bas, accent au focus (pas de boîte bordée) */ .field { margin-bottom: var(--space-md); } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea { width: 100%; font-family: var(--font-body); font-size: var(--t-body); color: var(--noir); background: var(--fond); border: none; border-bottom: 1.5px solid var(--hair); border-radius: 0; padding: 11px 12px; transition: border-color .15s var(--ease), background .15s var(--ease); } .field textarea { min-height: 120px; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(26,26,24,.32); } .field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--vert); background: #f0f0ec; } /* Lignes coordonnées en 2 colonnes */ .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } } /* Cases de profil = 2 options cliquables, accent à la sélection */ .profil-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); } @media (max-width: 560px) { .profil-grid { grid-template-columns: 1fr; } } .profil-opt { position: relative; display: block; cursor: pointer; background: var(--blanc); padding: var(--space-md) var(--space-lg) var(--space-md) var(--space-md); box-shadow: var(--shadow-card); transition: box-shadow .15s var(--ease), background .2s var(--ease); } .profil-opt:hover { box-shadow: var(--shadow-card-hover); } .profil-opt input { position: absolute; opacity: 0; pointer-events: none; } .profil-opt .opt-tag { display: block; font-size: var(--t-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--space-2xs); transition: color .15s var(--ease); } .profil-opt .opt-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; line-height: 1.25; } /* Indicateur de sélection (pastille ronde, pas de contour de carte) */ .opt-check { position: absolute; top: var(--space-md); right: var(--space-md); width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--hair); transition: box-shadow .15s var(--ease), background .15s var(--ease); } .profil-opt:has(input:checked) .opt-check { box-shadow: none; } .profil-opt:has(input:checked) .opt-check::after { content: "✓"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: 700; } /* Sélection : fond teinté + tag en couleur + pastille pleine (zéro bordure) */ .profil-opt[data-accent="jaune"]:has(input:checked) { background: #fcf6e1; } .profil-opt[data-accent="jaune"]:has(input:checked) .opt-tag { color: #9a7c10; } .profil-opt[data-accent="jaune"]:has(input:checked) .opt-check { background: var(--jaune); } .profil-opt[data-accent="jaune"]:has(input:checked) .opt-check::after { color: var(--noir); } .profil-opt[data-accent="vert"]:has(input:checked) { background: #e9f1ed; } .profil-opt[data-accent="vert"]:has(input:checked) .opt-tag { color: var(--vert); } .profil-opt[data-accent="vert"]:has(input:checked) .opt-check { background: var(--vert); } /* Choix radio / checkbox en liste */ .choices { display: flex; flex-direction: column; gap: 10px; } .choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--t-body); } .choice input { margin-top: 3px; accent-color: var(--vert); width: 16px; height: 16px; flex-shrink: 0; } /* Blocs conditionnels */ .conditional { display: none; } .conditional.is-visible { display: block; } .block-sep { margin: var(--space-xl) 0 var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--hair); } .block-label { font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin-bottom: var(--space-md); } .block-label[data-accent="jaune"] { color: #9a7c10; } .block-label[data-accent="vert"] { color: var(--vert); } /* Consentement */ .consent { margin: var(--space-xl) 0 var(--space-md); } .consent .choice { font-size: var(--t-meta); color: var(--noir); line-height: 1.5; } .rgpd-note { font-size: var(--t-meta); color: var(--muted); line-height: 1.55; margin-bottom: var(--space-lg); } .rgpd-note a { color: var(--vert); text-decoration: underline; } /* Honeypot anti-spam (invisible) */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Erreurs */ .form-error { display: none; color: var(--rouge); font-size: var(--t-meta); font-weight: 600; margin-bottom: var(--space-md); } .form-error.is-visible { display: block; } .invalid input, .invalid textarea { border-color: var(--rouge) !important; } /* Confirmation */ .form-success { display: none; text-align: center; padding: var(--space-2xl) 0; } .form-success.is-visible { display: block; } .form-success h3 { font-family: var(--font-display); font-size: var(--t-card); margin-bottom: var(--space-sm); } .form-success p { color: var(--muted); } .btn--full { width: 100%; justify-content: center; }