. */ main { overflow-x: clip; } .container { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: var(--container); padding-inline: var(--gutter); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================== 05. Boutons, liens, icones ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 24px; transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease), box-shadow 250ms var(--ease); } /* CTA principal noir du hero : avatar + libelle. Repos 180 x 44 ; survol 230 x 44. Le groupe passe de 28 a 78 px. */ .btn-cta { gap: 10px; height: 44px; padding: 8px 16px 8px 8px; background: var(--black); color: var(--white); border-radius: 24px; box-shadow: var(--shadow-cta); transition: background-color 250ms var(--ease), box-shadow 250ms var(--ease), transform 250ms var(--ease); } .btn-cta__faces { display: flex; align-items: center; gap: 4px; flex: none; } .btn-cta__avatar { flex: none; width: 28px; height: 28px; border-radius: 1000px; object-fit: cover; } /* Le « + » et le cercle « You » sont replies au repos : largeur nulle, invisibles, sans marge. Au survol ils reprennent leur place dans le flux. */ .btn-cta__plus, .btn-cta__you { flex: none; height: 28px; width: 0; opacity: 0; overflow: hidden; transform: scale(0.6); transition: width 320ms var(--ease), opacity 260ms var(--ease), transform 320ms var(--ease), margin-left 320ms var(--ease); } /* Symbole « + » dessine en CSS */ .btn-cta__plus { position: relative; margin-left: -4px; } .btn-cta__plus::before, .btn-cta__plus::after { content: ''; position: absolute; top: 50%; left: 50%; background: var(--white); border-radius: 2px; transform: translate(-50%, -50%); } .btn-cta__plus::before { width: 10px; height: 2px; } .btn-cta__plus::after { width: 2px; height: 10px; } /* Cercle blanc portant « You » */ .btn-cta__you { display: flex; align-items: center; justify-content: center; border-radius: 1000px; background: var(--white); color: var(--black); font-size: 11px; font-weight: 600; letter-spacing: -0.22px; white-space: nowrap; margin-left: -4px; } .btn-cta:hover .btn-cta__plus, .btn-cta:focus-visible .btn-cta__plus { width: 14px; opacity: 1; transform: scale(1); margin-left: 0; } .btn-cta:hover .btn-cta__you, .btn-cta:focus-visible .btn-cta__you { width: 28px; opacity: 1; transform: scale(1); margin-left: 0; } .btn-cta__label { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; white-space: nowrap; } /* Bouton d'appel a l'action de la nav. Il etait clair (gris 100 sur pilule blanche) et se confondait avec les cinq liens voisins : il est desormais plein noir, c'est le seul element colore de la barre. Le nom de classe est conserve — .nav__links a:not(.btn-light) s'appuie dessus pour ne pas styler le bouton comme un lien. Attention : tout changement de padding ou de bordure ici modifie la largeur de .nav__right (voir section 06). */ .btn-light { height: 32px; padding: 8px 14px; background: var(--black); color: var(--white); border: 1px solid var(--black); border-radius: 24px; box-shadow: var(--shadow-soft); font-size: 14px; font-weight: 600; letter-spacing: -0.28px; } .btn-light:hover { background: var(--gray-900); border-color: var(--gray-900); } /* --- Reponse au survol, commune a tous les appels a l'action ------------- Le CTA du hero, celui de fin de page, celui de la section Investissement et les deux boutons du widget flottant n'avaient aucun retour visuel : seuls le « + » et la pastille « Vous » bougeaient sur .btn-cta, rien ailleurs. Meme geste partout : la surface se souleve de 2 px, l'ombre se creuse, le noir s'eclaircit d'un cran. A l'appui, le bouton redescend — c'est ce retour qui donne la sensation d'un vrai bouton. .btn-light, .cpanel__submit et .cpanel__alt-btn ont deja leur changement de fond : ils ne recoivent ici que le relief. */ .btn-cta, .plan__cta-light, .btn-light, .cpanel__submit, .cpanel__alt-btn, .dock-btn, .deck__toggle { will-change: transform; } .btn-cta:hover, .plan__cta-light:hover, .btn-light:hover, .cpanel__submit:hover, .cpanel__alt-btn:hover, .dock-btn:hover, .deck__toggle:hover { transform: translateY(-2px); } .btn-cta:active, .plan__cta-light:active, .btn-light:active, .cpanel__submit:active, .cpanel__alt-btn:active, .dock-btn:active, .deck__toggle:active { transform: translateY(0); transition-duration: 80ms; } /* Les boutons noirs pleins : l'ombre se creuse et le fond s'eclaircit. */ .btn-cta:hover, .plan__cta-light:hover { background: var(--gray-900); box-shadow: var(--shadow-cta), 0 12px 24px -12px rgba(0, 0, 0, 0.45); } /* Le widget flottant est deja en mouvement au survol (il se deploie) : le relief y est porte par les deux boutons seuls, sans changement de fond. */ .dock-btn--dark:hover { background: var(--gray-900); } .dock-btn--light:hover { background: var(--white); } /* Lien souligne « View all my projects » : le trait se deploie au survol */ .link-underline { display: inline-flex; align-items: center; gap: 4px; position: relative; } .link-underline::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right center; transition: transform 350ms var(--ease); } .link-underline:hover::after { transform: scaleX(1); transform-origin: left center; } .arrow { display: inline-block; transition: transform 250ms var(--ease); } a:hover > .arrow, .link-underline:hover .arrow { transform: translate(2px, -2px); } .stars { display: flex; align-items: center; gap: 4px; } /* flex: none — sans quoi les etoiles sont ecrasees dans un conteneur etroit */ .stars svg { flex: none; width: 12px; height: 12px; } :where(a, button, summary):focus-visible { outline: 2px solid var(--black); outline-offset: 3px; border-radius: 4px; } /* Reserve d'icones : les 28 definitions SVG d'origine sont conservees dans un bloc masque en tete de et appelees par . */ .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; } /* ========================================================================== 06. Barre de navigation (pilule) Etat replie par defaut : avatar + nom + trois points. Au survol (souris) ou au clic (tactile) la pilule s'elargit et les liens apparaissent en vague, 60 ms d'ecart entre chacun. Six elements depuis l'adaptation francaise : Realisations, Services, Processus, FAQ, Contact et le bouton « Reserver un appel ». ========================================================================== */ .nav-wrap { position: fixed; top: 24px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 100; pointer-events: none; } /* Fond releve de 0.5 a 0.72 et filet de detourage : a 50 % d'opacite la pilule disparaissait des qu'une carte projet passait dessous. Le flou est conserve, le style general ne change pas. */ .nav { display: flex; align-items: center; gap: 32px; padding: 12px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid var(--hairline); border-radius: 32px; box-shadow: var(--shadow-pill); pointer-events: auto; transition: gap 400ms var(--ease); } .nav__id { display: flex; align-items: center; gap: 8px; flex: none; } .nav__id img { width: 32px; height: 32px; border-radius: 1000px; object-fit: cover; /* l'avatar suit la vague : leger retrait au repli de la pilule */ transition: transform 450ms var(--ease); } .nav__name { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; white-space: nowrap; } /* Logo texte : l'avatar de l'ancien porteur de marque a disparu, le nom porte seul l'identite. Taille legerement relevee pour tenir ce role. */ .nav__logo { font-size: 16px; letter-spacing: -0.4px; padding-left: 4px; } /* Zone de droite : les liens cedent la place aux trois points. Etat par defaut = deploye. Au repli, la largeur tombe a 24 px et les points prennent le relais. La largeur deployee (492 px a l'origine 310 px) est celle des six elements francais — cinq liens plus le bouton — mesuree sur le rendu. Toute retouche des libelles impose de la reverifier : les liens sont en position absolue et deborderaient sur le logo. */ .nav__right { position: relative; display: flex; align-items: center; justify-content: flex-end; /* 492 px a l'origine ; +8 px depuis que le bouton d'appel est passe en noir plein (padding 12 -> 14 px et bordure de 1 px). */ width: 500px; height: 32px; transition: width 450ms var(--ease); } .nav__dots { position: absolute; right: 0; display: flex; align-items: center; gap: 3px; padding: 4px 0; opacity: 0; pointer-events: none; transition: opacity 250ms var(--ease); } .nav__dots span { width: 6px; height: 6px; border-radius: 24px; background: var(--gray-500); } .nav__dots span:last-child { background: var(--black); } .nav__links { position: absolute; right: 0; display: flex; align-items: center; gap: 16px; white-space: nowrap; } /* L'effet de vague : chaque element part avec 60 ms d'ecart sur le suivant, dans l'ordre des noms de l'original (Work 0, Services .1, Pricing .2, Blog .3, Contact .4). Au repli la vague s'inverse (dernier parti en premier) pour que le mouvement reste dirige vers le centre. */ .nav__links > * { opacity: 1; transform: translateY(0) scale(1); transition: opacity 320ms var(--ease), transform 320ms var(--ease); } .nav__links > *:nth-child(1) { transition-delay: 0ms; } .nav__links > *:nth-child(2) { transition-delay: 60ms; } .nav__links > *:nth-child(3) { transition-delay: 120ms; } .nav__links > *:nth-child(4) { transition-delay: 180ms; } .nav__links > *:nth-child(5) { transition-delay: 240ms; } .nav__links > *:nth-child(6) { transition-delay: 300ms; } .nav__links a:not(.btn-light) { font-size: 14px; font-weight: 600; letter-spacing: -0.28px; transition: color 200ms var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease); } .nav__links a:not(.btn-light):hover { color: var(--gray-700); } /* --- Etat replie (pose par main.js au defilement vers le bas) ----------- */ .nav.is-collapsed { gap: 32px; } .nav.is-collapsed .nav__right { width: 24px; } .nav.is-collapsed .nav__links { pointer-events: none; } .nav.is-collapsed .nav__links > * { opacity: 0; transform: translateY(-6px) scale(0.9); } /* vague inversee au repli */ .nav.is-collapsed .nav__links > *:nth-child(1) { transition-delay: 300ms; } .nav.is-collapsed .nav__links > *:nth-child(2) { transition-delay: 240ms; } .nav.is-collapsed .nav__links > *:nth-child(3) { transition-delay: 180ms; } .nav.is-collapsed .nav__links > *:nth-child(4) { transition-delay: 120ms; } .nav.is-collapsed .nav__links > *:nth-child(5) { transition-delay: 60ms; } .nav.is-collapsed .nav__links > *:nth-child(6) { transition-delay: 0ms; } .nav.is-collapsed .nav__dots { opacity: 1; pointer-events: auto; transition-delay: 320ms; } .nav.is-collapsed .nav__id img { transform: scale(0.94); } /* Vague des trois points : une fois la pilule repliee, les points sont le seul element vivant de la barre. Ils montent l'un apres l'autre, 160 ms d'ecart, avec un long temps mort en fin de cycle pour que le mouvement respire au lieu de clignoter. L'animation ne tourne qu'a l'etat replie — deployee, la pilule a deja la vague de ses liens. */ @keyframes nav-dots-wave { 0%, 45%, 100% { transform: translateY(0); opacity: 0.7; } 20% { transform: translateY(-3px); opacity: 1; } } .nav.is-collapsed .nav__dots span { animation: nav-dots-wave 1.6s var(--ease) infinite; } .nav.is-collapsed .nav__dots span:nth-child(1) { animation-delay: 0ms; } .nav.is-collapsed .nav__dots span:nth-child(2) { animation-delay: 160ms; } .nav.is-collapsed .nav__dots span:nth-child(3) { animation-delay: 320ms; } @media (max-width: 767px) { /* Sous 768 px la pilule reste compacte ; les points ouvrent un panneau. La barre est donc en permanence dans son etat replie : la vague des points s'y applique aussi, sauf quand le panneau est ouvert. */ .nav { gap: 16px; } .nav__right { width: 24px; } .nav__dots { opacity: 1; pointer-events: auto; } .nav__dots span { animation: nav-dots-wave 1.6s var(--ease) infinite; } .nav__dots span:nth-child(2) { animation-delay: 160ms; } .nav__dots span:nth-child(3) { animation-delay: 320ms; } .nav.is-open .nav__dots span { animation: none; } .nav__links { position: absolute; top: calc(100% + 14px); right: -12px; left: auto; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 20px; background: var(--white); border-radius: 20px; box-shadow: var(--shadow-pill); opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity 250ms var(--ease), transform 250ms var(--ease); } .nav__links > * { transition-delay: 0ms !important; } .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; } .nav.is-open .nav__links > * { opacity: 1; transform: none; } .nav.is-collapsed .nav__links > * { opacity: 1; transform: none; } } /* ========================================================================== 07. Widget de contact flottant Apparait au defilement (JS ajoute .is-visible). ========================================================================== */ .contact-dock { position: fixed; bottom: 24px; left: 0; width: 100%; display: flex; justify-content: center; z-index: 99; pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .contact-dock.is-visible { opacity: 1; transform: none; } .contact-dock__inner { display: flex; align-items: center; gap: 18px; padding: 12px 12px 12px 24px; background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid var(--hairline); border-radius: 48px; box-shadow: var(--shadow-pill); pointer-events: auto; } /* Bloc de texte : se retracte et s'efface a l'ouverture. grid-template-columns 1fr -> 0fr donne une largeur animable. */ .contact-dock__text { display: grid; grid-template-columns: 1fr; gap: 5px; transition: grid-template-columns 380ms var(--ease), opacity 260ms var(--ease), margin-right 380ms var(--ease); } .contact-dock__text > * { overflow: hidden; white-space: nowrap; min-width: 0; } .contact-dock__icons { display: flex; align-items: center; gap: 8px; } .dock-btn { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 0; width: 40px; height: 40px; padding: 8px; border-radius: 24px; overflow: hidden; flex: none; transition: width 380ms var(--ease), gap 380ms var(--ease), padding 380ms var(--ease), background-color 300ms var(--ease), transform 250ms var(--ease); } .dock-btn svg { width: 24px; height: 24px; flex: none; } .dock-btn__label { font-size: 12px; font-weight: 600; letter-spacing: -0.24px; white-space: nowrap; opacity: 0; transition: opacity 240ms var(--ease); } /* --- Etat deploye : largeurs relevees sur l'original ------------------- */ .contact-dock.is-open .contact-dock__inner { padding: 12px; } .contact-dock.is-open .contact-dock__text { grid-template-columns: 0fr; opacity: 0; margin-right: -18px; } .contact-dock.is-open .dock-btn { gap: 6px; padding: 8px 12px 8px 8px; } /* Largeurs recalees sur les libelles francais : « E-mail » et « Reserver ». */ .contact-dock.is-open .dock-btn--dark { width: 90px; } .contact-dock.is-open .dock-btn--light { width: 104px; } .contact-dock.is-open .dock-btn__label { opacity: 1; transition-delay: 120ms; } .dock-btn--dark { background: var(--black); color: var(--white); box-shadow: var(--shadow-cta); } .dock-btn--light { background: var(--gray-100); color: var(--black); border: 1px solid var(--hairline); box-shadow: var(--shadow-soft); } /* ========================================================================== 08. Hero ========================================================================== */ .hero { display: flex; flex-direction: column; align-items: center; width: 100%; padding-top: var(--hero-top); } .hero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; width: 100%; max-width: var(--container); padding: 0 var(--gutter) 96px; } @media (max-width: 767px) { .hero__inner { padding-bottom: 48px; } } .hero__head { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 100%; } /* Pastille de disponibilite */ .availability { display: inline-flex; align-items: center; gap: 8px; /* L'original mesure 30 px de haut malgre un padding annonce de 12 px : Framer contraignait la hauteur du conteneur. On reproduit la hauteur. */ padding: 7px 16px 7px 8px; background: var(--white); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow-pill); } .pulse { position: relative; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; } .pulse__outer, .pulse__inner { position: absolute; border-radius: 1000px; background: var(--green); } .pulse__outer { width: 16px; height: 16px; opacity: 0.25; animation: pulse-ring 2s var(--ease) infinite; } .pulse__inner { width: 8px; height: 8px; opacity: 1; } /* Les deux largeurs ont ete relachees pour le texte francais, plus long que l'anglais d'origine (12ch / 390px). Les sauts de ligne du titre restent pilotes par le
du balisage ; la largeur ne sert qu'a empecher une ligne de courir sur toute la grille. */ .hero__title { max-width: 15ch; } .hero__lead { max-width: 560px; } /* Rangee d'actions. Elle n'a plus qu'un seul bouton depuis le retrait du lien secondaire « Voir une realisation » ; l'enveloppe est conservee, elle porte l'alignement et resterait utile si un second appel a l'action revenait. */ .hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; } .hero__proof { display: flex; align-items: center; gap: 12px; height: 44px; padding-right: 12px; border-radius: 100px; flex: none; } .stack-avatars { display: flex; align-items: center; padding: 0 16px; flex: none; } .stack-avatars img { flex: none; width: 32px; height: 32px; border-radius: 1000px; object-fit: cover; border: 2px solid var(--white); } .stack-avatars img + img { margin-left: -16px; } .hero__rating { display: flex; flex-direction: column; gap: 6px; flex: none; } .hero__rating > span { white-space: nowrap; } /* ========================================================================== 09. Bandeau sous le hero Le gabarit (.logos-row) est celui du bandeau de logos d'origine ; il porte desormais les quatre garanties. Le ticker reste defini plus bas : il n'est plus utilise sur la page d'accueil mais le composant est conserve. ========================================================================== */ /* Le padding haut est tombe de 32 a 4 px : la barre de garanties remonte de 28 px vers le hero, dont elle prolonge la lecture. Le padding bas est conserve, il tient la separation avec la section suivante. */ .logos-row { display: flex; align-items: center; justify-content: center; gap: 20px; width: 100%; padding: 4px 0 32px; overflow: hidden; } .logos-row__inner { display: flex; align-items: center; gap: 32px; width: 100%; max-width: var(--container); padding-left: var(--gutter); overflow: hidden; } .ticker { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker__track { display: flex; align-items: center; gap: 24px; width: max-content; animation: ticker-scroll 30s linear infinite; } .ticker:hover .ticker__track { animation-play-state: paused; } .ticker__track > * { flex: none; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker--reverse .ticker__track { animation-direction: reverse; } .ticker--slow .ticker__track { animation-duration: 55s; } .logo-item { display: flex; align-items: center; height: 35px; opacity: 0.85; } .logo-item svg { height: 35px; width: auto; } @media (max-width: 991px) { .logos-row__inner { padding-left: var(--gutter); } .hero__proof { display: none; } } /* --- Barre de garanties ---------------------------------------------------- */ /* Quatre promesses en pastilles noires pleines. La version d'origine reprenait le gris discret du bandeau de logos (12 px, gris 700, separateurs en point median) : illisible sur un fond blanc, juste sous un hero tres contraste. Elles sont maintenant traitees comme des etiquettes a part entiere — fond noir, texte blanc, 13 px — et les separateurs ont disparu, la forme des pastilles suffit a les distinguer. */ .guarantees { justify-content: center; flex-wrap: wrap; gap: 10px; padding-inline: var(--gutter); overflow: visible; } .guarantee { display: inline-flex; align-items: center; white-space: nowrap; padding: 9px 16px; background: var(--black); color: var(--white); border: 1px solid var(--black); border-radius: 1000px; box-shadow: var(--shadow-soft); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; } @media (max-width: 767px) { /* Sous 768 px les quatre pastilles s'empilent sur deux rangees : on resserre l'ecart et le padding pour que deux tiennent par ligne a 390 px. */ .guarantees { gap: 8px; } .guarantee { padding: 8px 12px; font-size: 12px; } } /* ========================================================================== 10. Latest Projects Grille 2 x 2 (992px de contenu, gouttiere 24px, carte 484px, ratio 4:3). ========================================================================== */ .projects__inner { gap: 64px; } /* Titre + sous-titre empiles et centres (l'original n'avait que le titre). */ .projects__header { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; width: 100%; text-align: center; } .projects__header p { max-width: 52ch; } .projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; } /* Trois cartes dans une grille a deux colonnes : la derniere occupe seule sa rangee. On la centre a la largeur d'une colonne plutot que de la laisser collee a gauche. La regle ne s'applique qu'a un nombre impair de cartes. */ .projects__grid > .project-fly:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 12px); justify-self: center; } @media (max-width: 767px) { .projects__grid { grid-template-columns: minmax(0, 1fr); } .projects__inner { gap: 32px; } .projects__grid > .project-fly:last-child:nth-child(odd) { width: 100%; } } /* Lien « Voir tous les projets », sous la grille de l'accueil. Le gap de .projects__inner vaut 64 px : on le resserre, le lien appartient a la grille qu'il prolonge. */ .projects__all { margin-top: -24px; } /* --- 10 bis. Grille de la page « Tous les projets » ----------------------- Meme carte (.project) que sur l'accueil, mais sans l'enveloppe .project-fly ni sa projection dans le hero : sur une page de listing les cartes sont simplement posees. La grille accepte donc un nombre quelconque de projets, sans la regle de centrage du dernier element propre a l'accueil. */ .projectgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 24px; width: 100%; } @media (max-width: 767px) { .projectgrid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* Conteneur pilote par le defilement : au repos (haut de page) la carte est projetee dans le hero — echelle 0,70, rotation et translation propres a chaque carte, portees par --r / --x / --y en attribut style. main.js interpole lineairement vers l'identite sur les 715 premiers pixels de defilement, exactement comme l'original. L'origine 50% 43,4% correspond au centre du visuel (181,5 / 418). */ .project-fly { position: relative; transform-origin: 50% 43.4%; will-change: transform; /* Fondu au chargement : les cartes sont les premieres a l'ecran (delai 0), le texte du hero suit a 400 ms. .is-loaded est pose par main.js une fois les images decodees. */ opacity: 0; transition: opacity 500ms var(--ease); } .project-fly.is-loaded { opacity: 1; } @media (max-width: 991px) { /* Les valeurs de dispersion sont calees sur la grille 2 colonnes ; sous 992 px les cartes restent en place. */ .project-fly { transform: none !important; } } .project { display: flex; flex-direction: column; gap: 12px; /* Le basculement 3D suit la souris : la variable est ecrite par main.js */ transform: perspective(1200px) var(--tilt, none); transition: transform 500ms var(--ease); will-change: transform; } .project__media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: var(--gray-200); } .project__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 700ms var(--ease); } .project:hover .project__media img { transform: scale(1); } .project__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; } .project__meta { display: flex; flex-direction: column; gap: 4px; } .project__cta { display: flex; align-items: center; gap: 4px; flex: none; } .project__cta-icon { position: relative; width: 18px; height: 18px; overflow: hidden; } .project__cta-icon svg { position: absolute; inset: 0; width: 18px; height: 18px; transition: transform 300ms var(--ease); } .project__cta-icon svg:nth-child(2) { transform: translate(-100%, 100%); } .project:hover .project__cta-icon svg:nth-child(1) { transform: translate(100%, -100%); } .project:hover .project__cta-icon svg:nth-child(2) { transform: none; } /* Pastille posee sur le visuel. INUTILISEE : la mention « Concept de demonstration » a ete retiree des trois cartes, la section ne se presente plus comme une demonstration. La regle est conservee au cas ou une carte devrait porter un libelle en surimpression (« En cours », « Bientot »). */ .project__demo { position: absolute; top: 12px; left: 12px; padding: 5px 10px; border-radius: 1000px; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: var(--gray-700); box-shadow: var(--shadow-soft); pointer-events: none; } /* Troisieme ligne de la carte : ce qui a ete livre. */ .project__note { display: block; padding-top: 4px; border-top: 1px solid var(--gray-200); } /* ========================================================================== 11. Big Quote ========================================================================== */ /* Le respire de la section fait tout le travail : c'est une respiration entre les realisations et la demonstration par comparaison, pas un argument de plus. Padding double de celui des autres sections. */ .bigquote { padding-block: 128px; } .bigquote__inner { align-items: center; gap: 40px; padding: 24px var(--gutter); } /* Pleine largeur du conteneur, centre. 900 px plutot que 780 : l'echelle t-quote-lg (40 px) pose la citation sur trois lignes a cette largeur. .bigquote__text porte maintenant directement le

: la citation est anonyme depuis le retrait de la signature, il n'y a plus de figure. */ .bigquote__text { max-width: 900px; text-align: center; text-wrap: balance; } @media (max-width: 767px) { .bigquote { padding-block: 72px; } .bigquote__inner { gap: 28px; } } /* ========================================================================== 11 bis. Preuve par comparaison — tableau a cinq canaux Six criteres en lignes, cinq canaux en colonnes. Vrai : les en-tetes de lignes et de colonnes portent leur scope, un lecteur d'ecran annonce donc « Instagram, On voit votre travail avant de vous parler, Oui ». Sous 768 px le tableau bascule en blocs empiles : chaque cellule reprend son intitule de colonne par ::before (attribut data-col). La derniere colonne (« Notre service ») est detachee en noir : c'est la seule qui coche les six lignes, autant que la lecture le voie tout de suite. ========================================================================== */ .compare__inner { gap: 48px; } .compare__head { width: 100%; text-align: center; } /* Filet de securite : si la fenetre est trop etroite pour les six colonnes entre 768 et ~900 px, le tableau defile pour lui-meme plutot que de pousser la page (le
est en overflow-x: clip, un debordement serait coupe). */ .ctable__scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; } /* min-width calee sur le point de rupture : a 768 px le conteneur offre 680 px de contenu (viewport - 2 x 44 de gouttiere). A 640 px le tableau y tient sans defilement interne, et sous 768 px il bascule de toute facon en blocs empiles. Le conteneur .ctable__scroll ne sert donc que de filet. */ .ctable { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; } /* La colonne des criteres prend le tiers, les cinq canaux se partagent le reste a egalite. */ .ctable th[scope="col"]:first-child { width: 34%; } .ctable thead th { padding: 0 8px 12px; vertical-align: bottom; text-align: center; font-weight: 600; color: var(--gray-700); text-transform: uppercase; letter-spacing: 0.04em; text-wrap: balance; } .ctable tbody tr { border-top: 1px solid var(--gray-200); } .ctable tbody tr:last-child { border-bottom: 1px solid var(--gray-200); } .ctable th[scope="row"] { padding: 18px 24px 18px 0; text-align: left; font-weight: 500; } .ctable td { padding: 18px 8px; text-align: center; vertical-align: middle; } /* Colonne « Notre service » : fond noir plein, coin arrondi en haut et en bas pour qu'elle se lise comme une carte posee par-dessus le tableau. */ .ctable__ours { background: var(--black); color: var(--white); } .ctable thead .ctable__ours { padding-top: 12px; border-radius: 12px 12px 0 0; color: var(--white); } .ctable tbody tr:last-child .ctable__ours { border-radius: 0 0 12px 12px; } /* --- Coches et croix ------------------------------------------------------ Dessinees en CSS plutot qu'en glyphes : ✓ et ✗ n'existent pas dans toutes les polices de la pile et tomberaient sur un repli aux metriques differentes. Le trait suit la couleur du texte, la colonne noire les obtient donc en blanc sans regle supplementaire. */ .mark { position: relative; display: inline-block; width: 16px; height: 16px; vertical-align: middle; } .mark::before, .mark::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; } /* Coche : deux traits, un court et un long, formant un V incline */ .mark--yes::before { width: 2px; height: 7px; left: 3px; top: 6px; transform: rotate(-45deg); transform-origin: bottom center; } .mark--yes::after { width: 2px; height: 13px; left: 9px; top: 1px; transform: rotate(40deg); transform-origin: bottom center; } /* Croix : deux traits croises, en gris pour rester en retrait de la coche */ .mark--no { color: var(--gray-400); } .ctable__ours .mark--no { color: rgba(255, 255, 255, 0.45); } .mark--no::before, .mark--no::after { width: 2px; height: 14px; left: 7px; top: 1px; } .mark--no::before { transform: rotate(45deg); } .mark--no::after { transform: rotate(-45deg); } .compare__close { max-width: 60ch; text-align: center; } @media (max-width: 767px) { /* Bascule en blocs : une carte par critere, les cinq canaux en lignes. Le tableau perd sa mise en forme tabulaire (display: block) mais garde sa semantique — seule la presentation change. */ .ctable__scroll { overflow-x: visible; } .ctable, .ctable tbody, .ctable tr, .ctable th, .ctable td { display: block; width: auto; } .ctable { min-width: 0; } .ctable thead { display: none; } .ctable tbody tr { padding: 4px 0 12px; border-top: 1px solid var(--gray-200); } .ctable tbody tr:last-child { border-bottom: 1px solid var(--gray-200); } .ctable th[scope="row"] { padding: 16px 0 12px; font-weight: 600; } /* Intitule de colonne a gauche, marque a droite */ .ctable td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 7px 0; text-align: left; } .ctable td::before { content: attr(data-col); font-size: 13px; font-weight: 500; color: var(--gray-700); } /* La colonne noire redevient une simple ligne : un aplat noir sur une rangee de 30 px serait une tache. On la marque par le texte en gras et un fond tres clair, coins arrondis. */ .ctable__ours { background: var(--gray-150); color: var(--black); padding-inline: 12px; border-radius: 10px; margin-top: 4px; } .ctable tbody tr:last-child .ctable__ours, .ctable thead .ctable__ours { border-radius: 10px; } .ctable__ours::before { font-weight: 700; color: var(--black); } .ctable__ours .mark--no { color: var(--gray-400); } } /* ========================================================================== 12. Services Deux colonnes : titre + stack a gauche, liste des services a droite. ========================================================================== */ /* Les deux colonnes etaient centrees l'une sur l'autre. Depuis que le titre court « Ce que je livre » a laisse place a une phrase sur deux lignes, la colonne de gauche est presque aussi haute que la liste de droite : on cale les deux en haut, le titre ouvre la section au meme niveau que la premiere prestation. */ .services__inner { flex-direction: row; align-items: flex-start; gap: 64px; } /* Le titre porte desormais la colonne de gauche. Il n'a pas de largeur propre : il se plie a celle de la colonne, le
du balisage ne servant qu'a isoler la seconde moitie de la phrase, en noir. */ .services__title { width: 100%; } @media (max-width: 767px) { .services__inner { flex-direction: column; align-items: flex-start; gap: 40px; } } .services__left { display: flex; flex-direction: column; align-items: flex-start; gap: 64px; flex: 1 1 0; min-width: 0; } @media (max-width: 767px) { .services__left { gap: 40px; } } .techstack { display: flex; flex-direction: column; gap: 16px; width: 100%; } .techstack__logos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .tool { position: relative; display: flex; align-items: center; justify-content: center; } .tool__logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 16px; background: var(--white); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-soft); transition: transform 250ms var(--ease); } .tool:hover .tool__logo { transform: translateY(-4px); } .tool__logo svg { width: 24px; height: 24px; } /* Infobulle : purement CSS, revelee au survol et au focus clavier */ .tool__tip { position: absolute; bottom: calc(100% + 8px); left: 50%; padding: 4px 8px; background: var(--black); color: var(--white); border-radius: 1000px; white-space: nowrap; font-size: 12px; font-weight: 600; letter-spacing: -0.24px; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 200ms var(--ease), transform 200ms var(--ease); } .tool:hover .tool__tip, .tool:focus-within .tool__tip { opacity: 1; transform: translate(-50%, 0); } .services__list { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; width: 100%; } /* La rangee portait un simple libelle ; elle porte maintenant un nom et une description. L'icone reste alignee sur la premiere ligne, pas au centre d'un bloc de deux lignes. */ .service-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--gray-200); transition: padding-left 300ms var(--ease), color 300ms var(--ease); } .service-row:first-child { border-top: 1px solid var(--gray-200); } .service-row:hover { padding-left: 8px; } .service-row__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .service-row__icon { flex: none; width: 18px; height: 18px; margin-top: 6px; opacity: 0; transition: opacity 300ms var(--ease); } .service-row:hover .service-row__icon { opacity: 1; } /* ========================================================================== 13 bis. Processus Cinq etapes numerotees, en rangees separees par un filet, comme la liste des services. Le numero occupe une colonne fixe de 48 px. ========================================================================== */ .process__inner { gap: 48px; } .process__title { width: 100%; text-align: center; } .process { width: 100%; } .process__step { display: flex; align-items: flex-start; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--gray-200); } .process__step:first-child { border-top: 1px solid var(--gray-200); } .process__num { flex: none; width: 48px; padding-top: 4px; color: var(--gray-500); font-variant-numeric: tabular-nums; } .process__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .process__body .t-xs { max-width: 78ch; } /* Precision sur le point de depart du delai, sous les cinq etapes. */ .process__note { width: 100%; max-width: 72ch; margin-top: -16px; /* le gap de .process__inner vaut 48, on le resserre */ } @media (max-width: 767px) { .process__step { gap: 16px; padding: 20px 0; } .process__num { width: 32px; } } /* ========================================================================== 13. About Me — section « Qui suis-je » (#apropos) Ces regles etaient conservees inutilisees depuis le retrait de la section About du template (PROJECT_STATUS §3.4, « pour que ces blocs puissent etre reposes sans les reecrire »). C'est exactement ce qui s'est passe le 16 aout : la section « Qui suis-je » les remet en service telles quelles. Deux ajustements seulement, en fin de bloc : - le parcours (.about__history) passe en bas de section, pleine largeur, alors qu'il vivait dans la colonne de gauche ; - les elements devenus sans objet (pastille reseaux, signature SVG) restent definis mais ne sont plus appeles par le balisage. ========================================================================== */ .about__inner { gap: 64px; align-items: flex-start; } .about__title { align-self: flex-start; } /* Colonnes de l'original : 371 px a gauche, 557 px a droite, gouttiere 64. */ .about__grid { display: grid; grid-template-columns: 371px minmax(0, 1fr); gap: 64px; width: 100%; align-items: start; } @media (max-width: 991px) { .about__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } /* 16 px entre la photo et l'identite, 64 px avant l'historique (original). */ .about__left { display: flex; flex-direction: column; gap: 16px; } .about__portrait { position: relative; border-radius: 16px; overflow: hidden; background: var(--gray-200); aspect-ratio: 371 / 410; } .about__portrait img { width: 100%; height: 100%; object-fit: cover; } /* Pastille reseaux posee en bas a droite de la photo */ .about__socials { position: absolute; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 1000px; } .about__social { display: flex; align-items: center; justify-content: center; gap: 4px; width: 30px; height: 30px; border-radius: 1000px; background: var(--white); transition: background-color 200ms var(--ease), transform 200ms var(--ease); } .about__social:hover { transform: translateY(-2px); } .about__social svg { width: 14px; height: 14px; } .about__social--count { width: auto; padding: 0 10px 0 8px; } .about__ident { display: flex; flex-direction: column; gap: 6px; } /* Le parcours n'est plus dans la colonne de gauche mais en bas de section, sur toute la largeur : la consigne le voulait sous l'image et le texte. Il est donc enfant direct de .about__inner (gap 64), d'ou la marge nulle. */ .about__history { display: flex; flex-direction: column; gap: 16px; width: 100%; } /* --- Pile de cartes « work history » ------------------------------------ Fiche 1 dans le flux, fiches 2 et 3 en absolu derriere elle : 8 px plus bas et 9 px plus etroites de chaque cote a chaque rang. « Show all » deplie la pile en liste verticale. */ .deck { position: relative; } .deck__card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-soft); transition: transform 420ms var(--ease), margin-top 420ms var(--ease), opacity 320ms var(--ease); } .deck__left { display: flex; flex-direction: column; gap: 4px; } /* Etat empile */ .deck__card:not(:first-child) { position: absolute; top: 0; left: 0; right: 0; z-index: calc(3 - var(--i)); transform: translateY(calc(var(--i) * 8px)) scale(calc(1 - var(--i) * 0.049)); } .deck__card:first-child { position: relative; z-index: 3; } /* Etat deplie */ .deck.is-open .deck__card:not(:first-child) { position: relative; transform: none; margin-top: 12px; } .deck__toggle { align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; border-radius: 1000px; color: var(--black); transition: background-color 200ms var(--ease), transform 250ms var(--ease); } .deck__toggle:hover { background: var(--gray-150); } .deck__toggle svg { transition: transform 300ms var(--ease); } .deck__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Le portrait etait en 371 x 410 dans le template ; ici la colonne de gauche est la seule image de la section, on lui rend son format portrait. */ .about__portrait { aspect-ratio: 3 / 4; } /* Colonne droite */ .about__philosophy { display: flex; flex-direction: column; gap: 48px; } .about__bio { display: flex; flex-direction: column; gap: 24px; } .about__signature { display: block; align-self: flex-start; width: 97px; color: var(--black); } .about__signature svg { width: 97px; height: 97px; } /* ========================================================================== 14 bis. Votre presence en ligne Remplace la section « Investissement ». Deux blocs opposes par le contraste : un bloc blanc a trois volets (ce qui est compris) et un bloc noir (ce qui est en option), articules par un « + » isole. Aucun chiffre n'apparait : c'est un inventaire, pas un tarif. ========================================================================== */ .presence__inner { gap: 32px; } /* --- Bloc blanc : trois volets separes par un « + » ---------------------- */ /* Grille explicite plutot que flex : les trois volets doivent faire la meme largeur quel que soit le nombre de lignes de chaque liste, et les deux « + » n'occupent qu'une colonne etroite. */ .presence__pack { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 32px; width: 100%; padding: 40px; background: var(--white); border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--shadow-soft); } .pcol { display: flex; flex-direction: column; gap: 20px; min-width: 0; } .pcol__head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--gray-200); } /* Les « + » de separation, cales sur la premiere ligne de texte du volet */ .pplus { align-self: start; padding-top: 2px; font-size: 24px; font-weight: 500; line-height: 1; color: var(--gray-400); user-select: none; } /* Le « + » isole, entre le bloc blanc et le bloc noir. Plus grand, centre, il marque l'articulation entre ce qui est compris et ce qui s'ajoute. */ .pplus--solo { align-self: center; padding: 0; font-size: 40px; color: var(--gray-500); } /* --- Listes -------------------------------------------------------------- Puce dessinee en pseudo-element : la liste est en list-style: none depuis la reinitialisation, et un tiret cadre mieux avec le reste de la page qu'une puce ronde. */ .plist { display: flex; flex-direction: column; gap: 10px; } .plist li { position: relative; padding-left: 18px; color: var(--gray-700); } .plist li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 8px; height: 1px; background: var(--gray-400); } .plist--dark li { color: rgba(255, 255, 255, 0.75); } .plist--dark li::before { background: rgba(255, 255, 255, 0.45); } /* --- Bloc noir : l'option ------------------------------------------------ */ .presence__extra { display: flex; flex-direction: column; gap: 16px; width: 100%; padding: 40px; background: var(--black); color: var(--white); border-radius: 24px; } .pextra__tag { align-self: flex-start; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 1000px; text-transform: uppercase; letter-spacing: 0.06em; } .pextra__lead { color: rgba(255, 255, 255, 0.85); max-width: 60ch; } .presence__extra .plist { margin-top: 8px; } /* Deux colonnes pour les six lignes : une colonne unique sur toute la largeur du bloc laisserait une grande zone vide a droite. */ .presence__extra .plist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; } @media (max-width: 991px) { /* Les trois volets s'empilent : les « + » passent en separateurs horizontaux, centres entre deux volets. */ .presence__pack { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px; } .pplus { justify-self: center; align-self: center; padding-top: 0; } .presence__extra { padding: 32px; } .presence__extra .plist { grid-template-columns: minmax(0, 1fr); gap: 10px; } } @media (max-width: 767px) { .presence__pack { padding: 24px; border-radius: 20px; } .presence__extra { padding: 24px; border-radius: 20px; } .pplus--solo { font-size: 32px; } } /* ========================================================================== 14. Pricing ========================================================================== */ .pricing__inner { gap: 64px; } .pricing__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; } @media (max-width: 767px) { .pricing__steps { grid-template-columns: minmax(0, 1fr); } } .step { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 16px; } .step__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--white); border: 1px solid var(--gray-200); border-radius: 12px; } .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; } @media (max-width: 991px) { .plans { grid-template-columns: minmax(0, 1fr); } } .plan { display: flex; flex-direction: column; gap: 24px; padding: 32px; border: 1px solid var(--gray-200); border-radius: 24px; background: var(--white); } .plan--dark { background: var(--black); border-color: var(--black); color: var(--white); } .plan__price { display: flex; align-items: baseline; gap: 8px; } .plan__features { display: flex; flex-direction: column; gap: 12px; } .plan__features li { display: flex; align-items: center; gap: 10px; } .plan__features svg { flex: none; width: 18px; height: 18px; } .plan .btn { width: 100%; height: 44px; margin-top: auto; } .plan__cta-dark { background: var(--white); color: var(--black); font-size: 14px; font-weight: 600; } .plan__cta-light { background: var(--black); color: var(--white); font-size: 14px; font-weight: 600; box-shadow: var(--shadow-cta); } .benefits { display: flex; flex-wrap: wrap; gap: 8px; } /* --- Blocs d'introduction centres de la section Pricing ------------------- */ /* Remplacent des attributs style= deplaces depuis index.html (etape B). */ .pricing__head, .pricing__sub { display: flex; flex-direction: column; align-items: center; width: 100%; } .pricing__head { gap: 16px; text-align: center; } .pricing__head p { max-width: 46ch; } .pricing__sub { gap: 24px; } .pricing__sub p { text-align: center; max-width: 34ch; } .pricing__sub .benefits { justify-content: center; } /* Section Investissement : plus de cartes tarifaires, un seul appel a l'action centre sous le texte. */ .invest__cta { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; } .invest__cta .btn { height: 48px; padding-inline: 28px; } .invest__cta .benefits { justify-content: center; } .plan__desc { margin-top: 8px; font-weight: 500; } .plan--dark .plan__desc { color: var(--gray-300); } .plan--dark .plan__features { color: var(--white); } .plan__powered { display: flex; align-items: center; justify-content: center; gap: 6px; } .benefit { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 1000px; border: 1px solid var(--hairline); background: var(--white); } /* ========================================================================== 15. Garantie (ex-Testimonials) Le gabarit de carte (.tcard) est conserve, mais les trois engagements sont poses en grille : deux pistes qui defilent n'avaient de sens que pour une liste longue de temoignages. ========================================================================== */ .testimonials__inner { gap: 48px; } .testimonials__head { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; text-align: center; } .testimonials__head .ticker { width: 100%; } .trusted-item { padding-inline: 16px; } .testimonials__rows { display: flex; flex-direction: column; gap: 24px; width: 100%; } .tcard { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; width: 380px; padding: 24px; background: var(--white); border: 1px solid var(--hairline); border-radius: 16px; transition: border-color 250ms var(--ease), transform 250ms var(--ease); } .tcard:hover { border-color: var(--black); transform: translateY(-3px); } .tcard__quote-mark { color: var(--gray-300); } .tcard__quote-mark svg { width: 24px; height: 24px; } .tcard__client { display: flex; align-items: center; gap: 12px; } .tcard__client img { width: 38px; height: 38px; border-radius: 100%; object-fit: cover; } .tcard__who { display: flex; flex-direction: column; gap: 6px; } @media (max-width: 767px) { .tcard { width: 300px; } } /* --- Grille des trois engagements ------------------------------------------ */ /* .tcard--static libere la largeur fixe de 380 px, calee sur le ticker. */ .guarantees__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; align-items: stretch; } .tcard--static { width: auto; justify-content: flex-start; gap: 16px; } .tcard__mark { color: var(--gray-500); line-height: 0; } .tcard__mark svg { width: 22px; height: 22px; } @media (max-width: 991px) { .guarantees__grid { grid-template-columns: minmax(0, 1fr); } .tcard--static { width: auto; } } /* ========================================================================== 16. FAQ Accordeon natif
/
: accessible, fonctionnel sans JS. L'ouverture est animee via grid-template-rows. ========================================================================== */ .faq__inner { gap: 64px; } .faq__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 64px; width: 100%; align-items: start; } @media (max-width: 991px) { .faq__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } } .faq__list { display: flex; flex-direction: column; width: 100%; } .faq__item { border-bottom: 1px solid var(--gray-200); } .faq__item:first-child { border-top: 1px solid var(--gray-200); } .faq__q { display: flex; align-items: center; gap: 16px; padding: 24px 0; cursor: pointer; list-style: none; transition: color 200ms var(--ease); } .faq__q:hover { color: var(--gray-700); } .faq__num { flex: none; width: 24px; color: var(--gray-500); } .faq__sign { position: relative; flex: none; margin-left: auto; width: 16px; height: 16px; } .faq__sign::before, .faq__sign::after { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 300ms var(--ease); } .faq__sign::after { transform: rotate(90deg); } .faq__item[open] .faq__sign::after { transform: rotate(0deg); } /* Animation de hauteur : la grille passe de 0fr a 1fr */ .faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 350ms var(--ease); } .faq__item[open] .faq__a { grid-template-rows: 1fr; } .faq__a > div { overflow: hidden; } .faq__a p { padding: 0 40px 24px; max-width: 62ch; font-weight: 500; } @media (max-width: 767px) { .faq__a p { padding-inline: 0 0; } } .faq__cta p { font-weight: 500; } /* Le libelle francais est long (« Reserver un creneau · Gratuit, sans engagement ») : le bouton passe en hauteur libre, avec un vrai rembourrage, plutot que de rester bloque a 44 px avec un texte qui deborde. */ .faq__cta .btn { height: auto; min-height: 44px; padding: 12px 20px; text-align: center; } .faq__cta .btn svg { opacity: 0.6; } .faq__cta { margin-top: 32px; display: flex; flex-direction: column; gap: 16px; padding: 32px; background: var(--gray-100); border: 1px solid var(--gray-200); border-radius: 24px; } /* ========================================================================== 17 bis. Appel a l'action final ========================================================================== */ .finalcta__inner { gap: 28px; text-align: center; } .finalcta__title { max-width: 20ch; } .finalcta__lead { max-width: 58ch; } .finalcta .btn-cta { margin-top: 4px; } /* --- 17 ter. Calendrier Cal.com inline ----------------------------------- Depuis le 20 aout, la section #contact ne porte plus un bouton mais le calendrier Cal.com lui-meme (voir le bloc