doit laisser de la place à la nav sticky */ main { padding-top: var(--nav-height); } /* ╔═══════════════════════════════════════════════════════════════════════════ ║ 04. OBJECTS — layout sans skin ║ ║ Objets de mise en page réutilisables, SANS couleur ni décoration. ║ Ils donnent la structure ; les composants apportent le style. ║ ║ Préfixe : .o-* ║ ║ Contenu : ║ .o-container — bloc centré avec largeur max ║ .o-container--narrow — variante 880px ║ .o-container--prose — variante 720px (texte lisible) ║ .o-section — section verticale avec padding fluide ║ .o-section--ivoire — variante fond ivoire (#F8F7F4) ║ .o-grid — grille de base ║ .o-grid--2/--3/--4 — grilles à colonnes fixes (desktop) ║ .o-grid--auto — grille auto-fit (s'adapte au contenu) ║ .o-stack — empilement flex-column avec gap ║ .o-stack--sm/--md/--lg — variations de gap ╚═══════════════════════════════════════════════════════════════════════════ */ /* ── .o-container : bloc centré largeur max ───────────────────────────────── */ .o-container { width: 100%; max-width: var(--max-content); margin-inline: auto; padding-inline: var(--container-px); } .o-container--narrow { max-width: var(--max-narrow); } .o-container--prose { max-width: var(--max-prose); } /* ── .o-section : section verticale avec padding fluide ───────────────────── */ .o-section { padding-block: var(--section-pad); } .o-section--ivoire { background: var(--gs-ivoire); } /* Section foncée — inverse les couleurs du c-section-header */ .o-section--noir { background: var(--gs-noir); color: var(--gs-blanc); } .o-section--noir .c-section-header__title { color: var(--gs-blanc); } .o-section--noir .c-section-header__sub { color: rgba(255, 255, 255, .72); } .o-section--noir .c-section-header__eyebrow { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .8); padding: .4em .9em; border-radius: var(--r-pill); letter-spacing: .05em; } /* ── .o-grid : grilles réutilisables ────────────────────────────────────────── Par défaut : 1 colonne (mobile-first dans le sens du contenu). Les variantes --2/--3/--4 passent à N colonnes en desktop (cf. bloc 08). --auto utilise auto-fit pour une adaptation continue selon le contenu. */ .o-grid { display: grid; gap: var(--s6); } .o-grid--2 { grid-template-columns: repeat(2, 1fr); } .o-grid--3 { grid-template-columns: repeat(3, 1fr); } .o-grid--4 { grid-template-columns: repeat(4, 1fr); } .o-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* ── .o-stack : empilement vertical avec gap ──────────────────────────────── */ .o-stack { display: flex; flex-direction: column; gap: var(--s6); } .o-stack--sm { gap: var(--s2); } .o-stack--md { gap: var(--s4); } .o-stack--lg { gap: var(--s10); } /* ╔═══════════════════════════════════════════════════════════════════════════ ║ 05. COMPONENTS — composants .c-* (par ordre alphabétique) ║ ║ Chaque composant est autonome. Les modifiers `--xxx` modifient l'apparence ║ sans changer la structure. Les états sont marqués avec `.is-xxx`. ║ Les hooks JS sont en `data-*` (pas de classe-ciblage JS). ╚═══════════════════════════════════════════════════════════════════════════ */ /* ── Skip link (accessibilité clavier) ─────────────────────────────────────── Lien caché qui apparait au focus pour sauter directement au contenu. */ .u-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--accent); color: var(--gs-blanc); padding: .75rem 1.25rem; font-weight: 700; border-radius: 0 0 var(--r-sm) 0; } .u-skip-link:focus { left: 0; } /* ── Helpers d'animation (data-reveal, data-delay) ──────────────────────────── Animation d'apparition au scroll. Le JS ajoute `.is-visible` quand l'élément entre dans le viewport. `data-delay="1"` à `"6"` permet de décaler en cascade. */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out-strong), transform .6s var(--ease-out-strong); } [data-reveal].is-visible { opacity: 1; transform: none; } [data-delay="1"] { transition-delay: .1s; } [data-delay="2"] { transition-delay: .2s; } [data-delay="3"] { transition-delay: .3s; } [data-delay="4"] { transition-delay: .4s; } [data-delay="5"] { transition-delay: .5s; } [data-delay="6"] { transition-delay: .6s; } /* ── .c-badge ──────────────────────────────────────────────────────────────── Petite étiquette (label, info, status). Plus "carré" qu'un pill, plus visible. Utilise toujours `var(--accent)` (ou neutre / success selon modifier). Exemples : "Conçu par un dirigeant", "Inclus dans votre abonnement", "Tarifs transparents". Variantes : --accent : couleur d'accent (par défaut) — ex. badges hero --success : vert Access — ex. "inclus dans votre abonnement" --neutral : neutre subtil — ex. "sans engagement" */ .c-badge { display: inline-flex; align-items: flex-start; gap: .5em; padding: .45em 1em; background: var(--accent-xpale, var(--gs-violet-xpale)); color: var(--accent); border: 1px solid var(--accent-pale); border-radius: var(--r-pill); font-size: var(--txt-xs); font-weight: 700; letter-spacing: .04em; max-width: 100%; white-space: normal; word-break: break-word; } .c-badge svg { flex-shrink: 0; margin-top: 2px; } .c-badge--accent { /* Identique au défaut, modifier explicite pour lisibilité du HTML */ background: var(--accent-xpale, var(--gs-violet-xpale)); color: var(--accent); border-color: var(--accent-pale); } .c-badge--success { background: rgba(10, 122, 62, .10); color: var(--gs-access-fonce); border-color: rgba(10, 122, 62, .25); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 800; padding: .35em .8em; align-self: start; width: fit-content; } .c-badge--neutral { background: rgba(15, 17, 22, .04); color: var(--gs-texte-2); border-color: rgba(15, 17, 22, .12); font-size: .7rem; font-weight: 700; padding: .3em .75em; } /* ── .c-btn ────────────────────────────────────────────────────────────────── Bouton principal du site. `.c-btn` seul = bouton accent rempli (= violet sur fond clair). Tous les modifiers se cumulent. Variantes COULEUR (mutuellement exclusives) : (aucune) : accent rempli (par défaut) --ghost : transparent border noir → hover noir --blanc : fond blanc, texte accent (pour fonds foncés) --ghost-blanc : transparent border blanc (pour fonds foncés) --success : vert Access (= ancien --green) Variantes TAILLE : --sm : padding réduit, texte sm --lg : padding généreux, texte md --full : largeur 100% (pour CTA pleins dans cartes) */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.65em; background: var(--accent); color: var(--gs-blanc); border: 1.5px solid var(--accent); border-radius: var(--r-pill); font-weight: 700; font-size: var(--txt-base); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .c-btn:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); transform: translateY(-2px); box-shadow: var(--sh-violet); } .c-btn:active { transform: translateY(0) scale(.97); transition-duration: 80ms; } .c-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } .c-btn svg { flex-shrink: 0; transition: transform var(--t-fast); } .c-btn:hover svg { transform: translateX(3px); } /* — Tailles — */ .c-btn--sm { padding: .55em 1.15em; font-size: var(--txt-sm); } .c-btn--lg { padding: 1.05em 2em; font-size: var(--txt-md); } .c-btn--full { display: flex; width: 100%; min-width: 0; } /* — Couleurs — */ .c-btn--ghost { background: transparent; color: var(--gs-noir); border-color: rgba(15, 17, 22, .2); } .c-btn--ghost:hover { background: var(--gs-noir); color: var(--gs-blanc); border-color: var(--gs-noir); box-shadow: none; } .c-btn--blanc { background: var(--gs-blanc); color: var(--accent); border-color: var(--gs-blanc); } .c-btn--blanc:hover { background: var(--accent-xpale, var(--gs-violet-xpale)); border-color: var(--accent-xpale, var(--gs-violet-xpale)); color: var(--accent-fonce); box-shadow: none; } .c-btn--ghost-blanc { background: rgba(255, 255, 255, .12); color: var(--gs-blanc); border-color: rgba(255, 255, 255, .3); } .c-btn--ghost-blanc:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .6); color: var(--gs-blanc); box-shadow: none; } .c-btn--success { background: var(--gs-access); color: var(--gs-blanc); border-color: var(--gs-access); } .c-btn--success:hover { background: var(--gs-access-fonce); border-color: var(--gs-access-fonce); box-shadow: 0 12px 32px rgba(66, 201, 128, .3); } /* ── .c-calc ───────────────────────────────────────────────────────────────── Composant calculateur interactif. Utilisé sur les pages outils / LP isolées (ex. calculateur de coût des no-shows). Structure : .c-calc — carte conteneur (blanc, ombre, radius) .c-calc__head — en-tête : eyebrow label + phrase d'intro .c-calc__inputs — grille 3 colonnes d'inputs number .c-calc__field — groupe label + input-wrap + hint .c-calc__input-wrap — positionnement relatif pour l'unité .c-calc__input — champ number stylé (sans spinners) .c-calc__unit — unité positionnée à droite de l'input .c-calc__hint — aide sous l'input .c-calc__results — bloc résultats sur fond ivoire .c-calc__results-label — surtitle "Résultats" uppercase .c-calc__results-grid — grille 3 cols (semaine / mois / an) .c-calc__result — carte résultat individuelle .c-calc__result--big — mise en avant : fond accent xpale, bordure accent .c-calc__result-title — label uppercase de la période .c-calc__result-value — montant mis en avant (gros) .c-calc__result-sub — ligne explicative sous la valeur */ .c-calc { background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; } /* ─ En-tête ─ */ .c-calc__head { padding: var(--s8) clamp(var(--s6), 4vw, var(--s10)) var(--s2); text-align: center; } .c-calc__eyebrow { display: block; font-size: var(--txt-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); } .c-calc__title { font-size: var(--txt-lg); font-weight: 800; letter-spacing: -.5px; line-height: var(--lh-snug); color: var(--gs-noir); margin: 0 0 var(--s2); } .c-calc__head p { font-size: var(--txt-sm); color: var(--gs-texte-2); margin: 0; } /* ─ Grille d'inputs ─ */ .c-calc__inputs { padding: var(--s7, 1.75rem) clamp(var(--s6), 4vw, var(--s10)) var(--s8); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); } .c-calc__field label { display: block; font-size: var(--txt-xs); font-weight: 700; color: var(--gs-texte-2); text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--s3); text-align: center; } .c-calc__input-wrap { position: relative; } .c-calc__input { width: 100%; background: var(--gs-fond-2); border: 1.5px solid var(--gs-border); border-radius: var(--r-sm); padding: .875em 3.25em; color: var(--gs-noir); font-size: 1.2rem; font-weight: 700; font-family: var(--font-base); text-align: center; outline: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); /* Suppression des spinners natifs number */ -moz-appearance: textfield; } .c-calc__input::-webkit-outer-spin-button, .c-calc__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .c-calc__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); background: var(--gs-blanc); } .c-calc__unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--gs-texte-3); font-size: .82rem; font-weight: 600; pointer-events: none; line-height: 1; } .c-calc__hint { margin-top: var(--s2); font-size: .73rem; color: var(--gs-texte-3); line-height: 1.4; } /* ─ Bloc résultats ─ */ .c-calc__results { background: var(--gs-ivoire); border-top: 1px solid var(--gs-border); padding: var(--s8) clamp(var(--s6), 4vw, var(--s10)); } .c-calc__results-label { font-size: var(--txt-xs); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gs-texte-3); margin-bottom: var(--s5); text-align: center; } .c-calc__results-grid { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: var(--s4); } .c-calc__result { background: var(--gs-blanc); border: 1.5px solid var(--gs-border); border-radius: var(--r-md); padding: var(--s5) var(--s6); text-align: center; } .c-calc__result--big { border-color: var(--gs-violet-clair); background: var(--accent-xpale); } .c-calc__result-title { font-size: var(--txt-xs); font-weight: 700; color: var(--gs-texte-3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: var(--s3); } .c-calc__result-value { font-size: 1.7rem; font-weight: 800; color: var(--gs-noir); line-height: 1; letter-spacing: -.5px; } .c-calc__result--big .c-calc__result-value { font-size: 2.3rem; color: var(--accent); } .c-calc__result-sub { font-size: .76rem; color: var(--gs-texte-2); margin-top: var(--s2); line-height: 1.4; } /* ── .c-noshow-visual ─ Image illustrative (page outil no-show) : intercalée entre le constat de perte et les concepts. Centrée, radius + ombre. */ .c-noshow-visual { max-width: 760px; margin: var(--s10) auto var(--s4); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .c-noshow-visual img { width: 100%; height: auto; display: block; } /* ── .c-noshow-cta ─ CTA final unique (page outil no-show) : bouton visio centré. */ .c-noshow-cta { text-align: center; margin-top: var(--s10); } .c-noshow-cta__note { margin-top: var(--s4); font-size: var(--txt-sm); color: var(--gs-texte-3); } /* ── .c-mod-logos ──────────────────────────────────────────────────────────── Ligne horizontale de logos des modules inclus dans une carte/section. Wrap si pas assez d'espace. */ .c-mod-logos { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; } .c-mod-logos__img { height: 44px; width: auto; object-fit: contain; } /* ── .c-pill ───────────────────────────────────────────────────────────────── Capsule textuelle compacte. Différence avec .c-badge : plus discret, sans icône, mono-ligne. Souvent groupé en rangée (cf. .c-trust-row). Variantes : (aucune) : accent pâle uppercase --trust : neutre gris avec SVG (pour ligne de garanties) --ghost : neutre subtil, sans uppercase (pour résultat configurateur) --flag : avec drapeau emoji (pour ligne pays) --sm : plus petit (pour tags modale cookie) */ .c-pill { display: inline-block; padding: .4em .85em; background: rgba(109, 62, 244, .08); color: var(--accent); border: 1px solid rgba(109, 62, 244, .18); border-radius: var(--r-pill); font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .c-pill--trust { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; background: rgba(15, 17, 22, .035); color: var(--gs-texte-2); border-color: rgba(15, 17, 22, .07); font-size: .76rem; font-weight: 600; letter-spacing: -.005em; text-transform: none; line-height: 1.1; white-space: nowrap; flex: 0 1 auto; min-width: 0; } .c-pill--trust svg { flex-shrink: 0; color: var(--accent); } .c-pill--trust strong { color: var(--gs-noir); font-weight: 800; } .c-pill__flag { font-size: .95rem; line-height: 1; } .c-pill--ghost { background: rgba(15, 17, 22, .05); color: var(--gs-texte-2); border-color: rgba(15, 17, 22, .1); text-transform: none; font-weight: 600; font-size: .8rem; } .c-pill--flag { display: inline-flex; align-items: center; gap: .35rem; background: var(--gs-blanc); color: var(--gs-texte-2); border-color: var(--gs-border); font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: 0; padding: .35em .85em; } .c-pill--sm { padding: .2em .55em; font-size: .65rem; letter-spacing: .04em; font-weight: 700; background: rgba(15, 17, 22, .05); color: var(--gs-texte-2); border-color: rgba(15, 17, 22, .08); text-transform: uppercase; } /* ── .c-concept-grid ───────────────────────────────────────────────────────── Grille spéciale pour `.c-card--concept` (Autonome vs Premium). Utilise `grid-template-rows: subgrid` côté carte pour aligner verticalement les sections internes (header, prix, bullets, CTA) entre les deux cartes. */ .c-concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); grid-template-rows: auto auto auto auto 1fr auto auto; row-gap: var(--s6); gap: var(--s6); align-items: stretch; } /* ── .c-card ───────────────────────────────────────────────────────────────── Composant carte universel. Le squelette `.c-card` apporte le minimum (display, gap, position). Chaque modifier de famille (testimonial, concept, module, advantage, timeline-step) apporte sa propre apparence (bg, border, radius, padding, shadow). Sous-éléments génériques utilisés par plusieurs variantes : __header, __title, __kicker, __body, __text, __icon, __media __bullets, __bullet, __bullet-check __cta, __link, __section-label __price, __price-wrap, __price-note __author, __avatar, __name, __role, __source, __stars, __quote, __sep Modifiers de famille (DOIT être combiné à `.c-card`) : --testimonial : carte témoignage (avis, étoiles, auteur) --concept : carte concept tarifs (gros padding, icône absolue) --concept-autonome / --concept-premium : couleurs accent vert / violet --module : carte module home (photo + body coloré) --module-cash / --module-access / --module-vision / --module-manager --advantage : carte avantage (fond uni, icône XL, lien bas) --bg-accent / --bg-noir / --bg-ivoire / --bg-gradient : fonds de --advantage --timeline-step : carte étape timeline tarifs ──────────────────────────────────────────────────────────────────────────── */ .c-card { position: relative; min-width: 0; /* permet à la cellule grid de rétrécir */ display: flex; flex-direction: column; gap: var(--s4); } /* ════════════════════════════════════════════════════════════════════════════ .c-card--testimonial | Carte témoignage (avis Google, citation, auteur) ════════════════════════════════════════════════════════════════════════════ */ .c-card--testimonial { background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); padding: var(--s6); box-shadow: var(--sh-sm); transition: box-shadow var(--t-base); } .c-card--testimonial:hover { box-shadow: var(--sh-md); } .c-card__stars { color: #FABF48; font-size: 1rem; letter-spacing: .05em; } .c-card__quote { font-size: var(--txt-sm); line-height: var(--lh-loose); color: var(--gs-noir); font-style: italic; flex: 1; margin: 0; } .c-card__sep { height: 1px; background: var(--gs-border); } .c-card__author { display: flex; align-items: center; gap: var(--s3); } .c-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: contain; border: 1.5px solid var(--gs-border); background: var(--gs-fond-2); flex-shrink: 0; } .c-card__name { font-size: var(--txt-sm); font-weight: 700; color: var(--gs-noir); } .c-card__role { font-size: var(--txt-xs); color: var(--gs-texte-2); margin-top: 2px; } .c-card__source { font-size: .7rem; color: var(--gs-texte-3); margin-top: 2px; letter-spacing: .01em; } /* ════════════════════════════════════════════════════════════════════════════ .c-card--concept | Carte de choix concept (Autonome / Premium / Tarifs) Gros padding, icône en absolu top-left, bullets, prix optionnel, CTA bas. ════════════════════════════════════════════════════════════════════════════ */ .c-card--concept { display: grid; grid-template-rows: subgrid; /* aligne les sections internes entre cartes voisines */ grid-row: span 7; gap: var(--s6); padding: var(--s10); background: var(--gs-blanc); border: 2px solid var(--gs-border); border-radius: var(--r-xl); transition: border-color var(--t-base), box-shadow var(--t-base); } .c-card--concept:hover { box-shadow: var(--sh-md); } /* Variantes couleur concept */ .c-card--concept-autonome { background: rgba(66, 201, 128, .13); border-color: rgba(66, 201, 128, .4); } .c-card--concept-autonome:hover { background: rgba(66, 201, 128, .20); border-color: var(--gs-access); } .c-card--concept-premium { background: rgba(109, 62, 244, .12); border-color: rgba(109, 62, 244, .35); } .c-card--concept-premium:hover { background: rgba(109, 62, 244, .18); border-color: var(--gs-violet); } /* Sous-éléments de la carte concept */ .c-card__icon { position: absolute; top: var(--s5); left: var(--s5); width: 56px; height: 56px; object-fit: contain; background: var(--gs-blanc); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: var(--s2); box-sizing: border-box; } .c-card__header { display: flex; flex-direction: column; gap: var(--s2); padding-top: calc(56px + var(--s5) + var(--s3)); /* laisser la place à l'icône */ } .c-card__title { font-size: 1.65rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.15; color: inherit; /* hérite du parent — permet aux fonds foncés (.c-card--bg-accent/noir) d'avoir un texte clair */ margin: 0; } /* Pour les cartes sur fond clair, on force noir explicitement */ .c-card--concept .c-card__title, .c-card--bg-ivoire .c-card__title, .c-card--bg-gradient .c-card__title { color: var(--gs-noir); } .c-card__kicker { font-size: 1.02rem; font-weight: 700; line-height: 1.4; margin: 0; } .c-card--concept-autonome .c-card__kicker { color: var(--gs-access-fonce); } .c-card--concept-premium .c-card__kicker { color: var(--gs-violet); } .c-card__section-label { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(15, 17, 22, .45); } .c-card__section-label--spaced { margin-bottom: .75rem; } /* Liste de bullets */ .c-card__bullets { display: flex; flex-direction: column; gap: var(--s2); } .c-card--concept .c-card__bullets { gap: .85rem; } /* aérer dans cartes concept */ .c-card__bullets li { display: flex; gap: .55rem; align-items: flex-start; font-size: .95rem; color: rgba(15, 17, 22, .85); line-height: 1.45; } .c-card__bullet { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: rgba(15, 17, 22, .85); line-height: 1.45; } .c-card__bullet-check { font-weight: 900; flex-shrink: 0; font-size: 1rem; line-height: 1.45; } .c-card--concept-autonome .c-card__bullet-check, .c-card--concept-autonome .c-card__bullets li .c-card__bullet-check { color: var(--gs-access-fonce); } .c-card--concept-premium .c-card__bullet-check, .c-card--concept-premium .c-card__bullets li .c-card__bullet-check { color: var(--gs-violet); } /* Bloc prix (tarifs) */ .c-card__price-wrap { padding: 1rem 0; text-align: center; } .c-card--concept-autonome .c-card__price-wrap { border-top: 1px solid rgba(10, 122, 62, .18); border-bottom: 1px solid rgba(10, 122, 62, .18); } .c-card--concept-premium .c-card__price-wrap { border-top: 1px solid rgba(109, 62, 244, .18); border-bottom: 1px solid rgba(109, 62, 244, .18); } .c-card__price { font-size: 2.4rem; font-weight: 900; color: var(--gs-noir); line-height: 1; letter-spacing: -.03em; } .c-card__price span { font-size: .92rem; font-weight: 600; color: rgba(15, 17, 22, .55); margin-left: .25rem; } .c-card__price-note { margin: .4rem 0 0; font-size: .78rem; color: rgba(15, 17, 22, .6); line-height: 1.4; } /* Espacements internes spécifiques concept */ .c-card--concept .c-mod-logos { margin-top: var(--s2); } .c-card__cta { margin-top: auto; } /* colle le CTA en bas de la carte */ /* ════════════════════════════════════════════════════════════════════════════ .c-card--module | Carte module home (bento, photo + body coloré) ════════════════════════════════════════════════════════════════════════════ */ .c-card--module { border-radius: var(--r-xl); overflow: hidden; display: block; /* override le flex du base — body s'occupe */ transition: box-shadow var(--t-base), transform var(--t-base); } .c-card--module:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); } .c-card--module .c-card__media, .c-card--module .c-card__photo-wrap { position: relative; overflow: hidden; display: block; } .c-card--module .c-card__photo { width: 100%; height: 200px; object-fit: cover; display: block; } .c-card--module .c-card__logo-overlay { position: absolute; top: var(--s4); left: var(--s4); height: 44px; width: auto; object-fit: contain; background: rgba(255, 255, 255, .92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--r-sm); padding: var(--s2) var(--s3); box-sizing: border-box; box-shadow: var(--sh-sm); } .c-card--module .c-card__body { padding: var(--s8); display: flex; flex-direction: column; gap: var(--s3); } .c-card--module .c-card__eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .c-card--module .c-card__body h3 { font-size: 1.1rem; font-weight: 800; color: var(--gs-noir); line-height: 1.25; margin: 0; } .c-card--module .c-card__body ul { display: flex; flex-direction: column; gap: var(--s2); font-size: var(--txt-sm); color: var(--gs-texte-2); } .c-card--module .c-card__body ul li::before { content: "→"; margin-right: .4em; font-weight: 700; } /* Lien "Découvrir" dans la carte module */ .c-card--module .c-card__link { display: inline-flex; align-items: center; gap: .4em; padding: .55em 1.15em; border-radius: var(--r-pill); font-size: var(--txt-sm); font-weight: 700; text-decoration: none; align-self: flex-start; transition: background var(--t-fast), border-color var(--t-fast); } /* Stretched-link : toute la card module devient cliquable via un pseudo overlay sur le lien interne. Le bouton "Découvrir" reste visible et CTA. */ .c-card--module { position: relative; } .c-card--module .c-card__link::before { content: ""; position: absolute; inset: 0; z-index: 1; } /* ── Exception couleur modules home ───────────────────────────────────────── Les 4 cartes modules conservent leurs couleurs distinctives, indépendantes de var(--accent). Documentation : voir REFACTOR-PLAN.md §2. */ .c-card--module-manager { background: var(--gs-violet-xpale); border: 1.5px solid var(--gs-violet-pale); } .c-card--module-cash { background: var(--gs-cash-pale); border: 1.5px solid var(--gs-cash-border); } .c-card--module-access { background: var(--gs-access-pale); border: 1.5px solid var(--gs-access-border); } .c-card--module-vision { background: var(--gs-vision-pale); border: 1.5px solid var(--gs-vision-border); } /* Eyebrows colorés par module */ .c-card--module-manager .c-card__eyebrow { color: var(--gs-violet); } .c-card--module-cash .c-card__eyebrow { color: var(--gs-cash-fonce); } .c-card--module-access .c-card__eyebrow { color: var(--gs-access-fonce); } .c-card--module-vision .c-card__eyebrow { color: var(--gs-vision-fonce); } /* Liens "Découvrir" colorés par module */ .c-card--module-manager .c-card__link { color: var(--gs-violet); background: rgba(109, 62, 244, .10); border: 1px solid rgba(109, 62, 244, .25); } .c-card--module-manager .c-card__link:hover { background: rgba(109, 62, 244, .18); } .c-card--module-cash .c-card__link { color: var(--gs-cash-fonce); background: rgba(184, 116, 0, .08); border: 1px solid rgba(184, 116, 0, .2); } .c-card--module-cash .c-card__link:hover { background: rgba(184, 116, 0, .15); } .c-card--module-access .c-card__link { color: var(--gs-access-fonce); background: rgba(10, 122, 62, .08); border: 1px solid rgba(10, 122, 62, .2); } .c-card--module-access .c-card__link:hover { background: rgba(10, 122, 62, .15); } .c-card--module-vision .c-card__link { color: var(--gs-vision-fonce); background: rgba(29, 78, 216, .08); border: 1px solid rgba(29, 78, 216, .2); } .c-card--module-vision .c-card__link:hover { background: rgba(29, 78, 216, .15); } /* ════════════════════════════════════════════════════════════════════════════ .c-card--advantage | Carte avantage home (fond uni, icône XL, lien bas) ════════════════════════════════════════════════════════════════════════════ */ .c-card--advantage { border-radius: var(--r-xl); padding: var(--s8); display: flex; flex-direction: column; gap: var(--s4); min-height: 240px; } .c-card--advantage .c-card__icon { position: static; /* override l'absolute du concept */ font-size: 2.6rem; line-height: 1; width: auto; height: auto; background: transparent; box-shadow: none; border-radius: 0; padding: 0; } .c-card--advantage .c-card__title { font-size: 1.35rem; font-weight: 800; line-height: 1.2; margin: 0; } .c-card--advantage .c-card__text { font-size: .88rem; line-height: var(--lh-loose); flex: 1; margin: 0; } .c-card--advantage .c-card__cta { font-weight: 700; font-size: .83rem; display: flex; align-items: center; gap: .3em; text-decoration: none; margin-top: auto; } /* Fonds des cartes avantage */ .c-card--bg-accent { background: var(--accent); color: var(--gs-blanc); } .c-card--bg-accent .c-card__text { opacity: .88; } .c-card--bg-accent .c-card__cta { color: rgba(255, 255, 255, .85); } .c-card--bg-noir { background: var(--gs-noir); color: var(--gs-blanc); } .c-card--bg-noir .c-card__text { opacity: .78; } .c-card--bg-noir .c-card__cta { color: rgba(255, 255, 255, .8); } .c-card--bg-ivoire { background: var(--gs-ivoire); border: 1.5px solid var(--gs-border); } .c-card--bg-ivoire .c-card__cta { color: var(--accent); } .c-card--bg-gradient { background: linear-gradient(135deg, #f0edff 0%, #e8f5ff 100%); border: 1.5px solid var(--gs-border); } .c-card--bg-gradient .c-card__cta { color: var(--accent); } /* Le composant .c-card--timeline-step a été remplacé par .c-timeline unifié (voir plus bas dans ce bloc). Sa structure verticale alternée gauche/droite n'est plus utilisée. */ /* ── .c-founder ────────────────────────────────────────────────────────────── Section signature E-E-A-T avec photo fondateur + citation. Bandeau ivoire. */ .c-founder { background: var(--gs-fond-2); border-top: 1px solid var(--gs-border); border-bottom: 1px solid var(--gs-border); padding-block: var(--s16); } .c-founder__inner { max-width: var(--max-content); margin-inline: auto; padding-inline: var(--container-px); display: grid; grid-template-columns: auto 1fr; /* desktop : photo à taille fixe + contenu en remplissage (mobile = 1fr en §08) */ gap: var(--s10); align-items: center; } .c-founder__photo img { width: 180px; height: 180px; border-radius: var(--r-xl); object-fit: cover; box-shadow: var(--sh-md); } .c-founder__quote { font-size: clamp(1rem, 1.5vw, 1.15rem); font-style: italic; line-height: var(--lh-loose); color: var(--gs-texte-2); margin-bottom: var(--s5); padding-left: var(--s5); border-left: 3px solid var(--accent); } .c-founder__name { font-size: var(--txt-md); font-weight: 800; color: var(--gs-noir); } .c-founder__role { font-size: var(--txt-sm); color: var(--accent); font-weight: 600; margin-top: var(--s1); } .c-founder__bio { font-size: var(--txt-xs); color: var(--gs-texte-3); margin-top: var(--s2); } .c-founder__link { display: inline-flex; align-items: center; gap: .3em; font-size: var(--txt-sm); font-weight: 700; color: var(--accent); border-bottom: 1.5px solid rgba(109, 62, 244, .3); text-decoration: none; margin-top: var(--s4); padding-bottom: 1px; transition: color var(--t-fast); } .c-founder__link:hover { color: var(--accent-fonce); } /* ── .c-special-cases ──────────────────────────────────────────────────────── Encart "Ces concepts ne correspondent pas à votre projet ?" (cas particuliers). Affiché sous les cartes concept, fond gris très clair, contient des pills. */ .c-special-cases { margin-top: var(--s4); padding: var(--s6) var(--s8); background: var(--gs-fond-2); border: 2px solid var(--gs-border); /* aligné sur l'épaisseur des cartes .c-card--concept au-dessus */ border-radius: var(--r-lg); text-align: center; } .c-special-cases__title { display: block; font-size: 1.05rem; font-weight: 800; color: var(--gs-noir); letter-spacing: -.01em; margin-bottom: var(--s2); } .c-special-cases__sub { font-size: .9rem; color: rgba(15, 17, 22, .65); line-height: var(--lh-normal); margin: 0 0 var(--s5); } .c-special-cases__pills { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-bottom: var(--s5); } .c-special-cases__cta { font-size: .92rem; color: rgba(15, 17, 22, .7); line-height: var(--lh-normal); } .c-special-cases__cta a { color: var(--accent); font-weight: 700; border-bottom: 1.5px solid rgba(109, 62, 244, .3); } .c-special-cases__cta a:hover { color: var(--accent-fonce); } /* ── .c-trust-row ──────────────────────────────────────────────────────────── Ligne de pastilles de confiance sous le titre d'une section (Stripe, NF525, RGPD, équipe française). Composée de .c-pill--trust. Masquée sur mobile (cf. §08 RESPONSIVE). */ .c-trust-row { max-width: min(1080px, 90%); margin: 2.25rem auto 0; display: flex; flex-wrap: nowrap; gap: .6rem; justify-content: space-between; align-items: center; } /* ── .c-section-header ─────────────────────────────────────────────────────── En-tête de section : eyebrow (petit label uppercase), titre H2, sous-titre. Centré par défaut via le modifier --center (cohérent avec le legacy où la majorité des sections sont centrées). Variantes : --center : tout centré (par défaut visuel) --left : aligné à gauche */ /* Wrapper du header section : largeur maximale uniforme pour homogénéiser tous les en-têtes (titre + sub partagent la même boîte centrée). */ .c-section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 760px; /* largeur uniforme : titres et subs alignés visuellement */ margin-inline: auto; } .c-section-header--center { text-align: center; } .c-section-header--left { text-align: left; max-width: 760px; } .c-section-header__eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .85rem; } .c-section-header__title { font-size: clamp(1.85rem, 4.2vw, 2.85rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.1; color: var(--gs-noir); margin-bottom: var(--s4); /* Pas de max-width ici : le wrapper .c-section-header limite déjà la largeur */ } .c-section-header__sub { font-size: clamp(.95rem, 1.5vw, 1.1rem); color: var(--gs-texte-2); line-height: var(--lh-loose); margin-top: var(--s3); /* Pas de max-width ici : le wrapper limite la largeur */ } /* ── Section wrappers (petits conteneurs spécifiques) ───────────────────────── Ces classes habillent des sections particulières (logos, stats, concept) avec leur padding / border / shadow. Plus minces que de vrais composants. */ .c-section-logos { background: var(--gs-blanc); padding-block: 4rem 2rem; position: relative; z-index: 5; box-shadow: 0 -12px 32px -20px rgba(15, 17, 22, .18), 0 8px 24px -16px rgba(15, 17, 22, .08); } .c-section-logos__heading { text-align: center; font-size: clamp(1.3rem, 3vw, 1.55rem); font-weight: 800; color: var(--gs-noir); margin: 0 0 1.25rem; letter-spacing: -.02em; line-height: 1.2; padding-inline: var(--s4); } .c-section-logos__heading em { font-style: normal; color: var(--accent); } .c-section-stats { background: var(--gs-blanc); overflow: hidden; padding: 0; border-top: 1px solid var(--gs-border); border-bottom: 1px solid var(--gs-border); } .c-section-concept { padding-block: 5rem 4rem; } /* ── .c-contact-layout ─────────────────────────────────────────────────────── Split-screen plein viewport (page contact). Colonne sombre à gauche (argumentaire + parcours + crédibilité), colonne claire à droite (quiz + ouverture popup Brevo). Hauteur calculée pour occuper l'écran sous la nav fixe. En mobile, les 2 colonnes s'empilent et la hauteur devient auto. */ .c-contact-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--nav-height)); align-items: stretch; } .c-contact-side { position: relative; overflow: hidden; display: flex; align-items: flex-start; padding: var(--s10); } .c-contact-side--dark { background: var(--gs-noir); color: var(--gs-blanc); justify-content: flex-end; } .c-contact-side--dark::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 40% at 15% 25%, rgba(109, 62, 244, .25) 0%, transparent 60%), radial-gradient(ellipse 50% 60% at 85% 75%, rgba(167, 139, 255, .12) 0%, transparent 65%); pointer-events: none; } .c-contact-side--light { background: var(--gs-ivoire); justify-content: center; align-items: center; padding: var(--s6) var(--s6) var(--s14); } .c-contact-side__inner { position: relative; z-index: 1; width: 100%; } .c-contact-side--dark .c-contact-side__inner { max-width: 440px; } .c-contact-side--light .c-contact-side__inner { max-width: 460px; } .c-contact-side__eyebrow { display: inline-flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-pale); margin-bottom: var(--s5); } .c-contact-side__h1 { font-size: clamp(1.8rem, .5rem + 2.5vw, 2.6rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; color: var(--gs-blanc); margin-bottom: var(--s5); } .c-contact-side__h1 em { font-style: italic; color: var(--accent-pale); } /* ── .c-contact-path : timeline 4 étapes (parcours visio → onboarding) ─────── */ .c-contact-path { margin: 0 0 var(--s8); padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; } .c-contact-path__eyebrow { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-pale); font-weight: 600; margin-bottom: 4px; } .c-contact-path__item { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 14px; align-items: flex-start; } .c-contact-path__item:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 32px; bottom: -14px; width: 1px; background: linear-gradient(to bottom, rgba(179, 160, 255, .35), rgba(179, 160, 255, .08)); } .c-contact-path__num { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(179, 160, 255, .35); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: var(--gs-blanc); background: rgba(255, 255, 255, .03); flex-shrink: 0; } .c-contact-path__item--active .c-contact-path__num { background: var(--accent-pale); color: var(--gs-noir); border-color: var(--accent-pale); box-shadow: 0 0 0 4px rgba(179, 160, 255, .15); } .c-contact-path__body { display: flex; flex-direction: column; gap: 2px; padding-top: 4px; } .c-contact-path__label { font-size: 15px; font-weight: 600; color: var(--gs-blanc); line-height: 1.3; } .c-contact-path__item--active .c-contact-path__label { color: var(--accent-pale); } .c-contact-path__desc { font-size: 13px; color: rgba(255, 255, 255, .62); line-height: 1.45; } /* ── .c-contact-credibility ─ bloc explicatif "pourquoi 30 min de visio" ──── */ .c-contact-credibility { margin-top: var(--s8); padding: var(--s5) var(--s6); background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-lg); border-left: 3px solid var(--accent-pale); } .c-contact-credibility p { font-size: .92rem; color: rgba(255, 255, 255, .78); line-height: 1.65; margin: 0 0 .85rem; } .c-contact-credibility p:last-child { margin-bottom: 0; } .c-contact-credibility strong { color: var(--gs-blanc); } .c-contact-credibility__note { color: rgba(255, 255, 255, .55) !important; font-style: italic; font-size: .85rem; } /* ── .c-contact-quiz ─ sélecteur de parcours 2 étapes ─────────────────────── */ .c-contact-quiz { display: flex; flex-direction: column; gap: .65rem; } /* Restaure l'attribut `hidden` natif (écrasé par `display: flex` ci-dessus) */ .c-contact-quiz[hidden] { display: none; } .c-contact-quiz__eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 .25rem; } .c-contact-quiz__h2 { font-size: 1.3rem; font-weight: 900; letter-spacing: -.025em; line-height: 1.2; color: var(--gs-noir); margin: 0 0 .65rem; } .c-contact-quiz__h2 em { font-style: italic; color: var(--accent); } .c-contact-quiz__intro { font-size: .92rem; color: var(--gs-texte-2); margin: 0 0 .5rem; line-height: 1.55; } .c-contact-quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; } .c-contact-quiz__nav .c-contact-quiz__eyebrow { margin: 0; } .c-contact-quiz__back { font-size: .82rem; color: var(--accent); background: none; border: none; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: 0; } .c-contact-quiz__back:hover { text-decoration: underline; } .c-contact-quiz__step { display: flex; flex-direction: column; gap: .45rem; } .c-contact-quiz__btn { display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left; background: transparent; border: 1px solid rgba(15, 17, 22, .12); border-radius: .75rem; padding: .6rem .9rem; font-family: inherit; font-size: .86rem; font-weight: 600; color: var(--gs-noir); cursor: pointer; transition: border-color var(--t-fast), color var(--t-fast); } .c-contact-quiz__btn strong { font-weight: 800; } .c-contact-quiz__btn:hover { border-color: var(--accent); color: var(--accent); } .c-contact-quiz__btn span:first-child { font-size: 1.05rem; line-height: 1.2; flex-shrink: 0; } .c-contact-quiz__btn-body { display: flex; flex-direction: column; gap: .15rem; } .c-contact-quiz__btn-body em { font-style: normal; font-weight: 400; font-size: .76rem; color: var(--gs-texte-2); } .c-contact-quiz__legal { font-size: .78rem; color: var(--gs-texte-3); margin: 1.5rem 0 0; text-align: center; } /* Fallback consentement RGPD bloqué */ .c-contact-quiz__fallback p { font-size: .92rem; line-height: 1.6; color: var(--gs-noir); margin: .5rem 0 1.25rem; } .c-contact-quiz__fallback-note { font-size: .78rem; color: var(--gs-texte-2); line-height: 1.5; margin: 1rem 0 0; } .c-contact-quiz__fallback-note button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; cursor: pointer; } /* ═══════════════════════════════════════════════════════════════════════════ COMPOSANTS PAGE MERCI / CONFIRMATION RDV Pattern réutilisable pour toute page de confirmation (RDV, paiement, etc.) ═══════════════════════════════════════════════════════════════════════════ */ /* ── .c-confirm-hero ─ Hero de page confirmation (badge + h1 + sub + checkpoints) ── */ .c-confirm-hero { padding-block: var(--s14) var(--s10); background: var(--gs-ivoire); border-bottom: 1px solid var(--gs-border); } .c-confirm-hero__inner { max-width: 760px; margin: 0 auto; padding-inline: var(--container-px); text-align: center; } .c-confirm-hero__badge { display: inline-flex; align-items: center; gap: .5em; padding: .5em 1em; background: rgba(10, 122, 62, .10); color: var(--gs-access-fonce); border: 1px solid rgba(10, 122, 62, .25); border-radius: var(--r-pill); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s5); } .c-confirm-hero__badge svg { width: 14px; height: 14px; flex-shrink: 0; } .c-confirm-hero__badge--violet { background: var(--accent-xpale); color: var(--accent); border-color: var(--accent-pale); } .c-confirm-hero__h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: var(--gs-noir); margin: 0 0 var(--s4); } .c-confirm-hero__sub { font-size: var(--txt-md); color: var(--gs-texte-2); line-height: var(--lh-loose); margin: 0 auto; max-width: 60ch; } /* ── .c-confirm-split ─ section 2 colonnes : texte + visuel ──────────────── */ .c-confirm-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: center; } .c-confirm-split__eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); } .c-confirm-split__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.2; color: var(--gs-noir); margin: 0 0 var(--s5); } .c-confirm-split__body p { font-size: var(--txt-base); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0 0 var(--s4); } .c-confirm-split__body p:last-child { margin-bottom: 0; } /* Bloc texte gauche du c-confirm-split — sticky en desktop pour suivre le scroll des cards/visuels côté droit (donne plus de matière au lecteur). */ .c-confirm-split__text { align-self: start; position: sticky; top: calc(var(--nav-height) + var(--s4)); } /* Liste à puces dans le bloc texte gauche du c-confirm-split. Marqueurs ✓ violets, alignés sur la ligne de base, hangs propres. */ .c-confirm-split__list { list-style: none; padding: 0; margin: 0 0 var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .c-confirm-split__list li { position: relative; padding-left: calc(var(--s5) + var(--s1)); font-size: var(--txt-base); line-height: var(--lh-loose); color: var(--gs-texte-2); } .c-confirm-split__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: var(--s4); height: var(--s4); border-radius: 999px; background: var(--accent-pale); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 60% 60%; flex: 0 0 auto; } .c-confirm-split__visual img, .c-confirm-split__visual picture img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--sh-lg); display: block; } /* ── .c-confirm-stack ─ 2 figures empilées avec caption (used in --split) ── */ .c-confirm-stack { display: flex; flex-direction: column; gap: var(--s4); } .c-confirm-stack__item { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); } .c-confirm-stack__item img { width: 100%; height: auto; display: block; } .c-confirm-stack__caption { position: absolute; bottom: var(--s3); left: var(--s3); background: rgba(15, 17, 22, .8); backdrop-filter: blur(6px); color: var(--gs-blanc); padding: .35em .85em; border-radius: var(--r-pill); font-size: .75rem; font-weight: 700; letter-spacing: .04em; } /* ── .c-confirm-tip ─ carte "pour rendre cet échange efficace" ───────────── */ .c-confirm-tips-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s8); } .c-confirm-tip { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s8); background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); } .c-confirm-tip__icon { width: 44px; height: 44px; background: var(--accent-xpale); border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; color: var(--accent); } .c-confirm-tip__icon svg { width: 22px; height: 22px; } .c-confirm-tip__title { font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; color: var(--gs-noir); margin: 0; } .c-confirm-tip__text { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: 1.6; margin: 0; } /* ── .c-confirm-tips-title ─ titre de la section tips (centré) ───────────── */ .c-confirm-tips-title { font-size: clamp(1.4rem, 3vw, 1.85rem); font-weight: 900; letter-spacing: -.025em; text-align: center; color: var(--gs-noir); margin: 0; } /* ── .c-confirm-resource ─ carte ressource (thumb + chip + body + cta) ─── */ .c-confirm-resources-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s8); } .c-confirm-resource { display: flex; flex-direction: column; background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: inherit; transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .c-confirm-resource:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--sh-md); } .c-confirm-resource__thumb { width: 100%; height: 180px; object-fit: cover; display: block; } .c-confirm-resource__body { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s6); flex: 1; } .c-confirm-resource__chip { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: var(--accent-xpale); padding: .25em .75em; border-radius: var(--r-pill); align-self: flex-start; } .c-confirm-resource__body h3 { font-size: 1.1rem; font-weight: 800; letter-spacing: -.015em; color: var(--gs-noir); margin: 0; } .c-confirm-resource__body p { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: 1.55; margin: 0; flex: 1; } .c-confirm-resource__cta { display: inline-flex; align-items: center; gap: .35em; font-size: .85rem; font-weight: 700; color: var(--accent); margin-top: var(--s2); } /* ── .c-confirm-pledge ─ section charte éthique (eyebrow + intro + h2 + body) ── */ .c-confirm-pledge { max-width: 720px; margin: 0 auto; text-align: center; } .c-confirm-pledge__eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); } .c-confirm-pledge__intro { font-size: var(--txt-md); font-style: italic; color: var(--gs-texte-2); margin: 0 0 var(--s3); } .c-confirm-pledge__title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.2; color: var(--gs-noir); margin: 0 0 var(--s6); } .c-confirm-pledge__body { text-align: left; max-width: 600px; margin: 0 auto; } .c-confirm-pledge__body p { font-size: var(--txt-base); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0 0 var(--s4); } .c-confirm-pledge__body p:last-child { margin-bottom: 0; } .c-confirm-pledge__specifique { background: var(--accent-xpale); border-left: 3px solid var(--accent); padding: var(--s4) var(--s5); border-radius: 0 var(--r-sm) var(--r-sm) 0; } /* ── .c-error-404 ──────────────────────────────────────────────────────────── Page d'erreur 404. Section centrée avec gros chiffre violet, titre, sous-paragraphe, CTA principal, grille de cartes d'orientation, note bas. */ .c-error-404 { padding-block: var(--s16); text-align: center; } .c-error-404__big { font-size: clamp(5rem, 14vw, 8.5rem); font-weight: 900; letter-spacing: -.06em; color: var(--accent); line-height: 1; margin-bottom: var(--s4); } .c-error-404__title { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 var(--s4); color: var(--gs-noir); } .c-error-404__sub { font-size: var(--txt-md); color: var(--gs-texte-2); max-width: 520px; margin: 0 auto var(--s10); line-height: 1.65; } .c-error-404__cta-wrap { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--s12); } .c-error-404__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); margin-bottom: var(--s10); text-align: left; } .c-error-404__card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s5) var(--s6); background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-md); text-decoration: none; color: var(--gs-noir); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .c-error-404__card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-sm); } .c-error-404__card-title { font-size: var(--txt-base); font-weight: 800; color: var(--gs-noir); } .c-error-404__card-desc { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: 1.5; } .c-error-404__bottom-note { margin-top: var(--s10); font-size: .78rem; color: var(--gs-texte-3); text-align: center; } .c-error-404__bottom-note a { color: var(--gs-texte-2); text-decoration: underline; } /* ── .c-page-hero ──────────────────────────────────────────────────────────── Hero sobre pour pages secondaires (légales, articles, infos). Fond ivoire, titre + sous-ligne + date / meta. Pas d'image, pas de CTA. */ .c-page-hero { background: var(--gs-ivoire); padding-block: var(--s14) var(--s10); border-bottom: 1px solid var(--gs-border); } .c-page-hero__title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 800; color: var(--gs-noir); letter-spacing: -.02em; margin: 0 0 var(--s2); } .c-page-hero__sub { color: var(--gs-texte-2); font-size: var(--txt-sm); margin: 0 0 var(--s1); } .c-page-hero__meta { color: var(--gs-texte-2); font-size: .85rem; margin: 0; } /* ── .c-legal-doc ──────────────────────────────────────────────────────────── Wrapper de document légal (CGV, CGU, mentions, politique de confidentialité). Typographie aérée pour les longs textes : h2 = articles avec border-top, h3 = sous-sections, h4 = sous-sous-sections, p / ul / li avec espacement généreux. Max-width fixe pour confort de lecture. */ .c-legal-doc { max-width: 820px; margin-inline: auto; padding-block: var(--s16) var(--s12); } .c-legal-doc h2 { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--gs-border); font-size: 1.5rem; line-height: 1.3; letter-spacing: -.01em; color: var(--gs-noir); } .c-legal-doc h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; } .c-legal-doc h3 { margin-top: 2.5rem; font-size: 1.15rem; line-height: 1.35; color: var(--gs-noir); } .c-legal-doc h4 { margin-top: 1.75rem; font-size: 1rem; font-weight: 700; line-height: 1.4; color: var(--gs-noir); } .c-legal-doc p, .c-legal-doc ul { margin-bottom: 1.15rem; line-height: 1.65; color: var(--gs-noir); } .c-legal-doc ul { padding-left: 1.25rem; list-style: disc; } .c-legal-doc ul li { margin-bottom: 0.4rem; } .c-legal-doc ul li:last-child { margin-bottom: 0; } .c-legal-doc a { color: var(--accent); text-decoration: underline; } .c-legal-doc a:hover { color: var(--accent-fonce); } /* Paragraphe d'intro mis en avant (legal-doc — politique de confidentialité) */ .c-legal-doc__intro { font-size: 1.02rem; color: var(--gs-noir); line-height: 1.7; } .c-legal-doc__intro + .c-legal-doc__intro { margin-top: -0.4rem; } /* ── .c-archive-banner ─────────────────────────────────────────────────────── Bandeau d'avertissement affiché en haut des pages d'archive ("vous consultez une version qui n'est plus en vigueur"). Couleur warning douce. */ .c-archive-banner { background: linear-gradient(135deg, rgba(250, 191, 72, .12), rgba(250, 191, 72, .05)); border-left: 4px solid var(--gs-cash); padding: 1rem 1.25rem; border-radius: var(--r-sm); margin: 0 0 var(--s10); font-size: .92rem; line-height: 1.55; color: var(--gs-noir); } .c-archive-banner strong { color: var(--gs-noir); } .c-archive-banner a { color: var(--accent); font-weight: 600; text-decoration: underline; } /* ── .c-archive-grid + .c-archive-card ─────────────────────────────────────── Grille des versions précédentes en bas d'une page légale. Liens simples avec hover discret (pas de cartes pleines, registre légal sobre). */ .c-archive { max-width: 820px; margin: 0 auto; padding-block: var(--s12) var(--s16); border-top: 2px solid var(--gs-border); } .c-archive__title { font-size: 1.35rem; font-weight: 800; margin: 0 0 var(--s3); color: var(--gs-noir); } .c-archive__intro { color: var(--gs-texte-2); font-size: .95rem; margin-bottom: var(--s5); line-height: 1.6; } .c-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; } .c-archive-card { display: block; padding: 1.1rem 1.25rem; background: var(--gs-ivoire); border: 1px solid var(--gs-border); border-radius: var(--r-sm); text-decoration: none; color: var(--gs-noir); transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); } .c-archive-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(109, 62, 244, .08); } .c-archive-card__title { font-weight: 700; font-size: 1rem; margin: 0 0 .25rem; color: var(--gs-noir); } .c-archive-card__range { font-size: .82rem; color: var(--gs-texte-2); margin: 0; line-height: 1.45; } /* ── .c-modal ──────────────────────────────────────────────────────────────── Modal générique plein écran (desktop : 96vw × 95vh max 1400px, mobile : 100vw × 100vh). Backdrop sombre avec blur, close en croix en haut à droite, iframe ou contenu libre dans `.c-modal__panel`. Lock du scroll body. Usage type : JS : ajouter `.is-open` sur `.c-modal` + `.is-modal-open` sur ``. */ .c-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; } .c-modal.is-open { display: flex; } .c-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 22, .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); cursor: pointer; } .c-modal__panel { position: relative; width: 96vw; height: 95vh; max-width: 1400px; background: var(--gs-blanc); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; z-index: 1; } .c-modal__close { position: absolute; top: var(--s3); right: var(--s3); z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: var(--gs-blanc); border: 1px solid var(--gs-border); box-shadow: var(--sh-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gs-noir); transition: background var(--t-fast), transform var(--t-fast); } .c-modal__close:hover { background: var(--gs-fond-2); transform: scale(1.05); } .c-modal__iframe { width: 100%; height: 100%; border: 0; display: block; } body.is-modal-open { overflow: hidden; } /* ═══════════════════════════════════════════════════════════════════════════ COMPOSANTS PAGE À PROPOS ═══════════════════════════════════════════════════════════════════════════ */ /* ── .c-quote ─ citation centrée italique discrète (signature de section) ─── */ .c-quote { text-align: center; font-style: italic; font-size: 1rem; line-height: 1.6; max-width: 640px; margin: var(--s10) auto 0; color: var(--gs-texte-3); } .o-section--noir .c-quote { color: rgba(255, 255, 255, .55); } /* ── .c-card--bg-glassy ─ carte sur fond foncé (avantage variant) ─────────── */ .c-card--bg-glassy { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); color: var(--gs-blanc); } .c-card--bg-glassy .c-card__title { color: var(--gs-blanc); } .c-card--bg-glassy .c-card__text { color: rgba(255, 255, 255, .72); } /* ── .c-card--philo ─ carte philosophie avec numéro 01/02/03 ──────────────── */ .c-card--philo { position: relative; padding: 5.5rem var(--s8) var(--s8); /* padding-top suffisant pour passer sous le numéro */ background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-xl); display: flex; flex-direction: column; gap: var(--s3); } .c-card--philo .c-card__num { position: absolute; top: var(--s4); right: var(--s5); font-size: 3rem; font-weight: 900; line-height: 1; color: var(--accent-pale); letter-spacing: -.03em; } .c-card--philo .c-card__title { font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--gs-noir); } .c-card--philo .c-card__text { font-size: .92rem; line-height: 1.65; color: var(--gs-texte-2); flex: 1; } .c-card--philo .c-pill { align-self: flex-start; margin-top: var(--s2); } /* ── .c-apropos-story ─ section histoire : media + texte avec badge ───────── */ .c-apropos-story { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: center; margin-top: var(--s10); } .c-apropos-story__media { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .c-apropos-story__media img { width: 100%; height: auto; display: block; } .c-apropos-story__badge { position: absolute; bottom: var(--s5); left: var(--s5); background: var(--gs-blanc); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: var(--sh-md); display: flex; flex-direction: column; gap: 4px; } .c-apropos-story__badge strong { font-size: 1.85rem; font-weight: 900; letter-spacing: -.04em; color: var(--accent); line-height: 1; } .c-apropos-story__badge span { font-size: .78rem; color: var(--gs-texte-2); line-height: 1.4; } .c-apropos-story__eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); } .c-apropos-story__h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 900; letter-spacing: -.025em; line-height: 1.2; color: var(--gs-noir); margin: 0 0 var(--s5); } .c-apropos-story__text p { font-size: var(--txt-base); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0 0 var(--s4); } .c-apropos-story__text p:last-child { margin-bottom: 0; } /* ── .c-loictap ─ section portrait Loïc Tap (photo + content) ─────────────── */ .c-loictap { display: grid; grid-template-columns: 360px 1fr; gap: var(--s12); align-items: start; margin-top: var(--s10); } .c-loictap__photo-wrap { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-lg); } .c-loictap__photo { width: 100%; height: auto; display: block; } .c-loictap__badge { position: absolute; bottom: var(--s4); left: var(--s4); right: var(--s4); background: rgba(15, 17, 22, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--gs-blanc); padding: var(--s3) var(--s4); border-radius: var(--r-md); display: flex; flex-direction: column; gap: 2px; } .c-loictap__badge span { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-pale); } .c-loictap__badge strong { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; } .c-loictap__eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-xpale); padding: .4em .85em; border-radius: var(--r-pill); margin-bottom: var(--s4); } .c-loictap__h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: var(--gs-noir); margin: 0 0 var(--s5); } .c-loictap__h2 em { font-style: italic; color: var(--accent); } .c-loictap__lead { font-size: var(--txt-md); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0 0 var(--s5); } .c-loictap__list { list-style: none; padding: 0; margin: 0 0 var(--s5); display: flex; flex-direction: column; gap: var(--s2); } .c-loictap__list li { position: relative; padding-left: var(--s5); font-size: var(--txt-sm); line-height: 1.55; color: var(--gs-texte-2); } .c-loictap__list li::before { content: "→"; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 800; } .c-loictap__sitelink { font-size: var(--txt-sm); color: var(--gs-texte-2); margin: 0; } .c-loictap__sitelink a { color: var(--accent); font-weight: 700; text-decoration: underline; } /* ── .c-social-counter ─ carte compteur réseau social ─────────────────────── */ .c-loictap__socials { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: var(--s5); } .c-social-counter { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--s3); background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-md); text-decoration: none; color: var(--gs-noir); transition: border-color var(--t-fast), transform var(--t-fast); } .c-social-counter:hover { border-color: var(--accent); transform: translateY(-2px); } .c-social-counter__icon { font-size: 1.4rem; line-height: 1; } .c-social-counter__value { font-size: 1.05rem; font-weight: 800; color: var(--accent); letter-spacing: -.02em; } .c-social-counter__name { font-size: .72rem; font-weight: 600; color: var(--gs-texte-2); letter-spacing: .04em; text-transform: uppercase; } /* ── .c-apropos-reels + .c-reel-card ─ grille vidéos réseaux 9:16 ─────────── */ .c-apropos-reels { margin-top: var(--s16); } .c-apropos-reels__header { text-align: center; max-width: 720px; margin: 0 auto var(--s8); } .c-apropos-reels__eyebrow { display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2); } .c-apropos-reels__h3 { font-size: clamp(1.4rem, 2.5vw, 1.85rem); font-weight: 900; letter-spacing: -.025em; color: var(--gs-noir); margin: 0 0 var(--s3); } .c-apropos-reels__sub { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: 1.65; margin: 0; } .c-apropos-reels__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); } .c-apropos-reels__cta { text-align: center; margin-top: var(--s8); } .c-reel-card { display: block; text-decoration: none; color: inherit; } .c-reel-card__media { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-md); transition: transform var(--t-fast), box-shadow var(--t-fast); } .c-reel-card:hover .c-reel-card__media { transform: translateY(-3px); box-shadow: var(--sh-lg); } .c-reel-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .c-reel-card__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; background: rgba(255, 255, 255, .9); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent); } .c-reel-card__play svg { width: 18px; height: 18px; margin-left: 3px; } .c-reel-card__platform { position: absolute; top: var(--s2); left: var(--s2); background: rgba(15, 17, 22, .7); color: var(--gs-blanc); font-size: .65rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--r-xs); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Le composant .c-apropos-timeline a été promu en composant générique .c-timeline (voir plus bas dans le bloc COMPONENTS). Il est désormais utilisé par les pages À propos et Tarifs. */ /* ── .c-back-to-top ────────────────────────────────────────────────────────── Bouton rond fixé en bas à droite, apparait après ~600px de scroll. */ .c-back-to-top { position: fixed; bottom: var(--s6); right: var(--s5); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--gs-blanc); border: none; border-radius: 50%; box-shadow: var(--sh-md); cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--t-base), transform var(--t-base); z-index: 800; } .c-back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .c-back-to-top:hover { background: var(--accent-fonce); transform: translateY(-2px); } .c-back-to-top svg { width: 18px; height: 18px; } /* ── .c-carousel ───────────────────────────────────────────────────────────── Carousel à pages (témoignages home). Plusieurs pages absolument superposées, opacité gérée via `[data-current="true"]` (data-attribute conservé tel quel, hook JS découplé). */ .c-carousel { position: relative; min-height: 240px; margin-top: var(--s8); } .c-carousel__page { display: grid; grid-template-columns: repeat(3, 1fr); /* desktop : 3 cartes par ligne (mobile = 1fr en §08) */ gap: var(--s5); opacity: 0; pointer-events: none; position: absolute; inset: 0; transition: opacity .4s ease; } .c-carousel__page[data-current="true"] { opacity: 1; pointer-events: auto; position: relative; inset: auto; } .c-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s8); } .c-carousel__controls button { background: var(--gs-fond-2); border: 1px solid var(--gs-border); border-radius: var(--r-sm); padding: var(--s2) var(--s4); font-size: var(--txt-sm); font-weight: 700; color: var(--gs-noir); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .c-carousel__controls button:hover { background: var(--accent); color: var(--gs-blanc); border-color: var(--accent); } /* Dots indicateurs */ .c-carousel__dots, #testi-dots { display: flex; align-items: center; gap: var(--s2); } .c-carousel__dots button, #testi-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: var(--gs-border); border: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); } .c-carousel__dots button[aria-current="true"], #testi-dots button[aria-current="true"] { background: var(--accent); transform: scale(1.3); } /* ── .c-configurator ───────────────────────────────────────────────────────── Configurateur 4 voies de la home. Carte centrée avec étapes successives, options en boutons grand format, résultat coloré selon le concept choisi. Hook JS : ID `#configurateur`. Les états (project/autonome/premium/hybride) restent en classes pour compatibilité avec le JS inline de index.php. */ .c-configurator { background: linear-gradient(135deg, #fff 0%, #FBFAFF 100%); border: 1px solid rgba(109, 62, 244, .12); border-radius: var(--r-xl); padding: var(--s10); max-width: 720px; margin: var(--s10) auto 0; box-shadow: 0 8px 32px -16px rgba(109, 62, 244, .10); transition: background var(--t-slow), border-color var(--t-slow); } /* États résultat — déclenchés par JS via classes sur #configurateur */ .c-configurator--variant-premium, #configurateur.cfg-result--premium { background: linear-gradient(135deg, #F5F0FF 0%, #EBE4FF 100%); border-color: rgba(109, 62, 244, .25); } .c-configurator--variant-autonome, #configurateur.cfg-result--autonome { background: linear-gradient(135deg, #F0FFF8 0%, #E2F9EE 100%); border-color: rgba(10, 122, 62, .25); } .c-configurator--variant-project, #configurateur.cfg-result--project { background: linear-gradient(135deg, #FFFBF0 0%, #FFF5DC 100%); border-color: rgba(184, 116, 0, .2); } .c-configurator--variant-hybride, #configurateur.cfg-result--hybride { background: linear-gradient(135deg, #F8F7F4 0%, #F0EFF5 100%); border-color: var(--gs-border); } .c-configurator__step { display: block; } .c-configurator__step.is-hidden, .c-configurator__step.config-step--hidden { display: none; } .c-configurator__step-label { font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-align: center; display: block; margin-bottom: .9rem; } .c-configurator__step-title { font-size: 1.15rem; font-weight: 800; color: var(--gs-noir); margin: 0 0 1.25rem; text-align: center; } .c-configurator__options { display: grid; grid-template-columns: 1fr; gap: .75rem; } .c-configurator__option { display: flex; align-items: center; gap: var(--s4); width: 100%; padding: var(--s5); background: var(--gs-blanc); border: 1.5px solid var(--gs-border); border-radius: var(--r-md); font-size: var(--txt-base); font-weight: 500; color: var(--gs-noir); cursor: pointer; text-align: left; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .c-configurator__option:hover { border-color: var(--accent); background: var(--accent-xpale, var(--gs-violet-xpale)); box-shadow: var(--sh-sm); } .c-configurator__option strong { font-weight: 700; } .c-configurator__option-icon { font-size: 1.35rem; flex-shrink: 0; } /* Résultat */ .c-configurator__result { text-align: center; position: relative; padding-top: var(--s10); } .c-configurator__result-badge { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; background: var(--gs-blanc); border: 2px solid var(--gs-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; } .c-configurator__result-badge img { width: 32px; height: 32px; } .c-configurator__result-eyebrow { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--s3); } .c-configurator__result-title { font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 900; color: var(--gs-noir); margin: 0 0 var(--s4); } .c-configurator__result-text { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: var(--lh-loose); margin-bottom: var(--s6); } .c-configurator__result-pills { display: flex; flex-wrap: wrap; gap: var(--s2); justify-content: center; margin-bottom: var(--s4); } .c-configurator__result-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; } .c-configurator__result-meta { margin-top: var(--s4); font-size: .8rem; color: var(--gs-texte-3); } .c-configurator__result-reset { margin-top: var(--s4); font-size: .82rem; color: var(--gs-texte-3); background: none; border: none; cursor: pointer; text-decoration: underline; } .c-configurator__result-reset:hover { color: var(--gs-noir); } /* ── .c-cta-final ──────────────────────────────────────────────────────────── Bandeau CTA final de page (gradient violet, image de fond, halo). Reçoit un titre fort + CTA blanc + CTA ghost-blanc. Variantes : --home : background image joueur padel premium --tarifs : même background, mais peut différer plus tard */ .c-cta-final { position: relative; overflow: hidden; padding-block: var(--section-pad); background: linear-gradient(135deg, #3D1FA8 0%, var(--accent) 50%, var(--accent-fonce) 100%); } .c-cta-final__bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .09; mix-blend-mode: luminosity; pointer-events: none; z-index: 0; }.c-cta-final--tarifs .c-cta-final__bg-image, .c-cta-final--apropos .c-cta-final__bg-image { background-image: url('/images/joueur-padel-club-premium.webp'); } .c-cta-final--lp-premium .c-cta-final__bg-image { background-image: url('/images/joueur-padel-club-premium-sol-premium.webp'); } .c-cta-final--home .c-cta-final__bg-image { background-image: url('/images/joueur-padel-club-premium.webp'); } .c-cta-final--lp-autonome .c-cta-final__bg-image { background-image: url('/images/clubhouse-club-padel.webp'); } .c-cta-final--gs-manager .c-cta-final__bg-image { background-image: url('/images/logiciel-gestion-club-padel-sol-logiciel.webp'); } .c-cta-final--gs-cash .c-cta-final__bg-image { background-image: url('/images/gs-cash-materiel-caisse-tactile-nf525.webp'); } .c-cta-final--gs-cash { background: linear-gradient(135deg, #7A5818 0%, #FABF48 50%, #B8862E 100%); } .c-cta-final--gs-access .c-cta-final__bg-image { background-image: url('/images/gs-access-installation-club-padel-sol-acces-4.webp'); } .c-cta-final--gs-access { background: linear-gradient(135deg, #1B6F44 0%, #42C980 50%, #2E9A60 100%); } .c-cta-final--gs-vision .c-cta-final__bg-image { background-image: url('/images/gs-vision-dashboard-detail-1-sol-site-6.webp'); } .c-cta-final--gs-vision { background: linear-gradient(135deg, #1F4A8C 0%, #4895FA 50%, #2A6FD0 100%); } /* CTA final autonome — override le gradient violet par défaut vers gradient vert uni. */ .c-cta-final--lp-autonome { background: linear-gradient(135deg, var(--gs-access-fonce) 0%, var(--gs-access) 100%); } .c-cta-final__bg-glow { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, .06) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(167, 139, 255, .15) 0%, transparent 50%); pointer-events: none; z-index: 0; } .c-cta-final .o-container { position: relative; z-index: 1; text-align: center; } .c-cta-final__eyebrow { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); margin-bottom: var(--s5); } .c-cta-final__title { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 900; letter-spacing: -.04em; line-height: var(--lh-tight); color: var(--gs-blanc); margin-bottom: var(--s5); } .c-cta-final__sub { font-size: clamp(.95rem, 1.5vw, 1.15rem); color: rgba(255, 255, 255, .8); line-height: var(--lh-loose); max-width: 40rem; margin: 0 auto var(--s8); } .c-cta-final__buttons { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; } .c-cta-final__footnote { margin-top: var(--s5); font-size: .82rem; color: rgba(255, 255, 255, .65); text-align: center; } /* Garde-fou : sur fond violet, .u-text-accent (violet) deviendrait illisible. On force le blanc dans ce contexte pour éviter le piège violet-sur-violet. */ .c-cta-final .u-text-accent { color: var(--gs-blanc) !important; } /* ── .c-faq ────────────────────────────────────────────────────────────────── FAQ accordéon avec photo collante optionnelle. Hook JS : `[data-faq-toggle]` sur la question, `.is-open` sur l'item. La compatibilité avec l'ancienne API JS (`window.toggleFaq(this)` qui cherche `.closest('.faq-item')`) est conservée via classes legacy. */ /* Layout 2 colonnes en desktop (questions + photo collante). En mobile (§08), passe à 1 colonne et la photo disparaît. */ .c-faq, .faq-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--s10); margin-top: var(--s10); } .c-faq__list { display: flex; flex-direction: column; gap: 0; } .c-faq__item, .faq-item { border-bottom: 1px solid var(--gs-border); } .c-faq__question, .faq-item__q { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--s5) 0; background: none; border: none; text-align: left; font-size: var(--txt-base); font-weight: 600; color: var(--gs-noir); cursor: pointer; gap: var(--s4); transition: color var(--t-fast); } .c-faq__question:hover, .faq-item__q:hover { color: var(--accent); } .c-faq__toggle, .faq-item__toggle { width: 20px; height: 20px; flex-shrink: 0; color: var(--gs-texte-3); transition: transform var(--t-base); } .c-faq__toggle svg, .faq-item__toggle svg { width: 100%; height: 100%; } .c-faq__item.is-open .c-faq__toggle, .faq-item.open .faq-item__toggle { transform: rotate(180deg); } .c-faq__item.is-open .c-faq__question, .faq-item.open .faq-item__q { color: var(--accent); } .c-faq__answer, .faq-item__a { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: var(--lh-loose); padding-bottom: var(--s5); display: none; } .c-faq__item.is-open .c-faq__answer, .faq-item.open .faq-item__a { display: block; } .c-faq__answer a, .faq-item__a a { color: var(--accent); text-decoration: underline; } .c-faq__answer strong, .faq-item__a strong { color: var(--gs-noir); } .c-faq__photo, .faq-photo { border-radius: var(--r-xl); object-fit: cover; width: 100%; height: auto; display: block; /* visible en desktop (cachée en §08 mobile) */ box-shadow: var(--sh-md); position: sticky; top: 90px; align-self: start; } /* ── .c-hero ───────────────────────────────────────────────────────────────── Section hero d'introduction de page : badge + h1 + sub + CTAs + reassurance + optionnellement une image full-width. Variantes : (aucune) : hero home (fond blanc) --tarifs : ajoute photo de fond en absolu + liste de drapeaux */ .c-hero { background: var(--gs-blanc); padding-block: clamp(var(--s16), 10vw, var(--s24)) var(--s10); overflow: hidden; text-align: center; } .c-hero > .o-container { display: flex; flex-direction: column; align-items: center; } /* Le hero contient un badge .c-badge — on lui réserve un espace en-dessous */ .c-hero .c-badge { margin-bottom: var(--s6); } .c-hero__title { font-size: clamp(1.6rem, 8vw, 3.5rem); font-weight: 900; letter-spacing: -.04em; line-height: var(--lh-tight); color: var(--gs-noir); max-width: 28ch; text-wrap: balance; /* équilibre la longueur des lignes (Chrome 114+, Safari 17.5+, FF 121+) */ margin-bottom: var(--s5); overflow-wrap: break-word; word-break: break-word; text-align: center; } .c-hero__title em { font-style: italic; color: var(--accent); } .c-hero__sub { font-size: clamp(.95rem, 1.8vw, 1.2rem); color: var(--gs-texte-2); line-height: var(--lh-loose); max-width: 40rem; margin-bottom: var(--s8); overflow-wrap: break-word; text-align: center; } .c-hero__sub strong { color: var(--gs-noir); font-weight: 700; } .c-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s8); justify-content: center; } .c-hero__reassurance { display: flex; flex-wrap: wrap; gap: var(--s5); font-size: var(--txt-sm); color: var(--gs-texte-2); justify-content: center; } .c-hero__reassurance span { display: flex; align-items: center; gap: .4em; } .c-hero__reassurance strong { color: var(--gs-noir); font-weight: 700; } .c-hero__stars { color: #FABF48; letter-spacing: .05em; } /* Trio de stats sous le CTA — chiffre fort + label. Utilisé sur les landings pages (lp-premium, lp-autonome). */ .c-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s8) var(--s10); margin-top: var(--s6); } .c-hero__stat { text-align: center; } .c-hero__stat-val { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -.02em; } .c-hero__stat-lbl { font-size: var(--txt-sm); font-weight: 600; color: var(--gs-texte-2); margin-top: var(--s2); letter-spacing: .02em; } /* Image hero — collée juste au-dessus de la section logos (plus de chevauchement, sinon le bas de la photo est tronqué par le bandeau, surtout en petit écran). */ .c-hero__image-wrap { margin-top: var(--s10); margin-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; overflow: hidden; box-shadow: 0 24px 64px rgba(15, 17, 22, .16); } .c-hero__image { width: 100%; height: auto; /* photo entière : garde son ratio et scale avec la largeur */ display: block; } /* Image hero élargie : c'est la vitrine du mécanisme GS → plus imposante (~78 % de l'écran). On cible uniquement le conteneur de l'image, on libère le cap 1200px et on étire le wrap. */ .c-hero > .o-container:has(> .c-hero__image-wrap) { max-width: none; width: min(78vw, 1680px); padding-inline: 0; align-items: stretch; } /* Hero de l'accueil (celui qui contient l'image) : pas de padding bas, pour coller l'image au bandeau logos au maximum, à toutes les largeurs. */ .c-hero:has(.c-hero__image-wrap) { padding-bottom: 0; } /* Variante --tarifs */ .c-hero--tarifs { position: relative; overflow: hidden; } .c-hero__bg { position: absolute; inset: 0; background-image: url('/images/statistiques-club-sportif-tableau-de-bord.webp'); background-size: cover; background-position: center; opacity: .07; filter: saturate(.5); pointer-events: none; z-index: 0; } .c-hero--tarifs .o-container { position: relative; z-index: 1; } /* Liste de drapeaux (francophonie) sous le hero tarifs */ .c-hero__flags { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem .65rem; padding: 0; margin: 1.75rem auto 0; max-width: 880px; } .c-hero__flags li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .75rem; background: rgba(255, 255, 255, .85); border: 1px solid rgba(15, 17, 22, .08); border-radius: 999px; font-size: .78rem; font-weight: 600; color: rgba(15, 17, 22, .78); box-shadow: 0 1px 2px rgba(15, 17, 22, .04); } .c-hero__flags li span:first-child { font-size: 1.05rem; line-height: 1; } /* ── .c-ticker ─────────────────────────────────────────────────────────────── Bandeau défilant horizontal (marquee). Le track contient 2 fois la liste pour boucler sans saut. Pause au hover. Variantes : --logos : logos clubs partenaires (animation 32s) --stats : chiffres clés (animation 40s) Hook JS : `[data-ticker-track]` et `[data-ticker]` pour pause au hover. */ .c-ticker { position: relative; overflow: hidden; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .c-ticker__track { display: flex; width: max-content; padding-block: var(--s3); } .c-ticker:hover .c-ticker__track { animation-play-state: paused; } /* --logos : animation 32s, gap large, opacité grise */ .c-ticker--logos .c-ticker__track { gap: var(--s8); animation: c-ticker-scroll 32s linear infinite; } .c-ticker--logos .c-ticker__track img { height: 52px; width: auto; object-fit: contain; filter: grayscale(1) opacity(.55); transition: filter var(--t-base); background: transparent; } .c-ticker--logos .c-ticker__track a:hover img, .c-ticker--logos .c-ticker__track img:hover { filter: grayscale(0) opacity(1); } .c-ticker--logos .c-ticker__track a { background: transparent; box-shadow: none; border: none; padding: 0; } /* --stats : animation 40s, items larges, numéro accent */ .c-ticker--stats { mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .c-ticker--stats .c-ticker__track { animation: c-ticker-scroll 40s linear infinite; } .c-ticker__item { display: flex; align-items: center; gap: var(--s5); padding: var(--s5) var(--s8); flex-shrink: 0; } .c-ticker__num { font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 900; letter-spacing: -.04em; color: var(--accent); line-height: 1; } .c-ticker__num span { font-size: .65em; font-weight: 700; } .c-ticker__sep { width: 1px; height: 32px; background: var(--gs-border); flex-shrink: 0; } .c-ticker__label { font-size: var(--txt-sm); font-weight: 600; color: var(--gs-texte-2); line-height: 1.35; white-space: nowrap; } @keyframes c-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── .c-timeline ───────────────────────────────────────────────────────────── Timeline générique : label gauche (année OU étape) + carte horizontale contenant éventuellement une image et du texte enrichi. Utilisée par : - page À propos (label = année 2013 / 2019 / …) - page Tarifs (label = "Étape 1" / "Étape 2" / …) Sous-éléments : .c-timeline__item :

chaque étape .c-timeline__item--now : modifier label italique ("Aujourd'hui") .c-timeline__label : label gauche (année ou n° d'étape) .c-timeline__card : carte horizontale (media gauche + texte) .c-timeline__media : image gauche (optionnel) .c-timeline__text : zone texte droite .c-timeline__day : (optionnel) sous-label ex "Premier contact" .c-timeline__title : h3 titre principal .c-timeline__situation : (optionnel) question / contexte .c-timeline__solution-box : (optionnel) encart solution .c-timeline__solution-label : "✓ Notre approche" .c-timeline__solution : texte solution */ .c-timeline { list-style: none; padding: 0; margin: var(--s10) 0 0; display: flex; flex-direction: column; gap: var(--s6); } .c-timeline__item { display: grid; grid-template-columns: 120px 1fr; gap: var(--s5); align-items: start; } .c-timeline__label { font-size: 1.5rem; font-weight: 900; letter-spacing: -.03em; color: var(--accent); padding-top: var(--s2); } .c-timeline__item--now .c-timeline__label { font-size: 1.15rem; font-style: italic; } .c-timeline__card { display: grid; grid-template-columns: 1fr; /* par défaut, texte seul plein largeur */ background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-fast), box-shadow var(--t-fast); } .c-timeline__card:has(.c-timeline__media) { grid-template-columns: 220px 1fr; /* si une image est présente, split 220px + reste */ } .c-timeline__card:hover { transform: translateY(-2px); box-shadow: var(--sh-md); } .c-timeline__media { align-self: stretch; display: flex; } .c-timeline__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .c-timeline__text { padding: var(--s5) var(--s6); } .c-timeline__day { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gs-texte-2); margin-bottom: var(--s2); } .c-timeline__title, .c-timeline__text h3 { font-size: 1.1rem; font-weight: 800; color: var(--gs-noir); letter-spacing: -.015em; margin: 0 0 var(--s2); } .c-timeline__text p { font-size: .92rem; line-height: 1.6; color: var(--gs-texte-2); margin: 0; } .c-timeline__situation { font-style: italic; font-size: .92rem; color: var(--gs-texte-2); margin: 0 0 var(--s3); } .c-timeline__solution-box { margin-top: var(--s3); padding: var(--s3) var(--s4); background: var(--accent-xpale); border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .c-timeline__solution-label { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; } .c-timeline__solution { font-size: .92rem; color: var(--gs-noir); line-height: 1.55; margin: 0; } /* Pastille "Un problème fréquent" — chip rouge au-dessus du titre */ .c-timeline__pain-label { display: inline-block; font-size: .68rem; font-weight: 700; color: #B91C1C; background: #FEE2E2; padding: 3px 9px; border-radius: var(--r-pill); margin-bottom: var(--s2); letter-spacing: .02em; } /* Variantes couleur du solution-box par module GS */ .c-timeline__solution-box--manager { background: var(--gs-violet-pale, #ECE3FF); border-left-color: var(--gs-violet); } .c-timeline__solution-box--manager .c-timeline__solution-label { color: var(--gs-violet); } .c-timeline__solution-box--cash { background: var(--gs-cash-pale, #FFF8E6); border-left-color: var(--gs-cash); } .c-timeline__solution-box--cash .c-timeline__solution-label { color: var(--gs-cash-fonce, #B87400); } .c-timeline__solution-box--access { background: var(--gs-access-pale, #E8FFF3); border-left-color: var(--gs-access); } .c-timeline__solution-box--access .c-timeline__solution-label { color: var(--gs-access-fonce, #0A7A3E); } .c-timeline__solution-box--vision { background: var(--gs-vision-pale, #E6F0FF); border-left-color: var(--gs-vision); } .c-timeline__solution-box--vision .c-timeline__solution-label { color: var(--gs-vision); } /* ── .c-cookie-banner ──────────────────────────────────────────────────────── Bandeau RGPD posé en bas de page. Translation Y depuis hors-écran. États : `.is-visible` (affiché). Pilotage JS dans includes/cookie-banner.php. */ .c-cookie-banner { position: fixed; bottom: var(--s5); left: 50%; transform: translateX(-50%) translateY(120%); width: min(720px, calc(100% - var(--s8))); background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s5) var(--s6); z-index: 9900; transition: transform .4s cubic-bezier(.34, 1.2, .64, 1); overflow: hidden; } .c-cookie-banner.is-visible { transform: translateX(-50%) translateY(0); } .c-cookie-banner__halo { position: absolute; inset: -40px; background: radial-gradient(circle at 20% 80%, rgba(109, 62, 244, .06) 0%, transparent 60%); pointer-events: none; } .c-cookie-banner__inner { position: relative; display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; } .c-cookie-banner__icon { font-size: 2rem; flex-shrink: 0; } .c-cookie-banner__text { flex: 1; min-width: 200px; } .c-cookie-banner__title { display: block; font-size: var(--txt-md); font-weight: 800; color: var(--gs-noir); margin-bottom: var(--s2); } .c-cookie-banner__premium { color: var(--accent); font-style: italic; } .c-cookie-banner__text p { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: var(--lh-normal); } .c-cookie-banner__minlinks { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); } .c-cookie-banner__minlink { font-size: var(--txt-xs); color: var(--gs-texte-3); text-decoration: underline; cursor: pointer; background: none; border: none; padding: 0; font: inherit; } .c-cookie-banner__minlink:hover { color: var(--accent); } .c-cookie-banner__minsep { color: var(--gs-texte-3); } .c-cookie-banner__cta { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; } /* Boutons spécifiques cookie banner (avant .c-btn était fait pour les CTA marketing — le cookie a besoin d'un style un peu plus compact / neutre) */ .c-cookie-banner__btn { display: inline-flex; align-items: center; gap: .5em; padding: .6em 1.4em; border-radius: var(--r-pill); font-size: var(--txt-sm); font-weight: 700; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); border: 1.5px solid transparent; white-space: nowrap; } .c-cookie-banner__btn--primary { background: var(--accent); color: var(--gs-blanc); border-color: var(--accent); } .c-cookie-banner__btn--primary:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); } .c-cookie-banner__btn--secondary { background: var(--gs-fond-2); color: var(--gs-noir); border-color: var(--gs-border); } .c-cookie-banner__btn--secondary:hover { border-color: var(--gs-noir); } .c-cookie-banner__btn--ghost { background: transparent; color: var(--gs-texte-2); border-color: var(--gs-border); } .c-cookie-banner__btn--ghost:hover { color: var(--gs-noir); border-color: var(--gs-texte-2); } .c-cookie-banner__btn--big { padding: .75em 1.65em; } /* ── .c-cookie-modal ───────────────────────────────────────────────────────── Modale de paramétrage RGPD. Backdrop + panneau qui anime depuis le bas. États : `.is-open`. Pilotage JS dans includes/cookie-banner.php. */ .c-cookie-modal { position: fixed; inset: 0; z-index: 9950; display: flex; align-items: center; justify-content: center; pointer-events: none; } .c-cookie-modal.is-open { pointer-events: auto; } .c-cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 22, .6); backdrop-filter: blur(4px); opacity: 0; transition: opacity var(--t-base); } .c-cookie-modal.is-open .c-cookie-modal__backdrop { opacity: 1; } .c-cookie-modal__panel { position: relative; width: min(560px, calc(100% - var(--s8))); background: var(--gs-blanc); border-radius: var(--r-lg); box-shadow: var(--sh-lg); overflow: hidden; transform: translateY(20px); opacity: 0; transition: transform var(--t-spring), opacity var(--t-base); } .c-cookie-modal.is-open .c-cookie-modal__panel { transform: translateY(0); opacity: 1; } .c-cookie-modal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--s5) var(--s6); border-bottom: 1px solid var(--gs-border); } .c-cookie-modal__header h2 { font-size: var(--txt-md); font-weight: 800; color: var(--gs-noir); } .c-cookie-modal__close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: none; border: 1px solid var(--gs-border); border-radius: var(--r-sm); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast); } .c-cookie-modal__close:hover { background: var(--gs-fond-2); border-color: var(--gs-texte-3); } .c-cookie-modal__body { padding: var(--s5) var(--s6); display: flex; flex-direction: column; gap: var(--s5); } .c-cookie-modal__intro { font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: var(--lh-loose); } .c-cookie-modal__row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); padding-bottom: var(--s5); border-bottom: 1px solid var(--gs-border); } .c-cookie-modal__row:last-child { border-bottom: 0; padding-bottom: 0; } .c-cookie-modal__row-text { flex: 1; } .c-cookie-modal__row-text strong { display: block; font-size: var(--txt-sm); font-weight: 700; color: var(--gs-noir); margin-bottom: var(--s2); } .c-cookie-modal__row-text p { font-size: var(--txt-xs); color: var(--gs-texte-2); line-height: var(--lh-loose); } .c-cookie-modal__row-toggle { flex-shrink: 0; padding-top: var(--s1); } .c-cookie-modal__lock { font-size: .7rem; font-weight: 700; color: var(--gs-access-fonce); background: var(--gs-access-pale); padding: .25em .75em; border-radius: var(--r-pill); white-space: nowrap; } /* Switch toggle custom (checkbox stylisée) */ .c-cookie-modal__switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; } .c-cookie-modal__switch input { position: absolute; width: 1px; height: 1px; opacity: 0; } .c-cookie-modal__slider { width: 40px; height: 22px; background: var(--gs-border); border-radius: var(--r-pill); position: relative; transition: background var(--t-fast); } .c-cookie-modal__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: var(--gs-blanc); border-radius: 50%; transition: transform var(--t-fast); box-shadow: var(--sh-xs); } .c-cookie-modal__switch input:checked + .c-cookie-modal__slider { background: var(--accent); } .c-cookie-modal__switch input:checked + .c-cookie-modal__slider::after { transform: translateX(18px); } .c-cookie-modal__footer { padding: var(--s4) var(--s6); border-top: 1px solid var(--gs-border); display: flex; flex-direction: column; align-items: center; gap: var(--s3); } .c-cookie-modal__footer-main { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; width: 100%; } .c-cookie-modal__refuse { font-size: var(--txt-xs); color: var(--gs-texte-3); text-decoration: underline; cursor: pointer; background: none; border: none; } .c-cookie-modal__refuse:hover { color: var(--gs-noir); } /* ── .c-footer ─────────────────────────────────────────────────────────────── Pied de page noir avec 4 colonnes (logo, parcours+modules, sports, entreprise) + bandeau bas avec liens légaux. */ .c-footer { background: var(--gs-noir); color: var(--gs-fond-2); padding-block: var(--s16) var(--s8); } .c-footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; /* desktop : 4 cols, logo colonne large (mobile = 1fr en §08) */ gap: var(--s10); margin-bottom: var(--s10); } .c-footer__logo { display: block; height: 42px; width: auto; margin-bottom: var(--s5); } .c-footer__desc { font-size: var(--txt-sm); line-height: var(--lh-loose); color: rgba(255, 255, 255, .55); max-width: 28rem; } .c-footer__tag { font-size: var(--txt-xs); color: rgba(255, 255, 255, .35); margin-top: var(--s5); } .c-footer__col h4 { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); margin-bottom: var(--s4); } .c-footer__col-title--spaced { margin-top: var(--s6); } .c-footer__col ul { display: flex; flex-direction: column; gap: var(--s2); } .c-footer__col a { font-size: var(--txt-sm); color: rgba(255, 255, 255, .6); text-decoration: none; transition: color var(--t-fast); } .c-footer__col a:hover { color: var(--gs-blanc); } .c-footer__bas { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: var(--s6); display: flex; flex-direction: column; gap: var(--s3); font-size: var(--txt-xs); color: rgba(255, 255, 255, .4); } .c-footer__bas-links { display: flex; gap: var(--s5); flex-wrap: wrap; } .c-footer__bas-links a { color: rgba(255, 255, 255, .4); font-size: var(--txt-xs); text-decoration: none; transition: color var(--t-fast); } .c-footer__bas-links a:hover { color: rgba(255, 255, 255, .7); } /* ── .c-nav ────────────────────────────────────────────────────────────────── Header de navigation fixé en haut, blur translucide, ombre au scroll. Contient le logo, les liens desktop (avec mega menu), le CTA contact, et le bouton hamburger pour le drawer mobile. États (gérés par JS) : .is-scrolled : ombre + border au scroll (modern) .scrolled : alias legacy (conservé pour script.js avant Phase 5) Sous-éléments mobile : préfixe `.c-nav__m-*` (drawer + tuiles + concepts). */ .c-nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; z-index: 1000; transition: border-color var(--t-base), box-shadow var(--t-base); } .c-nav.is-scrolled, .c-nav.scrolled { border-bottom-color: var(--gs-border); box-shadow: var(--sh-sm); } .c-nav .o-container { height: 100%; } .c-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--s6); } /* Logo */ .c-nav__logo { display: flex; align-items: center; flex-shrink: 0; } .c-nav__logo img { height: 38px; width: auto; display: block; } /* Liens desktop — affichés par défaut (= desktop). Masqués en mobile §08. */ .c-nav__links { display: flex; align-items: center; gap: var(--s2); } .c-nav__item > a { display: flex; align-items: center; gap: .3em; padding: .5em .75em; font-size: var(--txt-sm); font-weight: 600; color: var(--gs-noir); border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); } .c-nav__item > a:hover, .c-nav__item.is-active > a { background: var(--gs-fond-2); color: var(--accent); } .c-nav__item .chevron { width: 14px; height: 14px; transition: transform var(--t-fast); flex-shrink: 0; } .c-nav__item:hover .chevron { transform: rotate(180deg); } /* Actions nav (CTA + hamburger) */ .c-nav__actions { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; } #nav-cta-desktop { display: inline-flex; } /* visible en desktop, masqué en §08 */ /* ── Mega menu ── */ .c-nav__item--mega { position: static; } .c-nav__mega { position: fixed; top: var(--nav-height); left: 50%; width: 90vw; max-width: 90vw; background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: var(--s4) var(--s6) var(--s6); opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(8px); transition: opacity var(--t-base), transform var(--t-base); z-index: 1001; } .c-nav__item--mega:hover .c-nav__mega, .c-nav__item--mega:focus-within .c-nav__mega, .c-nav__item--mega.has-mega-open .c-nav__mega, .c-nav__item--mega.mega-open .c-nav__mega { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .c-nav__mega-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: var(--s6); } .c-nav__mega-col { display: flex; flex-direction: column; gap: var(--s2); } .c-nav__mega-label { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--gs-texte-3); padding: 0 var(--s3) var(--s2); } /* Cartes concept dans le mega menu */ .c-nav__concept-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); } .c-nav__concept { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1.5px solid var(--gs-border); border-radius: var(--r-md); background: var(--gs-fond-2); transition: border-color var(--t-fast), box-shadow var(--t-fast); text-decoration: none; } .c-nav__concept:hover { border-color: var(--accent); box-shadow: var(--sh-sm); } .c-nav__concept--premium:hover { border-color: var(--gs-violet); } .c-nav__concept--autonome:hover { border-color: var(--gs-access); } .c-nav__concept-tag { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .c-nav__concept--autonome .c-nav__concept-tag { color: var(--gs-access-fonce); } .c-nav__concept-title { font-size: .82rem; font-weight: 700; color: var(--gs-noir); line-height: 1.2; } .c-nav__concept-list { font-size: .74rem; color: var(--gs-texte-2); line-height: 1.6; } .c-nav__concept-cta { display: flex; align-items: center; gap: .3em; font-size: .74rem; font-weight: 700; color: var(--accent); margin-top: auto; } .c-nav__concept-cta svg { width: 12px; height: 12px; } /* Liens module */ .c-nav__mega-link { display: flex; align-items: flex-start; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); transition: background var(--t-fast); text-decoration: none; } .c-nav__mega-link:hover { background: var(--gs-fond-2); } .c-nav__mega-link svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--accent); } .c-nav__mega-link strong { display: block; font-size: .82rem; font-weight: 700; color: var(--gs-noir); line-height: 1.2; } .c-nav__mega-link em { display: block; font-style: normal; font-size: .72rem; color: var(--gs-texte-3); margin-top: 1px; } /* Sports mega menu */ .c-nav__mega-sports { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1); } .c-nav__mega-sports a { display: flex; align-items: center; gap: .4em; padding: .4em var(--s3); font-size: .78rem; font-weight: 600; color: var(--gs-texte-2); border-radius: var(--r-xs); transition: background var(--t-fast), color var(--t-fast); text-decoration: none; } .c-nav__mega-sports a:hover { background: var(--gs-fond-2); color: var(--gs-noir); } .c-nav__mega-sports a span { font-size: .85em; } /* ── Hamburger ── */ .c-nav__hamburger { display: none; /* masqué en desktop, affiché en §08 mobile */ flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 6px; background: none; border: 1.5px solid var(--gs-border); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--t-fast); } .c-nav__hamburger span { display: block; height: 2px; background: var(--gs-noir); border-radius: 2px; transition: transform var(--t-base), opacity var(--t-base); } .c-nav__hamburger:hover { border-color: var(--accent); } /* États ouvert : .is-open (moderne) + .open (legacy JS, conservé pour Phase 5) */ .c-nav__hamburger.is-open span:nth-child(1), .c-nav__hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .c-nav__hamburger.is-open span:nth-child(2), .c-nav__hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .c-nav__hamburger.is-open span:nth-child(3), .c-nav__hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Drawer mobile ── */ .c-nav__mobile { position: fixed; inset: 0; top: var(--nav-height); background: var(--gs-blanc); z-index: 999; overflow-y: auto; padding: var(--s6) var(--s5) var(--s10); display: flex; flex-direction: column; gap: var(--s3); transform: translateX(100%); transition: transform var(--t-slow); } .c-nav__mobile.is-open, .c-nav__mobile.open { transform: translateX(0); } .c-nav__mobile-section { display: block; font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gs-texte-3); margin-top: var(--s5); margin-bottom: var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--gs-border); } .c-nav__mobile-section:first-child { margin-top: 0; } /* Cartes concept dans le drawer mobile */ .c-nav__m-concepts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); margin-bottom: var(--s2); } .c-nav__m-concept { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s4); border: 1.5px solid var(--gs-border); border-radius: var(--r-md); background: var(--gs-fond-2); text-decoration: none; } .c-nav__m-concept-kicker { font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); } .c-nav__m-concept--autonome .c-nav__m-concept-kicker { color: var(--gs-access-fonce); } .c-nav__m-concept-title { font-size: .82rem; font-weight: 700; color: var(--gs-noir); line-height: 1.2; } .c-nav__m-concept-desc { font-size: .72rem; color: var(--gs-texte-2); line-height: 1.4; } /* Tuiles modules + sports mobile */ .c-nav__m-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s2); } /* Sports toujours 3 par ligne (texte court + emoji) */ .c-nav__m-grid--sports { grid-template-columns: repeat(3, 1fr); } .c-nav__m-tile { display: flex; flex-direction: column; align-items: center; gap: var(--s2); padding: var(--s4) var(--s3); border: 1px solid var(--gs-border); border-radius: var(--r-md); font-size: .78rem; font-weight: 600; color: var(--gs-noir); text-align: center; text-decoration: none; transition: background var(--t-fast), border-color var(--t-fast); } .c-nav__m-tile:hover { background: var(--gs-fond-2); border-color: var(--accent); } .c-nav__m-tile svg { width: 22px; height: 22px; color: var(--accent); } .c-nav__m-tile--sport { padding: var(--s3); font-size: .65rem; } .c-nav__m-emoji { font-size: 1.25rem; line-height: 1; } /* Liens simples dans le drawer */ .c-nav__m-link { display: block; padding: .75em var(--s3); font-size: var(--txt-base); font-weight: 600; color: var(--gs-noir); border-radius: var(--r-sm); text-decoration: none; transition: background var(--t-fast), color var(--t-fast); } .c-nav__m-link:hover { background: var(--gs-fond-2); color: var(--accent); } /* CTA dans le drawer mobile : pleine largeur */ .c-nav__mobile .c-btn { width: 100%; justify-content: center; margin-top: var(--s4); } /* ── .c-compare-table ─ Tableau comparatif 2 colonnes (concurrent vs accent) Pattern : critère | autres (gris désaturé) | nous (accent +marqué). Header sticky, rangées zébrées légères, mobile = scroll horizontal. */ .c-compare-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--gs-blanc); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); margin-top: var(--s8); } .c-compare-table th, .c-compare-table td { padding: var(--s4) var(--s5); text-align: left; font-size: var(--txt-sm); border-top: 1px solid var(--gs-border); } .c-compare-table thead th { background: var(--accent-pale); font-weight: 800; font-size: var(--txt-sm); letter-spacing: .04em; border-top: 0; } .c-compare-table thead th:last-child { color: var(--accent); } .c-compare-table td:first-child { font-weight: 700; color: var(--gs-noir); } .c-compare-table td:nth-child(2) { color: var(--gs-texte-3); } /* concurrents : gris */ .c-compare-table td:last-child { color: var(--gs-noir); } /* GS : noir net */ .c-compare-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); } .c-compare-table__scroll-wrap { overflow-x: auto; } /* ── .c-pain-bar ─ Bandeau strip top : highlight punchy au-dessus du contenu. Utilisé sur les pages produit (gs-manager, gs-cash, etc.) juste après le header global pour annoncer le sujet en 1 phrase forte. */ .c-pain-bar { background: var(--accent-pale); color: var(--gs-noir); text-align: center; padding: var(--s3) var(--s5); font-size: var(--txt-sm); font-weight: 600; border-bottom: 1px solid var(--accent-pale); } .c-pain-bar strong { font-weight: 800; color: var(--accent); } /* ── .c-hero--split ─ Variant du hero en 2 colonnes (texte gauche + image droite). Conserve la sémantique .c-hero mais override le centrage. */ .c-hero--split .o-container { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s12); align-items: center; text-align: left; } .c-hero--split .c-hero__title, .c-hero--split .c-hero__sub { text-align: left; max-width: none; } /* Pages sport : H1 plus mesuré (le titre "Logiciel club de … + application mobile" était démesuré). Wrappe naturellement, sans
forcé. */ body[class*="p-sport-"] .c-hero__title { font-size: clamp(1.6rem, 4.4vw, 2.6rem); } .c-hero--split .c-hero__ctas { justify-content: flex-start; } .c-hero--split .c-hero__stats { justify-content: flex-start; margin-top: var(--s4); } .c-hero__pill { display: inline-flex; /* 2 colonnes : logo | texte. Le texte (dans .c-hero__pill-text) wrappe seul, le logo reste dans sa colonne, centré verticalement. */ align-items: center; gap: var(--s2); background: linear-gradient(90deg, rgba(10,122,62,.08) 0%, rgba(109,62,244,.08) 100%); border: 1px solid rgba(109,62,244,.18); border-radius: var(--r-pill); padding: var(--s2) var(--s4); font-size: var(--txt-sm); font-weight: 600; line-height: 1.5; color: var(--gs-noir); margin-bottom: var(--s5); } .c-hero__pill img { flex-shrink: 0; /* le logo garde sa taille, colonne dédiée */ } .c-hero__pill-text { min-width: 0; /* permet au texte de wrapper proprement dans sa colonne */ } .c-hero__pill a { font-weight: 800; text-decoration: none; transition: opacity var(--t-fast); } .c-hero__pill a[href="/club-premium"] { color: var(--gs-violet); } .c-hero__pill a[href="/club-autonome"] { color: var(--gs-access); } .c-hero__pill a:hover { opacity: .7; } .c-hero--split .c-hero__visual { position: relative; } .c-hero--split .c-hero__visual img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--sh-lg); display: block; } .c-hero__trust-line { margin-top: var(--s4); font-size: var(--txt-xs); color: var(--gs-texte-3); } /* ── .c-lp-nav ─ Mini header sticky pour landings isolées ─────────────────── Pattern conversion-focus : pas de menu, pas de chemin de fuite — juste le logo à gauche et un seul bouton CTA à droite (ouvre le modal Brevo). */ .c-lp-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s4) var(--s8); background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--accent-pale); transition: box-shadow var(--t-base); } .c-lp-nav.is-scrolled { box-shadow: var(--sh-sm); } .c-lp-nav__logo img { height: 44px; width: auto; display: block; } /* ══════════════════════════════════════════════════════════════════════════ .c-transformation-scroll — Pinned scrollytelling Avant/Après (LP) Pattern Apple/Linear : 1 card pinned plein écran, scroll = flip Avant→Après, continue scroll = card suivante prend sa place. Bidirectionnel. Variantes couleur : --premium (violet) / --autonome (vert). ══════════════════════════════════════════════════════════════════════════ */ .c-transformation-scroll { --tr-accent: var(--accent); --tr-accent-pale: var(--accent-pale); margin-top: var(--s10); } .c-transformation-scroll--premium { --tr-accent: var(--gs-violet); --tr-accent-pale: var(--gs-violet-pale); } .c-transformation-scroll--autonome { --tr-accent: var(--gs-access); --tr-accent-pale: var(--gs-access-pale); } /* Chaque slot = 1 viewport de scroll. La card inside est sticky en haut du viewport (sous le nav). Pendant que le slot scroll, la card reste pinned et flip Avant→Après via l'IntersectionObserver (classe .is-after). */ .c-transformation-scroll__slot { height: 100vh; position: relative; } .c-transformation-scroll__card { position: sticky; top: calc(var(--nav-height) + var(--s4)); height: calc(100vh - var(--nav-height) - var(--s8)); max-height: 640px; background: var(--gs-blanc); border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; display: grid; grid-template-rows: 1fr auto; transition: box-shadow var(--t-base); } .c-transformation-scroll__card.is-after { box-shadow: 0 24px 64px -16px var(--tr-accent-pale), 0 0 0 1.5px var(--tr-accent-pale); } /* Inner = la zone qui contient les 2 faces superposées (crossfade) */ .c-transformation-scroll__inner { position: relative; display: grid; grid-template-areas: "face"; overflow: hidden; } .c-transformation-scroll__face { grid-area: face; padding: var(--s10) var(--s12); display: flex; flex-direction: column; justify-content: center; gap: var(--s5); transition: opacity .6s var(--ease-out-strong), transform .6s var(--ease-out-strong); } .c-transformation-scroll__face--avant { background: #F8F8F9; opacity: 1; transform: scale(1); } .c-transformation-scroll__face--apres { background: var(--tr-accent-pale); opacity: 0; transform: scale(.96); pointer-events: none; } .c-transformation-scroll__card.is-after .c-transformation-scroll__face--avant { opacity: 0; transform: scale(1.04); pointer-events: none; } .c-transformation-scroll__card.is-after .c-transformation-scroll__face--apres { opacity: 1; transform: scale(1); pointer-events: auto; } .c-transformation-scroll__chip { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: var(--s2) var(--s4); border-radius: var(--r-pill); align-self: flex-start; } .c-transformation-scroll__chip--avant { background: var(--gs-noir); color: var(--gs-blanc); } .c-transformation-scroll__chip--apres { background: var(--tr-accent); color: var(--gs-blanc); } .c-transformation-scroll__ico { font-size: 4rem; line-height: 1; } .c-transformation-scroll__title { font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: var(--gs-noir); margin: 0; max-width: 22ch; } .c-transformation-scroll__desc { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0; max-width: 50ch; } /* Progress bar en bas de card = indicateur "où on en est" */ .c-transformation-scroll__progress { height: 4px; background: var(--gs-ivoire-fonce, #EFEFEC); position: relative; overflow: hidden; } .c-transformation-scroll__progress::after { content: ""; position: absolute; inset: 0 100% 0 0; background: var(--tr-accent); transition: inset .6s var(--ease-out-strong); } .c-transformation-scroll__card.is-after .c-transformation-scroll__progress::after { inset: 0; } /* ── .c-transformation ─ Grid statique side-by-side Avant/Après (LP) ──────── Chaque card divisée verticalement : Avant à gauche (gris), Après à droite (accent). Compare instantané sans interaction. Mobile : empilement vertical. Variantes couleur : --premium (violet) / --autonome (vert). */ /* Force [hidden] HTML attribute à hider même quand display: grid/flex/etc. Sinon le `display: ...` du composant override [hidden] (spécificité égale). */ .c-problem-quiz[hidden], .c-problem-result[hidden], .c-problem-popup[hidden], .c-transformation__card[hidden], .c-solution-card[hidden] { display: none !important; } /* ── .c-problem-popup ─ Overlay centré avec card solution + close button. Backdrop sombre + blur. Click hors panel = close. Escape = close. Pattern modal léger (différent de .c-modal qui est dédié à l'iframe Brevo). */ .c-problem-popup { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--s5); background: rgba(15, 17, 22, .7); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: c-problem-popup-fade-in .3s var(--ease-out-strong); overflow-y: auto; } .c-problem-popup__panel { position: relative; max-width: 720px; width: 100%; margin: auto; animation: c-problem-popup-scale-in .4s var(--ease-out-strong); } .c-problem-popup__close { position: absolute; top: -56px; right: 0; background: var(--gs-blanc); border: 0; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--sh-md); color: var(--gs-noir); transition: transform var(--t-base); } .c-problem-popup__close:hover { transform: scale(1.08) rotate(90deg); } .c-problem-popup__close:active { transform: scale(.95); transition-duration: 80ms; } .c-problem-popup__close:focus-visible { outline: 3px solid var(--gs-blanc); outline-offset: 3px; } .c-problem-popup__close svg { width: 18px; height: 18px; } @keyframes c-problem-popup-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes c-problem-popup-scale-in { from { opacity: 0; transform: scale(.96) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } /* Body lock quand popup open */ body.is-popup-open { overflow: hidden; } /* ── .c-problem-quiz ─ Grille de boutons "Quel problème rencontrez-vous ?" Au click sur un choix, on affiche la card Avant/Après correspondante. Pattern interactif inspiré du quiz contact. */ .c-problem-quiz { --tr-accent: var(--accent); --tr-accent-pale: var(--accent-pale); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); margin-top: var(--s8); } .c-problem-quiz--premium { --tr-accent: var(--gs-violet); --tr-accent-pale: var(--gs-violet-pale); } .c-problem-quiz--autonome { --tr-accent: var(--gs-access); --tr-accent-pale: var(--gs-access-pale); } .c-problem-quiz__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); text-align: left; background: var(--gs-blanc); border: 1.5px solid var(--gs-border, #E5E5E8); border-radius: var(--r-lg); padding: var(--s5); cursor: pointer; font-family: inherit; transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); } .c-problem-quiz__item:hover { border-color: var(--tr-accent); transform: translateY(-3px); box-shadow: 0 12px 24px -8px var(--tr-accent-pale); } .c-problem-quiz__item:active { transform: translateY(-1px) scale(.98); transition-duration: 80ms; } .c-problem-quiz__item:focus-visible { outline: 3px solid var(--tr-accent); outline-offset: 3px; } .c-problem-quiz__ico { font-size: 2.2rem; line-height: 1; } .c-problem-quiz__title { font-size: .95rem; font-weight: 700; color: var(--gs-noir); line-height: 1.35; margin: 0; } .c-problem-quiz__arrow { margin-top: auto; font-size: .8rem; font-weight: 700; color: var(--tr-accent); display: inline-flex; align-items: center; gap: var(--s2); letter-spacing: .04em; } .c-problem-quiz__arrow svg { width: 14px; height: 14px; transition: transform var(--t-base); } .c-problem-quiz__item:hover .c-problem-quiz__arrow svg { transform: translateX(4px); } /* ── .c-problem-result ─ Zone résultat avec card Avant/Après + bouton retour */ .c-problem-result { --tr-accent: var(--accent); --tr-accent-pale: var(--accent-pale); margin-top: var(--s8); animation: c-problem-result-in .5s var(--ease-out-strong); } .c-problem-result--premium { --tr-accent: var(--gs-violet); --tr-accent-pale: var(--gs-violet-pale); } .c-problem-result--autonome { --tr-accent: var(--gs-access); --tr-accent-pale: var(--gs-access-pale); } @keyframes c-problem-result-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .c-problem-result__back { display: inline-flex; align-items: center; gap: var(--s2); background: transparent; border: 1.5px solid var(--gs-border, #E5E5E8); border-radius: var(--r-pill); padding: var(--s2) var(--s5); font-family: inherit; font-size: .85rem; font-weight: 700; color: var(--gs-noir); cursor: pointer; margin-bottom: var(--s6); transition: border-color var(--t-base), background var(--t-base); } .c-problem-result__back:hover { border-color: var(--tr-accent); background: var(--tr-accent-pale); } .c-problem-result__back:active { transform: scale(.97); transition-duration: 80ms; } .c-problem-result__back:focus-visible { outline: 3px solid var(--tr-accent); outline-offset: 3px; } .c-problem-result__back svg { width: 14px; height: 14px; transition: transform var(--t-base); } .c-problem-result__back:hover svg { transform: translateX(-3px); } /* ── .c-solution-card ─ Card résultat élégante + positive (Après seule) ───── Plein largeur. Layout 2 cols : icône XL dans cercle blanc à gauche, chip + titre + desc + CTA à droite. Fond gradient accent-pale. Variantes : --premium (violet) / --autonome (vert). */ .c-solution-card { --tr-accent: var(--accent); --tr-accent-pale: var(--accent-pale); display: flex; padding: var(--s12) var(--s10); border-radius: var(--r-xl); background: var(--tr-accent-pale); box-shadow: 0 24px 64px -16px rgba(0,0,0,.12); position: relative; overflow: hidden; } .c-solution-card--premium { --tr-accent: var(--gs-violet); --tr-accent-pale: var(--gs-violet-pale); } .c-solution-card--autonome { --tr-accent: var(--gs-access); --tr-accent-pale: var(--gs-access-pale); } /* Icône XL dans cercle blanc — effet "spotlight positif" */ .c-solution-card__visual { width: 140px; height: 140px; background: var(--gs-blanc); border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 4.5rem; box-shadow: 0 12px 32px -8px var(--tr-accent-pale), inset 0 0 0 1.5px var(--tr-accent-pale); flex-shrink: 0; line-height: 1; } .c-solution-card__body { display: flex; flex-direction: column; gap: var(--s4); width: 100%; } .c-solution-card__chip { display: inline-flex; align-items: center; gap: var(--s2); background: var(--tr-accent); color: var(--gs-blanc); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: var(--s2) var(--s4); border-radius: var(--r-pill); align-self: flex-start; } .c-solution-card__chip svg { width: 14px; height: 14px; } .c-solution-card__title { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; letter-spacing: -.02em; line-height: 1.15; color: var(--gs-noir); margin: 0; max-width: 28ch; } .c-solution-card__desc { font-size: clamp(.98rem, 1.5vw, 1.1rem); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0; max-width: 56ch; } .c-transformation { --tr-accent: var(--accent); --tr-accent-pale: var(--accent-pale); display: grid; grid-template-columns: 1fr; gap: var(--s8); margin-top: var(--s4); } .c-transformation--premium { --tr-accent: var(--gs-violet); --tr-accent-pale: var(--gs-violet-pale); } .c-transformation--autonome { --tr-accent: var(--gs-access); --tr-accent-pale: var(--gs-access-pale); } /* Card side-by-side : Avant à gauche (mort, gris), Après à droite (vivant, accent). Flèche centrale "GS" entre les 2 = la transformation. */ .c-transformation__card { position: relative; border-radius: var(--r-xl); box-shadow: var(--sh-md); overflow: hidden; display: grid; grid-template-columns: 1fr auto 1fr; min-height: 220px; transition: box-shadow var(--t-base), transform var(--t-base); } .c-transformation__card:hover { box-shadow: 0 12px 32px -8px rgba(124, 58, 237, .25), 0 0 0 1.5px var(--tr-accent-pale); transform: translateY(-3px); } .c-transformation__face { padding: var(--s6) var(--s5); display: flex; flex-direction: column; gap: var(--s3); } .c-transformation__face--avant { background: #E5E5E8; color: #6B7280; } .c-transformation__face--avant .c-transformation__chip--avant { background: #4B5563; } .c-transformation__face--avant .c-transformation__title { color: #6B7280; font-weight: 700; text-decoration: line-through; text-decoration-color: rgba(107, 114, 128, .5); text-decoration-thickness: 2px; } .c-transformation__face--avant .c-transformation__desc { color: #6B7280; opacity: .8; } .c-transformation__face--avant .c-transformation__ico { filter: grayscale(1) opacity(.4); } .c-transformation__face--apres { background: var(--tr-accent-pale); color: var(--gs-noir); position: relative; } .c-transformation__face--apres .c-transformation__title { color: var(--gs-noir); font-weight: 800; } .c-transformation__face--apres .c-transformation__ico { filter: drop-shadow(0 2px 8px rgba(0,0,0,.08)); } /* Connector central — flèche + badge "GS" */ .c-transformation__connector { display: flex; align-items: center; justify-content: center; background: var(--gs-noir); padding: 0 var(--s4); position: relative; color: var(--gs-blanc); } .c-transformation__connector::before, .c-transformation__connector::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; } /* triangle pointe vers Avant (gauche) — symbolise "tu pars de là" */ .c-transformation__connector::before { left: -8px; top: 50%; transform: translateY(-50%); border-width: 10px 8px 10px 0; border-color: transparent var(--gs-noir) transparent transparent; } /* triangle pointe vers Après (droite) — symbolise "tu arrives là" */ .c-transformation__connector::after { right: -8px; top: 50%; transform: translateY(-50%); border-width: 10px 0 10px 8px; border-color: transparent transparent transparent var(--gs-noir); } .c-transformation__connector-label { font-size: .65rem; font-weight: 900; letter-spacing: .14em; writing-mode: vertical-rl; transform: rotate(180deg); color: var(--tr-accent); text-transform: uppercase; white-space: nowrap; } .c-transformation__chip { display: inline-block; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: var(--s1) var(--s3); border-radius: var(--r-pill); align-self: flex-start; } .c-transformation__chip--avant { background: var(--gs-noir); color: var(--gs-blanc); } .c-transformation__chip--apres { background: var(--tr-accent); color: var(--gs-blanc); } .c-transformation__ico { font-size: 2rem; line-height: 1; } .c-transformation__title { font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--gs-noir); margin: 0; } .c-transformation__desc { font-size: var(--txt-sm); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0; } /* (Indicator + more button retirés — pattern v3 utilise scroll-pinned + grid statique) */ /* ── .c-lp-footer ─ Mini footer marque pour landings isolées ──────────────── */ .c-lp-footer { background: var(--gs-noir); color: var(--gs-blanc); padding: var(--s10) var(--s4); text-align: center; font-size: var(--txt-sm); letter-spacing: .04em; } .c-lp-footer__brand { font-weight: 700; color: var(--gs-blanc); } /* ── .c-product-split ─ Section produit en 2 colonnes (LP) ───────────────── Pattern conversion : photo grande + 4 badges chiffrés flottants à gauche, eyebrow coloré + h2 + lead + liste de bénéfices à droite (ou inversé). La couleur d'accent du module se pilote via --module-color (settable par le modificateur .c-product-split--manager/cash/access/vision). */ .c-product-split { --module-color: var(--accent); --module-color-pale: var(--accent-pale); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s12); align-items: start; } .c-product-split--manager { --module-color: var(--gs-violet); --module-color-pale: var(--gs-violet-pale); } .c-product-split--cash { --module-color: #FABF48; --module-color-pale: #FEF3DA; } .c-product-split--access { --module-color: var(--gs-access); --module-color-pale: var(--gs-access-pale); } .c-product-split--vision { --module-color: #4895FA; --module-color-pale: #E1EEFF; } .c-product-split--reverse .c-product-split__visual { order: 2; } .c-product-split--reverse .c-product-split__body { order: 1; } /* Visuel : photo principale + badges flottants Sticky en desktop : la photo reste fixée pendant que le texte scrolle. */ .c-product-split__visual { position: sticky; top: calc(var(--nav-height) + var(--s5)); border-radius: var(--r-xl); overflow: visible; } .c-product-split__photo { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--sh-lg); display: block; transition: transform var(--t-base); } .c-product-split__visual:hover .c-product-split__photo { transform: scale(1.015); } .c-product-split__logo-badge { position: absolute; top: var(--s5); left: var(--s5); height: 48px; width: auto; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: var(--s2) var(--s4); border-radius: var(--r-md); box-shadow: var(--sh-sm); z-index: 2; } /* Badges chiffrés flottants — grille 2×2 superposée à la photo */ .c-product-split__badges { position: absolute; inset: 0; pointer-events: none; } .c-product-split__badge { position: absolute; background: var(--gs-blanc); border-radius: var(--r-md); padding: var(--s3) var(--s4); box-shadow: var(--sh-md); border: 1.5px solid var(--module-color-pale); display: flex; flex-direction: column; gap: 2px; min-width: 7rem; pointer-events: auto; } .c-product-split__badge:nth-child(1) { top: -10px; left: -16px; } .c-product-split__badge:nth-child(2) { top: 25%; right: -22px; } .c-product-split__badge:nth-child(3) { bottom: 25%; left: -22px; } .c-product-split__badge:nth-child(4) { bottom: -10px; right: -16px; } .c-product-split__badge-val { font-size: 1.25rem; font-weight: 900; color: var(--module-color); line-height: 1; letter-spacing: -.02em; } .c-product-split__badge-lbl { font-size: .7rem; font-weight: 600; color: var(--gs-texte-2); line-height: 1.2; } /* Body : eyebrow chip + h2 + lead + checks */ .c-product-split__eyebrow { display: inline-flex; align-items: center; gap: var(--s2); background: var(--module-color-pale); color: var(--module-color); padding: var(--s2) var(--s4); border-radius: var(--r-pill); font-size: .82rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: var(--s5); border: 1.5px solid var(--module-color); } .c-product-split__title { font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; color: var(--gs-noir); margin: 0 0 var(--s5); } .c-product-split__title em { font-style: italic; color: var(--module-color); } .c-product-split__lead { font-size: var(--txt-base); line-height: var(--lh-loose); color: var(--gs-texte-2); margin: 0 0 var(--s8); } .c-product-split__checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s5); } .c-product-split__check { position: relative; padding-left: calc(var(--s8) + var(--s1)); } .c-product-split__check::before { content: ""; position: absolute; left: 0; top: .1em; width: var(--s6); height: var(--s6); border-radius: 999px; background: var(--module-color-pale); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: 60% 60%; } .c-product-split__check b { display: block; font-size: var(--txt-base); font-weight: 800; color: var(--gs-noir); margin-bottom: var(--s1); line-height: 1.3; } .c-product-split__check p { margin: 0; font-size: var(--txt-sm); color: var(--gs-texte-2); line-height: var(--lh-loose); } /* ── .c-reason-card ─ Carte "raison" cliquable pour LP (grid 3×2) ─────────── */ .c-reason-card { display: flex; flex-direction: column; background: var(--gs-blanc); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-sm); transition: transform var(--t-base), box-shadow var(--t-base); position: relative; } .c-reason-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); } .c-reason-card:active { transform: translateY(-2px) scale(.98); transition-duration: 80ms; } .c-reason-card__photo { width: 100%; height: 180px; overflow: hidden; } .c-reason-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .c-reason-card__body { padding: var(--s6) var(--s6) var(--s4); flex: 1; display: flex; flex-direction: column; gap: var(--s3); } .c-reason-card__title { font-size: 1.1rem; font-weight: 800; color: var(--gs-noir); line-height: 1.25; margin: 0; } .c-reason-card__bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s2); font-size: var(--txt-sm); color: var(--gs-texte-2); } .c-reason-card__bullets li { position: relative; padding-left: 1.2em; } .c-reason-card__bullets li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; } .c-reason-card__cta { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s6); background: var(--gs-ivoire); color: var(--gs-noir); text-decoration: none; font-weight: 700; font-size: var(--txt-sm); border: 0; width: 100%; cursor: pointer; transition: background var(--t-fast); } .c-reason-card__cta:hover { background: var(--accent-pale); color: var(--accent); } .c-reason-card__cta::after { content: ""; position: absolute; inset: 0; } /* ╔═══════════════════════════════════════════════════════════════════════════ ║ 06. PAGES — surcharge de --accent pour une page spécifique ║ ║ Par défaut, --accent est défini en :root (violet) et toutes les pages ║ héritent de cette valeur. AUCUNE classe .p-* n'est nécessaire pour les ║ pages qui utilisent le violet. ║ ║ Une classe .p-* n'est créée ici que quand une page veut un accent ║ DIFFÉRENT du violet par défaut. Exemple — page "sport vert" : ║ ║ .p-sport-vert { ║ --accent: var(--gs-access); ║ --accent-fonce: var(--gs-access-fonce); ║ --accent-pale: var(--gs-access-pale); ║ --accent-xpale: #F0FDF4; ║ } ║ ║ Pour l'instant, toutes les pages sont en violet, donc ce bloc est vide. ╚═══════════════════════════════════════════════════════════════════════════ */ /* LP autonome — accent vert (GS Access) au lieu du violet par défaut. Impact : .c-btn, .c-hero__stat-val, eyebrows, focus-visible, accents généraux. */ .p-landing--autonome { --accent: var(--gs-access); --accent-fonce: var(--gs-access-fonce); --accent-pale: var(--gs-access-pale); --sh-violet: 0 12px 32px -8px var(--gs-access-pale); } /* Page module GS Cash — accent jaune (gs-cash). */ .p-gs-cash { --accent: #FABF48; --accent-fonce: #B8862E; --accent-pale: #FFE9B8; --sh-violet: 0 12px 32px -8px #FFE9B8; } /* Page module GS Access — accent vert (gs-access). */ .p-gs-access { --accent: var(--gs-access); --accent-fonce: var(--gs-access-fonce); --accent-pale: var(--gs-access-pale); --sh-violet: 0 12px 32px -8px var(--gs-access-pale); } /* Page module GS Vision — accent bleu (gs-vision). */ .p-gs-vision { --accent: #4895FA; --accent-fonce: #2A6FD0; --accent-pale: #C5DDFE; --sh-violet: 0 12px 32px -8px #C5DDFE; } /* ╔═══════════════════════════════════════════════════════════════════════════ ║ 07. UTILITIES — classes mono-rôle .u-* ║ ║ Petites classes qui font UNE seule chose, en !important pour pouvoir ║ surcharger n'importe quel composant. À utiliser avec parcimonie : si tu ║ te retrouves à empiler beaucoup d'utilities, c'est probablement signe ║ qu'il faut un nouveau composant ou modifier un existant. ╚═══════════════════════════════════════════════════════════════════════════ */ /* — Alignement texte — */ .u-text-center { text-align: center !important; } .u-text-left { text-align: left !important; } .u-text-right { text-align: right !important; } /* — Couleur texte — */ .u-text-accent { color: var(--accent) !important; } .u-text-noir { color: var(--gs-noir) !important; } .u-text-mute { color: var(--gs-texte-2) !important; } /* — Style du texte — */ .u-not-italic { font-style: normal !important; } /* — Accessibilité / sécurité — */ /* Champ honeypot anti-bot : invisible humain + non-tabulable. Les bots remplissent tout, on filtre côté serveur. Utilisé dans blog-newsletter.php (form). */ .u-honeypot { position: absolute !important; left: -9999px !important; top: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } /* — Marges (à étendre selon besoin) — */ .u-mt-0 { margin-top: 0 !important; } .u-mt-8 { margin-top: var(--s8) !important; } .u-mt-16 { margin-top: var(--s16) !important; } .u-justify-center { justify-content: center !important; } .is-hidden { display: none !important; } .u-mb-0 { margin-bottom: 0 !important; } /* — Visibilité — */ .u-hidden { display: none !important; } /* — Accessibilité screen reader (visuellement caché, mais lu par les lecteurs d'écran). Conserve les alias legacy .sr-only / .visually-hidden pour compatibilité avec les pages non encore migrées. — */ .u-sr-only, .sr-only, .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ═══════════════════════════════════════════════════════════════════════════ .c-ecosystem-spotlight — Laptop central + 6 benefit pills flottants Utilisé sur /pour-qui/logiciel-club-* (SPRINT 2) Layout : 3 colonnes desktop (pills G / laptop / pills D), 1 col mobile. ═══════════════════════════════════════════════════════════════════════════ */ .c-ecosystem-spotlight { padding-block: var(--section-pad); overflow: hidden; /* contient les reflets/glow qui dépassent */ } .c-ecosystem-spotlight__stage { display: grid; grid-template-columns: 1fr minmax(680px, 2fr) 1fr; gap: var(--s6); align-items: center; margin-top: var(--s12); perspective: 1800px; /* SCÈNE 3D pour les 3 devices */ perspective-origin: 50% 35%; } /* ─────────────────────────────────────────────────────────────────────────── CENTRAL DEVICES BAY : MacBook + iMac + iPad côte à côte, scène 3D unique. L'iMac domine au centre, les latéraux sont plus petits et tiltés vers lui. ─────────────────────────────────────────────────────────────────────────── */ .c-ecosystem-spotlight__devices { position: relative; display: flex; align-items: flex-end; /* pieds alignés en bas */ justify-content: center; gap: var(--s4); transform-style: preserve-3d; } .c-ecosystem-spotlight__col { display: flex; flex-direction: column; gap: var(--s6); } .c-ecosystem-spotlight__col--right { text-align: right; } .c-ecosystem-spotlight__laptop { position: relative; display: flex; justify-content: center; } .c-ecosystem-spotlight__laptop-glow { position: absolute; inset: -10% -5%; background: radial-gradient(closest-side, rgba(109, 62, 244, .22), transparent 70%); filter: blur(40px); z-index: 0; pointer-events: none; } /* Benefit pill — carte 1 bénéfice flottante autour du laptop */ .c-benefit-pill { background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: 0 4px 16px rgba(15, 17, 22, .04); transition: transform var(--t-base), box-shadow var(--t-base); } .c-benefit-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 17, 22, .08); } .c-benefit-pill__title { font-size: .95rem; font-weight: 800; color: var(--gs-noir); margin: 0 0 var(--s2); letter-spacing: -.01em; line-height: var(--lh-tight); } .c-benefit-pill__desc { font-size: .85rem; color: var(--gs-texte-2); line-height: var(--lh-loose); margin: 0; } /* ═══════════════════════════════════════════════════════════════════════════ .c-laptop-mockup — Coque MacBook stylisée (cadre + base + notch) Reçoit en enfant .c-dashboard pour le rendu écran. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ .c-imac-mockup — Écran central iMac 24" alu (la star, dashboard live) ═══════════════════════════════════════════════════════════════════════════ */ .c-imac-mockup { position: relative; flex: 1.6; max-width: 460px; min-width: 320px; z-index: 2; /* devant les latéraux */ transform-style: preserve-3d; will-change: transform; } .c-imac-mockup .c-laptop-mockup__screen { /* on réutilise le screen styling */ position: relative; aspect-ratio: 16 / 10; background: var(--gs-noir); border-radius: 14px; padding: 14px; border: 8px solid #c8ccd0; /* bordure alu iMac */ box-shadow: 0 32px 80px rgba(15, 17, 22, .32), 0 0 0 1px rgba(0, 0, 0, .4), inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; } .c-imac-mockup__stand { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; margin-top: -2px; } .c-imac-mockup__neck { width: 14%; height: 22px; background: linear-gradient(180deg, #b8bcc0 0%, #9ca0a4 100%); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); } .c-imac-mockup__foot { width: 38%; height: 8px; background: linear-gradient(180deg, #a8acb0 0%, #888c90 100%); border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(15, 17, 22, .15); } /* Reflet glass qui balaie l'écran iMac en boucle (animé par GSAP) */ .c-laptop-mockup__shine { position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .08) 40%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .08) 60%, transparent 100%); pointer-events: none; z-index: 3; transform: skewX(-15deg); will-change: transform; } /* ═══════════════════════════════════════════════════════════════════════════ .c-macbook-mockup — Laptop latéral GAUCHE, plus petit, tilté vers l'iMac ═══════════════════════════════════════════════════════════════════════════ */ .c-macbook-mockup { position: relative; flex: 1; max-width: 240px; min-width: 160px; z-index: 1; transform-style: preserve-3d; will-change: transform; transform: rotateY(22deg) translateZ(-40px) scale(.92); transform-origin: right center; } .c-macbook-mockup__screen { position: relative; aspect-ratio: 16 / 10; background: var(--gs-noir); border-radius: 8px 8px 2px 2px; padding: 8px; box-shadow: 0 18px 40px rgba(15, 17, 22, .25), 0 0 0 2px var(--gs-noir), inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; } .c-macbook-mockup__shine { position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .06) 60%, transparent 100%); pointer-events: none; z-index: 3; transform: skewX(-15deg); } .c-macbook-mockup__base { position: relative; height: 10px; background: linear-gradient(180deg, #2a2d33 0%, #15171b 100%); border-radius: 0 0 12px 12px; margin: 0 -3%; box-shadow: 0 6px 16px rgba(15, 17, 22, .2); } .c-macbook-mockup__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14%; height: 3px; background: #0a0c0f; border-radius: 0 0 4px 4px; } /* MacBook : contenu "vue planning calendrier" mini */ .c-macbook-app { background: #fafbfc; border-radius: 4px; padding: 6px 8px; height: 100%; display: flex; flex-direction: column; gap: 5px; font-size: 8px; line-height: 1.3; color: var(--gs-noir); overflow: hidden; } .c-macbook-app__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 4px; border-bottom: 1px solid #e9eaed; } .c-macbook-app__brand { font-weight: 800; } .c-macbook-app__sub { font-weight: 500; color: var(--gs-texte-3); } .c-macbook-app__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; flex: 1; } .c-macbook-app__col { display: flex; flex-direction: column; gap: 2px; align-items: center; font-size: 7px; font-weight: 700; color: var(--gs-texte-3); } .c-macbook-app__col > span:first-child { margin-bottom: 2px; text-transform: uppercase; } .c-macbook-app__slot { width: 100%; flex: 1; min-height: 7px; background: #e9eaed; border-radius: 2px; } .c-macbook-app__slot.is-booked { background: rgba(109, 62, 244, .35); } .c-macbook-app__slot.is-live { background: var(--gs-violet); box-shadow: 0 0 0 2px rgba(109, 62, 244, .25); animation: c-dashboard-pulse 1.8s infinite; } .c-macbook-app__stat { display: flex; justify-content: space-between; font-size: 8px; padding-top: 4px; border-top: 1px solid #e9eaed; } .c-macbook-app__stat strong { color: var(--gs-violet); font-weight: 900; } /* ═══════════════════════════════════════════════════════════════════════════ .c-ipad-mockup — Tablette latérale DROITE, portrait, tiltée vers l'iMac ═══════════════════════════════════════════════════════════════════════════ */ .c-ipad-mockup { position: relative; flex: .9; max-width: 170px; min-width: 130px; align-self: center; z-index: 1; transform-style: preserve-3d; will-change: transform; transform: rotateY(-22deg) translateZ(-40px) scale(.95); transform-origin: left center; } .c-ipad-mockup__screen { position: relative; aspect-ratio: 3 / 4; /* portrait tablette */ background: var(--gs-noir); border-radius: 14px; padding: 10px 8px; border: 4px solid #1a1c20; box-shadow: 0 18px 40px rgba(15, 17, 22, .28), inset 0 0 0 1px rgba(255, 255, 255, .06); overflow: hidden; } .c-ipad-mockup__shine { position: absolute; top: 0; bottom: 0; left: -50%; width: 50%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .06) 40%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, .06) 60%, transparent 100%); pointer-events: none; z-index: 3; transform: skewX(-15deg); } /* iPad : contenu "app joueur" mini */ .c-ipad-app { background: linear-gradient(180deg, #fafbfc 0%, #ffffff 100%); border-radius: 8px; height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 6px; font-size: 8px; line-height: 1.3; color: var(--gs-noir); overflow: hidden; } .c-ipad-app__statusbar { display: flex; justify-content: space-between; font-size: 6px; font-weight: 700; color: var(--gs-texte-3); padding: 0 2px; } .c-ipad-app__brand { display: flex; align-items: center; gap: 6px; padding: 4px 6px; background: var(--gs-violet); color: var(--gs-blanc); border-radius: 6px; } .c-ipad-app__brand-circle { width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .25); flex-shrink: 0; } .c-ipad-app__brand-name { font-weight: 900; font-size: 8px; } .c-ipad-app__brand-sub { font-size: 6px; opacity: .8; } .c-ipad-app__notif { display: flex; align-items: center; gap: 6px; padding: 5px 6px; background: rgba(109, 62, 244, .08); border: 1px solid rgba(109, 62, 244, .25); border-radius: 6px; font-size: 7px; } .c-ipad-app__notif-icon { width: 16px; height: 16px; display: grid; place-items: center; background: var(--gs-blanc); border-radius: 50%; font-size: 9px; flex-shrink: 0; } .c-ipad-app__notif-title { font-weight: 800; } .c-ipad-app__notif-text { color: var(--gs-texte-2); font-size: 6.5px; } .c-ipad-app__card { background: var(--gs-blanc); border: 1px solid #e9eaed; border-radius: 6px; padding: 5px 6px; display: flex; flex-direction: column; gap: 4px; } .c-ipad-app__card-row { display: flex; justify-content: space-between; font-size: 7px; border-bottom: 1px dashed #e9eaed; padding-bottom: 2px; } .c-ipad-app__card-row:last-child { border: 0; padding: 0; } .c-ipad-app__card-row strong { color: var(--gs-violet); font-weight: 900; } .c-ipad-app__cta { margin-top: auto; background: var(--gs-violet); color: var(--gs-blanc); border: 0; border-radius: 6px; padding: 6px 8px; font-size: 7px; font-weight: 800; cursor: pointer; box-shadow: 0 2px 8px rgba(109, 62, 244, .35); } .c-laptop-mockup__base { position: relative; height: 14px; background: linear-gradient(180deg, #2a2d33 0%, #15171b 100%); border-radius: 0 0 18px 18px; margin: 0 -4%; box-shadow: 0 8px 24px rgba(15, 17, 22, .2); } .c-laptop-mockup__notch { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 18%; height: 4px; background: #0a0c0f; border-radius: 0 0 6px 6px; } /* ═══════════════════════════════════════════════════════════════════════════ .c-dashboard — Dashboard GS Manager simulé (rendu écran laptop) ═══════════════════════════════════════════════════════════════════════════ */ .c-dashboard { background: #fafbfc; border-radius: 6px; padding: 10px 12px; height: 100%; display: flex; flex-direction: column; gap: 6px; /* compact : évite que les rows débordent */ font-size: 11px; line-height: 1.4; color: var(--gs-noir); overflow: hidden; /* SAFETY : rien ne dépasse jamais de l'écran simulé */ } .c-dashboard__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--s2); border-bottom: 1px solid #e9eaed; gap: var(--s2); } .c-dashboard__brand { display: flex; align-items: center; gap: 6px; font-weight: 700; } .c-dashboard__logo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gs-violet); } .c-dashboard__brand-name { font-weight: 800; color: var(--gs-noir); } .c-dashboard__brand-sub { font-weight: 500; color: var(--gs-texte-3); } .c-dashboard__live { display: flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; color: var(--gs-texte-2); } .c-dashboard__live-dot { width: 6px; height: 6px; border-radius: 50%; background: #2ecc71; animation: c-dashboard-pulse 1.8s infinite; } @keyframes c-dashboard-pulse { 0% { box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); } 70% { box-shadow: 0 0 0 8px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } .c-dashboard__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); } .c-dashboard__kpi { background: var(--gs-blanc); border: 1px solid #e9eaed; border-radius: 4px; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; } .c-dashboard__kpi-label { font-size: 9px; font-weight: 600; color: var(--gs-texte-3); text-transform: uppercase; letter-spacing: .03em; } .c-dashboard__kpi-value { font-size: 15px; font-weight: 900; color: var(--gs-noir); letter-spacing: -.02em; } .c-dashboard__kpi-delta { font-size: 9px; font-weight: 700; } .c-dashboard__kpi-delta--up { color: #16a34a; } .c-dashboard__chart { background: var(--gs-blanc); border: 1px solid #e9eaed; border-radius: 4px; padding: 6px 8px; flex: 1; display: flex; flex-direction: column; gap: 4px; min-height: 80px; } .c-dashboard__chart-head { display: flex; justify-content: space-between; align-items: center; font-size: 9px; font-weight: 700; color: var(--gs-texte-2); text-transform: uppercase; letter-spacing: .02em; } .c-dashboard__chart-legend { display: flex; align-items: center; gap: 4px; font-weight: 600; text-transform: none; } .c-dashboard__legend-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gs-violet); } .c-dashboard__chart-svg { width: 100%; flex: 1; } .c-dashboard__chart-line { stroke-dasharray: 600; stroke-dashoffset: 600; animation: c-dashboard-draw 2s ease-out forwards; } @keyframes c-dashboard-draw { to { stroke-dashoffset: 0; } } .c-dashboard__rows { display: flex; flex-direction: column; gap: 4px; overflow: hidden; flex-shrink: 0; /* ne se compresse pas (priorité à l'affichage des rows) */ max-height: 70px; /* exactement 2 rows visibles ~ jamais de débordement */ } .c-dashboard__row { display: grid; grid-template-columns: 8px 36px 1fr auto; gap: 6px; align-items: center; padding: 4px 6px; font-size: 10px; background: var(--gs-blanc); border: 1px solid #e9eaed; border-radius: 3px; } .c-dashboard__row--new { background: rgba(109, 62, 244, .06); border-color: rgba(109, 62, 244, .2); animation: c-dashboard-row-in 600ms ease-out; } @keyframes c-dashboard-row-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .c-dashboard__row-dot { width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; } .c-dashboard__row-dot--live { background: var(--gs-violet); box-shadow: 0 0 0 2px rgba(109, 62, 244, .2); } .c-dashboard__row-time { font-weight: 700; color: var(--gs-texte-2); } .c-dashboard__row-text { color: var(--gs-noir); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c-dashboard__row-tag { font-weight: 800; color: #16a34a; font-size: 10px; } /* ═══════════════════════════════════════════════════════════════════════════ .c-app-spotlight — Phone central + 6 app pills flottants ═══════════════════════════════════════════════════════════════════════════ */ .c-app-spotlight { padding-block: var(--section-pad); } .c-app-spotlight__stage { display: grid; grid-template-columns: 1fr minmax(240px, 320px) 1fr; gap: var(--s8); align-items: center; margin-top: var(--s12); } .c-app-spotlight__col { display: flex; flex-direction: column; gap: var(--s5); } .c-app-spotlight__col--right { text-align: right; } .c-app-spotlight__phone { position: relative; display: flex; justify-content: center; } .c-app-spotlight__phone-glow { position: absolute; inset: -15% -10%; background: radial-gradient(closest-side, rgba(109, 62, 244, .25), transparent 70%); filter: blur(48px); z-index: 0; pointer-events: none; } .c-app-spotlight__phone img { position: relative; z-index: 1; max-width: 100%; height: auto; filter: drop-shadow(0 24px 48px rgba(15, 17, 22, .22)); } /* App pill — carte 1 bénéfice app, variantes décalées (zigzag visuel padel) */ .c-app-pill { background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); padding: var(--s4) var(--s5); box-shadow: 0 4px 16px rgba(15, 17, 22, .04); transition: transform var(--t-base), box-shadow var(--t-base); } .c-app-pill:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(15, 17, 22, .08); } .c-app-pill__title { font-size: .95rem; font-weight: 800; color: var(--gs-noir); margin: 0 0 var(--s2); letter-spacing: -.01em; line-height: var(--lh-tight); } .c-app-pill__desc { font-size: .85rem; color: var(--gs-texte-2); line-height: var(--lh-loose); margin: 0; } .c-app-pill--left { margin-right: var(--s4); } .c-app-pill--right { margin-left: var(--s4); } /* CTA centré sous l'app spotlight */ .c-app-spotlight__cta { display: flex; justify-content: center; margin-top: var(--s12); } /* ═══════════════════════════════════════════════════════════════════════════ .c-discover — Grande card 2 colonnes : accordéon "+" gauche + photo droite. Pattern Apple-style. Au clic d'un + : développe la description, ferme les autres. Hooks JS : data-gs-discover + .c-discover-item + .c-discover-item__head ═══════════════════════════════════════════════════════════════════════════ */ .c-discover { padding-block: var(--section-pad); } .c-discover__panel { /* Cadre/ombre/fond retirés : on ne garde que l'accordéon + la photo, "dans le vide". L'ombre de la photo (.c-discover__pic) reste portée par son propre filter:drop-shadow. */ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s10); margin-top: var(--s12); /* pas d'overflow:hidden : laisser respirer le drop-shadow de la photo */ } /* Colonne GAUCHE : liste accordéon */ .c-discover__list { display: flex; flex-direction: column; gap: 0; } .c-discover-item { border-bottom: 1px solid var(--gs-border); } .c-discover-item:last-child { border-bottom: 0; } .c-discover-item__head { display: flex; align-items: center; gap: var(--s4); width: 100%; background: none; border: 0; padding: var(--s5) 0; text-align: left; cursor: pointer; color: var(--gs-noir); transition: color var(--t-fast); } .c-discover-item__head:hover { color: var(--accent); } .c-discover-item__head:hover .c-discover-item__plus { background: var(--accent); color: var(--gs-blanc); transform: scale(1.05); } .c-discover-item__plus { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: var(--gs-ivoire, #f5f3ef); color: var(--accent); display: grid; place-items: center; transition: background var(--t-base), color var(--t-base), transform var(--t-base); } .c-discover-item__plus svg { width: 18px; height: 18px; transition: transform var(--t-base); } .c-discover-item.is-open .c-discover-item__plus { background: var(--accent); color: var(--gs-blanc); } .c-discover-item.is-open .c-discover-item__plus svg { transform: rotate(45deg); /* + devient × */ } .c-discover-item.is-open .c-discover-item__head { color: var(--accent); } .c-discover-item__title { font-size: 1.15rem; font-weight: 800; letter-spacing: -.01em; line-height: var(--lh-tight); flex: 1; } .c-discover-item__body { overflow: hidden; max-height: 0; transition: max-height .45s var(--ease-out-strong, cubic-bezier(.23,1,.32,1)); } .c-discover-item.is-open .c-discover-item__body { max-height: 320px; } .c-discover-item__body-inner { padding: 0 0 var(--s5) 52px; /* 36px plus + 16px gap = aligné au titre */ } .c-discover-item__desc { font-size: .95rem; color: var(--gs-texte-2); line-height: var(--lh-loose); margin: 0; } /* Colonne photo (par défaut à droite, gauche si --reverse) */ .c-discover__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 520px; perspective: 1500px; /* SCÈNE 3D */ } /* Stage 3D : conteneur en grid 1x1 — toutes les photos s'empilent dans la même cell. La grille adopte la taille de la plus grande image, donc le composant s'adapte automatiquement à n'importe quel ratio (portrait, landscape, carré, mixed). */ .c-discover__stage { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; width: 100%; max-width: 520px; /* plus large que 320 — anticipe images plus larges */ transform-style: preserve-3d; will-change: transform; } /* Chaque photo : empilée dans la même grid cell. Aspect natif respecté. */ .c-discover__pic { grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: auto; object-fit: contain; /* préserve l'image entière, pas de crop */ border-radius: 24px; /* drop-shadow plutôt que box-shadow : suit la silhouette si l'image est détourée (transparente), évite le halo carré moche */ filter: drop-shadow(0 24px 40px rgba(15, 17, 22, .22)) drop-shadow(0 6px 12px rgba(15, 17, 22, .12)); opacity: 0; visibility: hidden; pointer-events: none; display: block; transition: opacity .4s var(--ease-out-strong, cubic-bezier(.23,1,.32,1)); } .c-discover__pic.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* ── Variante MIROIR — photo à GAUCHE, accordéon à DROITE ──────────────── */ .c-discover__panel--reverse .c-discover__visual { order: 1; } .c-discover__panel--reverse .c-discover__list { order: 2; } /* ═══════════════════════════════════════════════════════════════════════════ .c-testi-grid — Grille témoignages (3 col desktop, 1 col mobile) Remplace le carousel par un pattern show-more. ═══════════════════════════════════════════════════════════════════════════ */ .c-testi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); margin-top: var(--s10); } /* ═══════════════════════════════════════════════════════════════════════════ .c-show-more — Bouton "Afficher plus" centré sous une liste paginée Pattern réutilisable : [data-show-more] / [data-show-more-item] / [data-show-more-btn] ═══════════════════════════════════════════════════════════════════════════ */ /* PROTECTION INITIALE : tant que le JS n'a pas marqué le container comme prêt, on cache les items au-delà du 3e via CSS. Évite le flash "tout visible". Assume initial=3 (cas par défaut). Le JS corrige ensuite via [hidden]. */ [data-show-more]:not([data-show-more-ready]) [data-show-more-item]:nth-child(n+4) { display: none; } [data-show-more]:not([data-show-more-ready]) [data-show-more-btn] { /* On affiche le bouton dès le rendu CSS (avant JS) */ display: inline-flex; } [data-show-more-item][hidden] { display: none; } .c-show-more { display: flex; justify-content: center; margin-top: var(--s8); } .c-show-more__btn { display: inline-flex; align-items: center; gap: var(--s2); background: var(--gs-blanc); border: 1.5px solid var(--gs-border); border-radius: var(--r-pill); padding: var(--s3) var(--s6); font-size: .95rem; font-weight: 700; color: var(--gs-noir); cursor: pointer; transition: border-color var(--t-base), background var(--t-base), transform var(--t-base); } .c-show-more__btn:hover { border-color: var(--accent); background: var(--accent-xpale, #F5F0FF); color: var(--accent); transform: translateY(-1px); } .c-show-more__btn[hidden] { display: none; } .c-show-more__counter { font-weight: 500; font-size: .85rem; color: var(--gs-texte-3); } .c-show-more__btn:hover .c-show-more__counter { color: var(--accent); } /* Petite chevron qui descend pour signifier "déplier" */ .c-show-more__btn::after { content: ''; width: 14px; height: 14px; background-image: url("data:image/svg+xml;utf8,"); background-size: contain; background-repeat: no-repeat; } /* ═══════════════════════════════════════════════════════════════════════════ [LEGACY] .c-closer-look — Conservé pour rollback éventuel, non utilisé ═══════════════════════════════════════════════════════════════════════════ */ .c-closer-look { padding-block: var(--section-pad); overflow: hidden; } .c-closer-look__stage { position: relative; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(520px, 1.8fr) minmax(220px, 1fr); gap: var(--s4); align-items: center; margin-top: var(--s12); perspective: 1500px; } /* Container des cards latérales (gauche/droite) */ .c-closer-look__cards { position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--s4); min-height: 320px; } .c-closer-look__cards--left { text-align: right; } .c-closer-look__cards--right { text-align: left; } /* Stage 3D du device */ .c-closer-look__device { position: relative; display: flex; justify-content: center; transform-style: preserve-3d; will-change: transform; } .c-closer-look__photo-wrap { position: relative; width: 100%; max-width: 720px; } .c-closer-look__photo { display: block; width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: 0 32px 80px rgba(15, 17, 22, .25); } /* ── Hotspots "+" Apple-style — pulse violet, clic = + → × ─────────────── */ .c-hotspot { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: var(--gs-blanc); border: 0; color: var(--gs-violet); font-size: 26px; font-weight: 200; line-height: 1; cursor: pointer; display: grid; place-items: center; box-shadow: 0 4px 16px rgba(15, 17, 22, .18); z-index: 4; transition: background var(--t-base), color var(--t-base), transform var(--t-base); animation: c-hotspot-pulse 2.4s infinite; transform: translate(-50%, -50%); /* point d'ancrage = centre du bouton */ } @keyframes c-hotspot-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(15, 17, 22, .18), 0 0 0 0 rgba(109, 62, 244, .45); } 50% { box-shadow: 0 4px 16px rgba(15, 17, 22, .18), 0 0 0 16px rgba(109, 62, 244, 0); } } .c-hotspot:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 5; } .c-hotspot.is-active { background: var(--gs-violet); color: var(--gs-blanc); animation: none; transform: translate(-50%, -50%) rotate(45deg); /* + devient × visuellement */ box-shadow: 0 6px 24px rgba(109, 62, 244, .45); } .c-hotspot.is-active:hover { transform: translate(-50%, -50%) rotate(45deg) scale(1.1); } /* Positions des 6 hotspots — à calibrer visuellement sur macbook-hero.jpg */ .c-hotspot--pos-1 { top: 35%; left: 28%; } .c-hotspot--pos-2 { top: 52%; left: 24%; } .c-hotspot--pos-3 { top: 70%; left: 32%; } .c-hotspot--pos-4 { top: 35%; left: 72%; } .c-hotspot--pos-5 { top: 52%; left: 76%; } .c-hotspot--pos-6 { top: 70%; left: 68%; } /* ── Feature cards — apparaissent au clic du + correspondant ──────────── */ .c-feature-card { background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: var(--r-lg); padding: var(--s5) var(--s6); box-shadow: 0 8px 32px rgba(15, 17, 22, .08); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: none; } .c-feature-card.is-active { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .c-feature-card__title { font-size: 1.1rem; font-weight: 900; color: var(--gs-noir); margin: 0 0 var(--s2); letter-spacing: -.01em; line-height: var(--lh-tight); text-wrap: balance; } .c-feature-card__desc { font-size: .9rem; color: var(--gs-texte-2); line-height: var(--lh-loose); margin: 0; } /* ╔═══════════════════════════════════════════════════════════════════════════ ║ BLOG — composants .c-blog-* (v6.1 Vague 3) ║ ║ Architecture : ║ .c-blog-hero → hero spécifique blog (index + article) ║ .c-blog-filters → boutons catégories ║ .c-blog-featured → carte "à la une" double-colonne ║ .c-blog-grid → grille articles ║ .c-blog-card → carte article (média + texte) ║ .c-blog-article → wrapper layout article 2 colonnes ║ .c-blog-article__* → sous-éléments article (back, cover, lede, meta...) ║ .c-blog-content → typo "prose" du contenu d'article ║ .c-blog-callout → encadré dans l'article (warning, success) ║ .c-blog-stats → grille de KPI inline ║ .c-blog-figure → figure avec légende ║ .c-blog-pill → label inline (KPI 1, GS Manager...) ║ .c-blog-link-card → bloc "Lire aussi" ║ .c-blog-plan → sommaire "Au programme" ║ .c-blog-newsletter → bande newsletter post-article ║ .c-blog-empty → état vide (pas d'articles) ╚═══════════════════════════════════════════════════════════════════════════ */ /* ── .c-blog-hero ─────────────────────────────────────────────────────────── */ .c-blog-hero { padding: clamp(4rem, 9vw, 7rem) 0 clamp(2.5rem, 5vw, 4rem); background: linear-gradient(180deg, var(--gs-violet-xpale) 0%, var(--gs-blanc) 100%); text-align: center; } .c-blog-hero__eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-violet-fonce); background: var(--gs-blanc); padding: 0.5rem 1rem; border-radius: 999px; border: 1px solid var(--gs-violet-pale); margin-bottom: var(--s5); } .c-blog-hero__h1 { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.05; margin: 0 auto var(--s6); max-width: 22ch; color: var(--gs-noir); } .c-blog-hero__h1 em { font-style: italic; color: var(--gs-violet); font-weight: 700; } .c-blog-hero__sub { max-width: 60ch; margin: 0 auto; font-size: clamp(1rem, 1.25vw, 1.125rem); line-height: 1.6; color: var(--gs-texte-2); } /* ── Mini formulaire newsletter dans le hero (Option A) ────────────────── */ .c-blog-hero__form { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); max-width: 480px; margin: var(--s8) auto var(--s2); } .c-blog-hero__form input[type="email"] { appearance: none; border: 1px solid var(--gs-border); background: var(--gs-blanc); color: var(--gs-noir); font-size: 1rem; padding: 0.875rem 1.125rem; border-radius: 12px; outline: none; box-shadow: 0 1px 2px rgba(15,17,22,.04); transition: border-color .2s ease, box-shadow .2s ease; } .c-blog-hero__form input[type="email"]::placeholder { color: var(--gs-texte-3); } .c-blog-hero__form input[type="email"]:focus { border-color: var(--gs-violet); box-shadow: 0 0 0 4px var(--gs-violet-pale); } .c-blog-hero__form button { appearance: none; border: 0; background: var(--gs-violet); color: var(--gs-blanc); font-size: 0.9375rem; font-weight: 700; padding: 0.875rem 1.5rem; border-radius: 12px; cursor: pointer; transition: background-color .2s ease, transform .2s ease; } .c-blog-hero__form button:hover { background: var(--gs-violet-fonce); transform: translateY(-1px); } .c-blog-hero__form button:disabled { background: #2A8A4E; cursor: default; transform: none; } .c-blog-hero__form.is-success button { background: #2A8A4E; } .c-blog-hero__form-hint { display: block; text-align: center; font-size: 0.8125rem; color: var(--gs-texte-3); margin: 0 auto; max-width: 480px; } /* ── .c-blog-filters-group (wrapper : label + ul de filtres) ──────────────── */ .c-blog-filters-group { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s4); } .c-blog-filters-group:last-of-type { margin-bottom: var(--s10); } .c-blog-filters-group__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-texte-3); flex-shrink: 0; } /* ── .c-blog-filters ──────────────────────────────────────────────────────── */ .c-blog-filters { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; padding: 0; margin: 0; justify-content: center; } .c-blog-filters button { appearance: none; border: 1px solid var(--gs-border); background: var(--gs-blanc); color: var(--gs-texte-2); font-size: 0.875rem; font-weight: 600; padding: 0.5rem 1.125rem; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease; } .c-blog-filters button:hover { border-color: var(--gs-violet-clair); color: var(--gs-noir); } .c-blog-filters button.is-active { background: var(--gs-noir); border-color: var(--gs-noir); color: var(--gs-blanc); } /* ── .c-blog-featured (article à la une) ──────────────────────────────────── */ .c-blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s12); align-items: center; margin: 0 0 var(--s16); padding: var(--s10); background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: 28px; box-shadow: 0 1px 2px rgba(15,17,22,.04); transition: box-shadow .25s ease, transform .25s ease; } .c-blog-featured:hover { box-shadow: 0 24px 48px -24px rgba(109,62,244,.18); transform: translateY(-2px); } .c-blog-featured__media { display: block; aspect-ratio: 5 / 3; /* 800×480 — format standard images blog */ border-radius: 18px; overflow: hidden; background: var(--gs-fond-2); } .c-blog-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); } .c-blog-featured:hover .c-blog-featured__media img { transform: scale(1.04); } .c-blog-featured__body { display: flex; flex-direction: column; gap: var(--s5); } .c-blog-featured__cat { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-violet-fonce); } .c-blog-featured__title { font-size: clamp(1.625rem, 2.2vw, 2.25rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; } .c-blog-featured__title a { color: var(--gs-noir); text-decoration: none; background-image: linear-gradient(var(--gs-violet), var(--gs-violet)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0 2px; transition: background-size .35s cubic-bezier(.16,1,.3,1); } .c-blog-featured__title a:hover { background-size: 100% 2px; } .c-blog-featured__desc { font-size: 1rem; line-height: 1.6; color: var(--gs-texte-2); margin: 0; } .c-blog-featured__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--gs-texte-3); } .c-blog-featured__meta strong { color: var(--gs-noir); font-weight: 700; } /* ── .c-blog-grid + .c-blog-card ──────────────────────────────────────────── */ .c-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); } .c-blog-card { display: flex; flex-direction: column; background: var(--gs-blanc); border: 1px solid var(--gs-border); border-radius: 20px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .c-blog-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -20px rgba(15,17,22,.18); border-color: var(--gs-violet-clair); } .c-blog-card__media { aspect-ratio: 5 / 3; /* 800×480 — format standard images blog */ background: var(--gs-fond-2); overflow: hidden; } .c-blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); } .c-blog-card:hover .c-blog-card__media img { transform: scale(1.05); } .c-blog-card__body { display: flex; flex-direction: column; gap: var(--s3); padding: var(--s6); flex: 1; } .c-blog-card__cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gs-violet-fonce); } .c-blog-card__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; color: var(--gs-noir); margin: 0; } .c-blog-card__desc { font-size: 0.9375rem; line-height: 1.55; color: var(--gs-texte-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .c-blog-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: auto; padding-top: var(--s3); font-size: 0.8125rem; color: var(--gs-texte-3); } .c-blog-meta-item { display: inline-flex; align-items: center; gap: 0.3125rem; line-height: 1; } .c-blog-meta-item svg { opacity: 0.7; flex-shrink: 0; } /* ── .c-blog-empty (état vide) ────────────────────────────────────────────── */ .c-blog-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: var(--s16) var(--s8); background: var(--gs-blanc); border: 2px dashed var(--gs-border); border-radius: 24px; } .c-blog-empty__icon { font-size: 3.5rem; margin-bottom: var(--s4); } .c-blog-empty__title { font-size: 1.5rem; font-weight: 800; margin: 0 0 var(--s3); color: var(--gs-noir); } .c-blog-empty__desc { color: var(--gs-texte-2); font-size: 1rem; line-height: 1.55; margin: 0 0 var(--s6); } /* ── .c-blog-article (layout : header centré + cover full-width + body 2 cols) ── */ .c-blog-article-layout { max-width: 1180px; margin: 0 auto; padding: var(--s10) var(--s6) 0; } .c-blog-article__back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--gs-texte-2); text-decoration: none; padding: 0.5rem 0.875rem; border-radius: 999px; background: var(--gs-fond-2); transition: background-color .2s ease, color .2s ease; margin-bottom: var(--s8); } .c-blog-article__back:hover { background: var(--gs-violet-pale); color: var(--gs-violet-fonce); } /* Header de l'article : centré, max 760px */ .c-blog-article__header { max-width: 760px; margin: 0 auto var(--s10); text-align: center; } .c-blog-article__eyebrow { display: block; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gs-violet-fonce); margin-bottom: var(--s4); } .c-blog-article__h1 { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--gs-noir); margin: 0 0 var(--s6); } .c-blog-article__h1 em { font-style: italic; color: var(--gs-violet); font-weight: 700; } .c-blog-article__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--gs-texte-3); margin: 0; } .c-blog-article__meta strong { color: var(--gs-noir); font-weight: 700; } /* Cover : wrapper 3D + image (tilt au mouvement de souris via JS), ratio 5/3 (800×480) */ .c-blog-article__cover-wrap { max-width: 800px; margin: 0 auto var(--s10); perspective: 1200px; perspective-origin: center; } .c-blog-article__cover { width: 100%; display: block; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 24px; background: var(--gs-fond-2); transform: rotateX(0deg) rotateY(0deg) translateZ(0); transform-style: preserve-3d; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; will-change: transform; box-shadow: 0 8px 24px -12px rgba(15,17,22,.15); } .c-blog-article__cover-wrap:hover .c-blog-article__cover { box-shadow: 0 32px 64px -24px rgba(109,62,244,.35); } /* Réduit le mouvement pour les utilisateurs sensibles */ @media (prefers-reduced-motion: reduce) { .c-blog-article__cover { transition: none !important; transform: none !important; } } /* Body : grid 2 colonnes (content + sidebar) */ .c-blog-article__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s12); padding-bottom: var(--s16); } .c-blog-article__main { min-width: 0; } /* Lede plus généreux, centré sur la colonne content */ .c-blog-article__lede { font-size: clamp(1.125rem, 1.5vw, 1.3125rem); line-height: 1.55; color: var(--gs-noir); margin: 0 0 var(--s10); padding-left: var(--s5); border-left: 3px solid var(--gs-violet); max-width: 720px; } .c-blog-article__lede strong { font-weight: 700; } .c-blog-article__lede a { color: var(--gs-violet); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--gs-violet-clair); text-underline-offset: 4px; font-weight: 700; transition: color .2s ease, text-decoration-color .2s ease; } .c-blog-article__lede a:hover { color: var(--gs-violet-fonce); text-decoration-color: var(--gs-violet); } /* ── .c-blog-content (prose typography pour le corps article) ─────────────── */ .c-blog-content { font-size: 1.0625rem; line-height: 1.7; color: var(--gs-noir); max-width: 68ch; } .c-blog-content > * + * { margin-top: var(--s6); } .c-blog-content p + p { margin-top: var(--s6); } .c-blog-content p { margin: 0; } .c-blog-content h1 { font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: var(--s12) 0 var(--s4); color: var(--gs-noir); } .c-blog-content h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 800; letter-spacing: -0.015em; line-height: 1.2; margin: var(--s12) 0 var(--s4); color: var(--gs-noir); } .c-blog-content h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; margin: var(--s8) 0 var(--s3); color: var(--gs-noir); } .c-blog-content h4 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.4; margin: var(--s6) 0 var(--s2); color: var(--gs-noir); } .c-blog-content h5 { font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.5; margin: var(--s5) 0 var(--s2); color: var(--gs-texte-2); } .c-blog-content strong { font-weight: 700; color: var(--gs-noir); } .c-blog-content em { font-style: italic; } .c-blog-content ul, .c-blog-content ol { margin: var(--s8) 0; /* aération : 2rem avant et après la liste */ padding-left: 0; list-style: none; } .c-blog-content li { position: relative; padding-left: 1.75rem; line-height: 1.6; } /* Bullet violet custom pour les

qui gardent ║ leur flux normal (puces, paragraphes structurés). ║ ║ Pas de breakpoint tablette intermédiaire. ╚═══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 1023px) { /* ── Container : padding horizontal un peu plus serré ──────────────────── */ .o-container { padding-inline: clamp(1rem, 6vw, 1.5rem); } /* ── Grilles : toutes en 1 colonne, sauf .o-grid--auto qui s'adapte déjà ─ */ .o-grid--2, .o-grid--3, .o-grid--4 { grid-template-columns: 1fr; } /* La grille concept (subgrid) repasse en single column avec auto rows. Le subgrid n'a plus de sens en 1 colonne. */ .c-concept-grid { grid-template-columns: 1fr; grid-template-rows: none; } .c-card--concept { grid-template-rows: none; grid-row: auto; } /* ── Nav : hamburger visible, liens desktop cachés, CTA desktop caché ──── */ .c-nav__links { display: none; } .c-nav__hamburger { display: flex; } #nav-cta-desktop { display: none; } /* Mega menu désactivé en mobile (le drawer prend le relais) */ .c-nav__mega { display: none; } /* ── Footer : 1 colonne, gap réduit ───────────────────────────────────── */ .c-footer__inner { grid-template-columns: 1fr; gap: var(--s8); } /* ── Hero : H1 pleine largeur en mobile (override du max-width 28ch) ──── */ .c-hero__title { max-width: none; text-wrap: initial; } /* Hero split : 1 colonne en mobile (image dessous le texte) */ .c-hero--split .o-container { grid-template-columns: 1fr; gap: var(--s8); text-align: center; } .c-hero--split .c-hero__title, .c-hero--split .c-hero__sub { text-align: center; } .c-hero--split .c-hero__ctas, .c-hero--split .c-hero__stats { justify-content: center; } /* Pill mobile : 2 colonnes (logo | texte). Le texte est groupé dans .c-hero__pill-text → il wrappe seul dans sa colonne, jamais sous le logo. */ .c-hero__pill { font-size: .8rem; padding: var(--s2) var(--s4); line-height: 1.45; text-align: left; } /* Pain bar : padding réduit + font-size plus petit */ .c-pain-bar { padding: var(--s2) var(--s4); font-size: .8rem; } /* ── Hero : padding et image réduits ──────────────────────────────────── */ .c-hero { padding-block: var(--s12) var(--s8); text-align: center; } .c-hero__image, .c-hero__image-wrap { height: auto; /* responsive : la photo entière se réduit avec l'écran */ } .c-hero__image-wrap { margin-bottom: 0; } /* Image hero en responsive : 90 % de l'écran */ .c-hero > .o-container:has(> .c-hero__image-wrap) { width: 90vw; } .c-hero__reassurance { gap: var(--s3); justify-content: center; } .c-hero__ctas { gap: var(--s2); } .c-hero__ctas .c-btn { width: 100%; justify-content: center; } /* ── Cards : padding réduit ───────────────────────────────────────────── */ .c-card--concept { padding: var(--s6); } .c-card--advantage { padding: var(--s6); min-height: 0; } .c-card--module .c-card__body { padding: var(--s6); } .c-card--module .c-card__photo { height: 180px; } /* ── Trust row : trop chargée en mobile, on masque ────────────────────── */ .c-trust-row { display: none; } /* ── Timeline : label au-dessus, carte pleine largeur ──────────────────── */ .c-timeline__item { grid-template-columns: 1fr; gap: var(--s2); } .c-timeline__label { font-size: 1.2rem; padding-top: 0; } .c-timeline__card, .c-timeline__card:has(.c-timeline__media) { grid-template-columns: 1fr; } /* ── FAQ : grille simple (la photo sticky cachée) ──────────────────────── */ .c-faq, .faq-layout { grid-template-columns: 1fr; gap: var(--s6); } .c-faq__photo, .faq-photo { display: none; } /* ── Carousel témoignages : 1 col en mobile + contrôles compacts ──────── */ .c-carousel__page { grid-template-columns: 1fr; } .c-carousel__controls { gap: var(--s3); } /* ── Configurateur : padding réduit ───────────────────────────────────── */ .c-configurator { padding: var(--s6); margin-top: var(--s8); } .c-configurator__option { padding: var(--s4); font-size: var(--txt-sm); } /* ── CTA final : un peu moins de respiration ──────────────────────────── */ .c-cta-final__buttons { flex-direction: column; align-items: stretch; } .c-cta-final__buttons .c-btn { width: 100%; justify-content: center; } /* ── Fondateur : photo + identité côte à côte, citation dessous ───────── Layout mobile en grille 2 colonnes (haut : photo + identité) + citation en pleine largeur en dessous. Photo réduite à 90px pour gain de place. */ .c-founder__inner { grid-template-columns: 90px 1fr; grid-template-areas: "photo identity" "quote quote"; gap: var(--s4) var(--s5); text-align: left; align-items: center; } .c-founder__photo { grid-area: photo; } .c-founder__photo img { width: 90px; height: 90px; } .c-founder__content { grid-area: identity / identity / quote / quote; display: contents; } .c-founder__identity { grid-area: identity; align-self: center; } .c-founder__quote { grid-area: quote; border-left: none; border-top: 3px solid var(--accent); padding-left: 0; padding-top: var(--s4); margin-top: var(--s2); margin-bottom: 0; font-size: .9rem; } .c-founder__name { font-size: 1.1rem; } .c-founder__role { font-size: .8rem; margin-top: 2px; } .c-founder__bio { font-size: .72rem; margin-top: 2px; } .c-founder__link { margin-top: var(--s2); font-size: .8rem; } /* ── Section header centré (toujours sur 1 col en mobile) ──────────────── */ .c-section-header { text-align: center; } /* ── Ticker : items plus serrés en mobile ─────────────────────────────── */ .c-ticker__item { padding: var(--s3) var(--s5); gap: var(--s3); } /* ── Cookie banner : largeur quasi pleine ────────────────────────────── */ .c-cookie-banner { width: calc(100% - var(--s5)); bottom: var(--s3); padding: var(--s4) var(--s5); } .c-cookie-banner__cta { width: 100%; } .c-cookie-banner__cta .c-cookie-banner__btn { flex: 1; justify-content: center; } /* ── Back-to-top : un peu plus discret ────────────────────────────────── */ .c-back-to-top { width: 40px; height: 40px; right: var(--s3); bottom: var(--s4); } /* ── Page contact : split-screen passe en 1 colonne empilée ─────────────── */ .c-contact-layout { grid-template-columns: 1fr; min-height: auto; } .c-contact-side { padding: var(--s8) var(--s5); justify-content: flex-start; } .c-contact-side--dark .c-contact-side__inner, .c-contact-side--light .c-contact-side__inner { max-width: 100%; } .c-contact-path__label { font-size: 14px; } .c-contact-path__desc { font-size: 12.5px; } /* ── 404 : grille des cartes d'orientation en 1 colonne ──────────────── */ .c-error-404__grid { grid-template-columns: 1fr; } /* ── Page merci : tout passe en 1 col ────────────────────────────────── */ .c-confirm-split { grid-template-columns: 1fr; gap: var(--s8); } .c-confirm-tips-grid, .c-confirm-resources-grid { grid-template-columns: 1fr; } /* ── Modal : plein écran intégral en mobile ──────────────────────────── */ .c-modal__panel { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; } .c-modal__close { top: var(--s2); right: var(--s2); } /* ── À propos : grids 2 cols → 1 col empilée ─────────────────────────── */ .c-apropos-story, .c-loictap { grid-template-columns: 1fr; gap: var(--s8); } .c-loictap__socials { grid-template-columns: 1fr 1fr; } .c-apropos-reels__grid { grid-template-columns: repeat(2, 1fr); } .c-apropos-story__badge { bottom: var(--s3); left: var(--s3); padding: var(--s3) var(--s4); } .c-card--philo { padding: var(--s8) var(--s5) var(--s5); } .c-card--philo .c-card__num { font-size: 2.2rem; top: var(--s3); right: var(--s4); } /* ── LANDING PAGES — composants spécifiques ───────────────────────────── */ /* Mini header LP : padding plus serré, taille logo réduite */ .c-lp-nav { flex-direction: column; align-items: center; gap: var(--s3); padding: var(--s4); } .c-lp-nav__logo img { height: 52px; } .c-lp-nav .c-btn { width: 100%; justify-content: center; font-size: var(--txt-sm); padding: var(--s3) var(--s4); } /* Hero stats : 3 colonnes serrées au lieu de wrap */ .c-hero__stats { gap: var(--s5); margin-top: var(--s5); } .c-hero__stat-val { font-size: 1.2rem; } .c-hero__stat-lbl { font-size: .7rem; } /* Product split : 1 colonne, photo au-dessus du texte. Sticky désactivé. IMPORTANT : __visual reste `position: relative` (et pas static) pour que les badges en `position: absolute` à l'intérieur restent ANCRÉS à la photo. Sinon ils remontent vers le 1er ancêtre positionné = hero / section précédente. */ .c-product-split { grid-template-columns: 1fr; gap: var(--s10); } .c-product-split__visual { position: relative; overflow: hidden; border-radius: var(--r-xl); } .c-product-split--reverse .c-product-split__visual { order: 0; } .c-product-split--reverse .c-product-split__body { order: 0; } /* Badges flottants : restent visibles mais repositionnés proche des coins (pas en débord, car la photo est plus étroite en mobile) */ .c-product-split__badge { min-width: 6.5rem; padding: var(--s2) var(--s3); } .c-product-split__badge-val { font-size: 1rem; } .c-product-split__badge-lbl { font-size: .65rem; } .c-product-split__badge:nth-child(1) { top: 8px; left: 8px; } .c-product-split__badge:nth-child(2) { top: 30%; right: 8px; } .c-product-split__badge:nth-child(3) { bottom: 30%; left: 8px; } .c-product-split__badge:nth-child(4) { bottom: 8px; right: 8px; } /* Titres et leads : un peu réduits */ .c-product-split__title { font-size: 1.5rem; } .c-product-split__lead { font-size: .95rem; } /* Problem quiz : 2 colonnes en mobile au lieu de 4 */ .c-problem-quiz { grid-template-columns: 1fr 1fr; gap: var(--s3); } .c-problem-quiz__item { padding: var(--s4); } .c-problem-quiz__ico { font-size: 1.8rem; } .c-problem-quiz__title { font-size: .85rem; } /* ── Compare table → stack cards en mobile (au lieu de table scrollable) ─ Chaque devient une card. La 1ère (critère) = header. Les 2 colonnes "autres" vs "GS" sont préfixées via ::before. */ .c-compare-table__scroll-wrap { overflow: visible; } .c-compare-table { box-shadow: none; background: transparent; border-radius: 0; } .c-compare-table thead { display: none; } .c-compare-table tr { display: block; background: var(--gs-blanc); border-radius: var(--r-lg); padding: var(--s4) var(--s5); margin-bottom: var(--s3); box-shadow: var(--sh-sm); border: 1px solid var(--gs-border); } .c-compare-table tbody tr:nth-child(even) td { background: transparent; } .c-compare-table td { display: block; padding: var(--s2) 0; border: 0; text-align: left; font-size: .9rem; } .c-compare-table td:first-child { font-size: 1rem; font-weight: 800; color: var(--gs-noir); border-bottom: 1px solid var(--gs-border); margin-bottom: var(--s2); padding-bottom: var(--s2); } .c-compare-table td:nth-child(2)::before { content: "Autres : "; font-weight: 800; color: var(--gs-texte-3); margin-right: 4px; } .c-compare-table td:last-child::before { content: "GS Manager : "; font-weight: 800; color: var(--accent); margin-right: 4px; } /* Solution card : padding réduit en mobile */ .c-solution-card { padding: var(--s8) var(--s5); } .c-solution-card__title { font-size: clamp(1.2rem, 5vw, 1.6rem); } .c-solution-card__desc { font-size: .95rem; } /* Popup close button : positionné en haut à droite à l'intérieur du panel (la position négative top:-56px sort de l'écran sur mobile petit). */ .c-problem-popup { padding: var(--s3); } .c-problem-popup__close { top: 12px; right: 12px; width: 36px; height: 36px; z-index: 2; } /* Padding top sur la card pour laisser la place au close */ .c-problem-popup .c-solution-card { padding-top: var(--s12); } /* Transformation card résultat : empilée verticalement. Connector devient horizontal entre Avant et Après. */ .c-transformation { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s4); } .c-transformation__card { grid-template-columns: 1fr; grid-template-rows: auto auto auto; min-height: auto; } .c-transformation__connector { padding: var(--s2) var(--s4); flex-direction: row; gap: var(--s3); } .c-transformation__connector-label { writing-mode: horizontal-tb; transform: none; } /* Flèches : pointent vers haut (avant) et vers bas (après) en mobile */ .c-transformation__connector::before { left: 50%; top: -8px; transform: translateX(-50%); border-width: 0 10px 8px 10px; border-color: transparent transparent var(--gs-noir) transparent; } .c-transformation__connector::after { right: auto; left: 50%; top: auto; bottom: -8px; transform: translateX(-50%); border-width: 8px 10px 0 10px; border-color: var(--gs-noir) transparent transparent transparent; } /* Reason card : la grille a déjà été reset à 1 col par .o-grid--3 ci-dessus. Réduction de la hauteur de photo pour gain de place. */ .c-reason-card__photo { height: 160px; } .c-reason-card__title { font-size: 1rem; } /* CTA final : titre réduit, padding interne ajusté */ .c-cta-final__title { font-size: clamp(1.5rem, 6vw, 2.25rem); } .c-cta-final__sub { font-size: .95rem; } /* Footer LP : padding réduit */ .c-lp-footer { padding: var(--s8) var(--s4); } /* ════════════════════════════════════════════════════════════════════════ PASSE FINE 375×667 (iPhone SE/8) — fixes ajoutés 2026-05-25 Loïc : "blindé sur 375×667". Cibles : overflow, paddings sections, composants 2 cols restants, sticky inadapté, font-sizes trop grosses. ════════════════════════════════════════════════════════════════════════ */ /* o-section : padding-block réduit (section-pad peut atteindre 6rem en mobile) */ .o-section { padding-block: var(--s12); } .o-section--ivoire { padding-block: var(--s12); } .o-section--noir { padding-block: var(--s12); } /* c-section-header : margin-bottom serré + font-size titre cap */ .c-section-header { margin-bottom: var(--s8); } .c-section-header__title { font-size: clamp(1.4rem, 5.5vw, 2rem); } .c-section-header__sub { font-size: .95rem; line-height: 1.55; } /* c-confirm-split : drop sticky text (sinon le texte reste fixe alors qu'on est en 1 col, ça casse la lecture verticale) */ .c-confirm-split__text { position: static !important; } /* c-confirm-stack : gap réduit pour ne pas avoir 32px+ entre chaque card */ .c-confirm-stack { gap: var(--s3); } /* c-confirm-pledge & c-confirm-resource : padding interne raisonnable */ .c-confirm-pledge { padding: var(--s8) var(--s5); } .c-confirm-pledge__title { font-size: clamp(1.3rem, 5vw, 1.7rem); } .c-confirm-resource { grid-template-columns: 1fr; } .c-confirm-resource__thumb { width: 100%; height: 180px; } /* c-confirm-hero (page merci) : padding réduit, h1 cap */ .c-confirm-hero { padding-block: var(--s10) var(--s6); } .c-confirm-hero__h1 { font-size: clamp(1.4rem, 6vw, 2rem); } .c-confirm-hero__sub { font-size: .95rem; } .c-confirm-hero__checkpoints { gap: var(--s2); font-size: .85rem; } /* c-confirm-tip : padding plus serré */ .c-confirm-tip { padding: var(--s5); } /* c-card--testimonial : padding interne ajusté pour ne pas étouffer le quote */ .c-card--testimonial { padding: var(--s6); } .c-card__quote { font-size: .92rem; line-height: 1.55; } .c-card__avatar { width: 36px; height: 36px; } /* c-product-split__badge : laisser visible mais bien à l'intérieur de la photo (on les rapproche du bord, ils restent ainsi dans le viewport 375px) */ .c-product-split__badge { min-width: 5.5rem; padding: var(--s2) var(--s3); } .c-product-split__photo { object-fit: cover; max-width: 100%; } /* c-hero (split + classique) : padding-block réduit pour gagner du fold */ .c-hero { padding-block: var(--s10) var(--s6); } .c-hero__sub { font-size: .95rem; line-height: 1.55; } /* Boutons : autoriser le retour à la ligne sinon le texte déborde à gauche/droite du bouton. .c-btn a white-space: nowrap par défaut → désactivé en mobile. */ .c-btn { white-space: normal; word-break: break-word; text-align: center; line-height: 1.3; } .c-btn--lg { padding: .85em 1.4em; font-size: .95rem; } /* c-cta-final : padding-block + sub serré */ .c-cta-final { padding-block: var(--s12); } .c-cta-final__eyebrow { margin-bottom: var(--s3); } /* c-pain-bar : OK déjà. On s'assure que le strong ne dépasse pas */ .c-pain-bar { line-height: 1.4; } /* c-faq : padding question + answer */ .c-faq__question { font-size: .95rem; padding: var(--s4) 0; } .c-faq__answer { font-size: .9rem; padding-bottom: var(--s4); } /* c-trust-row caché en mobile (déjà), mais sur certaines pages on l'utilise. On laisse hidden — sinon ça pousse trop la page. Les infos clés sont dans le c-hero__reassurance déjà visible. */ /* c-modal__panel : la modal Brevo est déjà full-screen mobile (cf. plus haut) */ /* c-back-to-top : encore plus petit pour ne pas couvrir un CTA */ .c-back-to-top { width: 36px; height: 36px; } /* c-problem-popup__close : ensure positionné dans la card */ .c-problem-popup { padding: var(--s2); } /* ── Discover (NEW Apple-style accordion) : mobile = 1 colonne ─ */ .c-discover__panel { grid-template-columns: 1fr; gap: var(--s6); } .c-discover__visual { order: -1; /* photo en haut sur mobile */ min-height: auto; perspective: none; } .c-discover__stage { max-width: 280px; transform: none !important; } /* Grille témoignages : 1 colonne en mobile */ .c-testi-grid { grid-template-columns: 1fr; gap: var(--s4); } .c-discover-item__head { padding: var(--s4) 0; } .c-discover-item__title { font-size: 1rem; } .c-discover-item__plus { width: 30px; height: 30px; } .c-discover-item__plus svg { width: 15px; height: 15px; } .c-discover-item__body-inner { padding-left: 44px; padding-bottom: var(--s4); } .c-discover-item__desc { font-size: .88rem; } /* ── Closer look : mobile = 1 colonne, photo en haut, cards toutes empilées dessous ─ */ .c-closer-look__stage { grid-template-columns: 1fr; gap: var(--s5); perspective: none; } .c-closer-look__cards--left, .c-closer-look__cards--right { text-align: left; min-height: auto; } /* Toutes les cards visibles d'office (pas d'interaction hotspot mobile) */ .c-feature-card { opacity: 1; visibility: visible; pointer-events: auto; transform: none; } /* Hotspots plus petits et désactivés visuellement sur mobile */ .c-hotspot { width: 24px; height: 24px; font-size: 16px; animation: none; pointer-events: none; /* pas d'interaction tactile (les cards sont toutes ouvertes) */ } /* ── Ecosystem + app spotlight (Sprint 2 pour-qui/*) ────────────────────── Mobile : 1 colonne (laptop / phone empilés au centre, pills au-dessus & en-dessous) */ .c-ecosystem-spotlight__stage, .c-app-spotlight__stage { grid-template-columns: 1fr; gap: var(--s6); perspective: none; /* on coupe la perspective desktop sur mobile (perf + layout) */ } .c-ecosystem-spotlight__col--right, .c-app-spotlight__col--right { text-align: left; } /* Mobile : on cache MacBook + iPad (place limitée), iMac centré seul */ .c-macbook-mockup, .c-ipad-mockup { display: none; } .c-imac-mockup { flex: none; max-width: 100%; transform: none !important; } .c-app-spotlight__phone img { max-width: 60%; } /* Dashboard simulé : taille réduite pour mobile */ .c-dashboard { font-size: 9px; padding: 8px 10px; gap: var(--s2); } .c-dashboard__kpi-value { font-size: 12px; } .c-dashboard__chart { min-height: 56px; } .c-dashboard__row { font-size: 8px; padding: 3px 5px; grid-template-columns: 6px 26px 1fr auto; } .c-dashboard__brand-sub { display: none; } /* App pills : retirer le décalage zigzag mobile */ .c-app-pill--left, .c-app-pill--right { margin-left: 0; margin-right: 0; } /* ── BLOG — Responsive (v6.1 Vague 3) ─────────────────────────────────── */ .c-blog-hero { padding: var(--s12) 0 var(--s8); } .c-blog-featured { grid-template-columns: 1fr; padding: var(--s5); gap: var(--s6); } .c-blog-featured__title { font-size: 1.5rem; } .c-blog-grid { grid-template-columns: 1fr; gap: var(--s5); } .c-blog-filters { justify-content: center; flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; gap: var(--s2); } .c-blog-filters button { white-space: normal; } .c-blog-filters-group { flex-direction: column; align-items: stretch; gap: var(--s2); } .c-blog-filters-group__label { text-align: center; } /* Mini formulaire newsletter du hero : passer en 1 colonne (champ + bouton empilés) */ .c-blog-hero__form { grid-template-columns: 1fr; max-width: 360px; } .c-blog-article-layout { padding: var(--s8) var(--s4) 0; } .c-blog-article__header { margin-bottom: var(--s6); } .c-blog-article__cover { aspect-ratio: 5 / 3; border-radius: 18px; margin-bottom: var(--s6); } .c-blog-article__body { grid-template-columns: 1fr; gap: var(--s8); padding-bottom: var(--s10); } .c-blog-sidebar { position: static; } .c-blog-toc { padding: var(--s4); } .c-blog-article__lede { font-size: 1.0625rem; padding-left: var(--s4); } .c-blog-final-choice__grid { grid-template-columns: 1fr; gap: var(--s4); } .c-blog-content { max-width: 100%; } .c-blog-content h2 { margin-top: var(--s8); } .c-blog-stats { grid-template-columns: 1fr; gap: var(--s4); padding: var(--s5); } .c-blog-pros-cons { grid-template-columns: 1fr; gap: var(--s3); } .c-blog-link-card { grid-template-columns: auto 1fr; grid-template-rows: auto auto; } .c-blog-link-card__arrow { display: none; } .c-blog-sidebar { position: static; } .c-blog-newsletter__inner { grid-template-columns: 1fr; gap: var(--s8); } .c-blog-newsletter__row { grid-template-columns: 1fr; } /* ── .c-calc : calculateur outils/LP — grilles en 1 colonne ───────────── */ .c-calc__inputs { grid-template-columns: 1fr; gap: var(--s5); } .c-calc__results-grid { grid-template-columns: 1fr; } /* La carte "an" (--big) reste en dernier = position naturelle en 1 col */ .c-calc__result--big .c-calc__result-value { font-size: 2rem; } }