/* ========================================================================== Sections ajoutées au lot 3 Bandeau de preuve, cas client, méthode, réalisations, et les pages projets.html et technique.html. ========================================================================== */ /* ============ APPARITION AU DÉFILEMENT ============ */ /* Une transition, et non une animation par images-clés. L'élément part de son état masqué et va vers son état visible : il ne repasse jamais par un saut, ce qui supprime le clignotement de l'ancienne implémentation. Le masquage est conditionné à la classe .js-reveal, posée sur par animations.js uniquement lorsqu'il peut garantir la révélation. Sans JavaScript, sans IntersectionObserver, ou si le script échoue, rien n'est masqué et la page reste entièrement lisible. */ .js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } .js-reveal .reveal.est-visible { opacity: 1; transform: none; } /* Décalage en cascade à l'intérieur d'une même grille : les cartes arrivent l'une après l'autre plutôt que toutes ensemble. Le délai est porté par le CSS et non par un style inline, pour rester compatible avec style-src 'self'. */ .js-reveal .reveal.est-visible:nth-child(2) { transition-delay: 0.08s; } .js-reveal .reveal.est-visible:nth-child(3) { transition-delay: 0.16s; } .js-reveal .reveal.est-visible:nth-child(4) { transition-delay: 0.24s; } .js-reveal .reveal.est-visible:nth-child(5) { transition-delay: 0.32s; } .js-reveal .reveal.est-visible:nth-child(6) { transition-delay: 0.40s; } /* Réglage système « réduire les animations » : tout est visible d'emblée. animations.js ne pose de toute façon pas .js-reveal dans ce cas, cette règle est la ceinture qui complète les bretelles. */ @media (prefers-reduced-motion: reduce) { .js-reveal .reveal, .js-reveal .reveal.est-visible { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ============ HERO : VISUEL DE PREUVE ============ */ /* Remplace le logo posé sur une forme organique par une capture réelle du logiciel, cliquable vers la démonstration publique. La colonne de droite est élargie : une capture d'interface a besoin de plus de place qu'un logo pour rester lisible. */ /* min-height: 100vh forçait le hero à la hauteur de l'écran alors que son contenu est plus court, d'où la grande zone vide sous le bouton. La hauteur est désormais dictée par le contenu, avec le rythme vertical des autres sections. */ .home { min-height: 0; align-items: stretch; } .home__container { grid-template-columns: 0.85fr 1.15fr; width: 100%; } /* Ce passage sur une colonne est déjà écrit dans main.css, mais il y était sans effet : la règle deux colonnes ci-dessus est plus tardive dans l'ordre de chargement, à spécificité égale, et une media query n'ajoute pas de spécificité. Le hero restait donc en deux colonnes sur téléphone, réduites à 197 et 217 px sur un écran de 390, ce qui coupait la capture et hachait le titre. La reprise doit rester dans ce fichier pour passer après. Le seuil est à 968 et non à 768 comme l'annonçait main.css : à 800 px la colonne de texte tombe à 330 px, et le titre s'y brise en sept lignes dont une ne portant que « à ». 968 est déjà le seuil des autres grilles de ce fichier, plus bas : cas client, méthode, réalisations, bandeau de preuve. */ @media screen and (max-width: 968px) { .home__container { grid-template-columns: 1fr; gap: var(--space-8); } } .home__preuve { margin: 0; z-index: 2; } /* ---- Cadre de navigateur ---- Dessiné en CSS et non incrusté dans l'image : il reste net à toutes les résolutions, suit la charte, et l'image reste remplaçable sans retouche. */ .fenetre { border-radius: var(--radius-xl); overflow: hidden; background: var(--bg-primary); border: var(--border-width) solid var(--border-color); box-shadow: var(--shadow-2xl); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .fenetre:hover { transform: translateY(-4px); box-shadow: var(--shadow-2xl), var(--shadow-colored); } .fenetre__barre { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--bg-secondary); border-bottom: var(--border-width) solid var(--border-color); } /* Les trois pastilles d'une fenêtre, en un seul élément via des dégradés radiaux : trois décoratifs de plus n'apporteraient rien au balisage. */ .fenetre__pastilles { flex-shrink: 0; width: 46px; height: 10px; background: radial-gradient(circle 5px at 5px 5px, #ef4444 98%, transparent) 0 0 / 18px 10px no-repeat, radial-gradient(circle 5px at 5px 5px, #f59e0b 98%, transparent) 18px 0 / 18px 10px no-repeat, radial-gradient(circle 5px at 5px 5px, #10b981 98%, transparent) 36px 0 / 10px 10px no-repeat; } .fenetre__url { flex: 1; padding: var(--space-1) var(--space-3); background: var(--bg-primary); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-full); font-size: var(--font-xs); color: var(--text-light); text-align: center; max-width: 22rem; margin-inline: auto; } .fenetre__vue { display: block; } .fenetre__vue img { display: block; width: 100%; height: auto; } .home__preuve-legende { margin-top: var(--space-5); font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.7; } .home__preuve-legende strong { color: var(--text-primary); font-weight: var(--font-semibold); } .home__preuve-legende a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--primary-color); font-weight: var(--font-medium); text-decoration: none; white-space: nowrap; } .home__preuve-legende a:hover { text-decoration: underline; } /* ---- Cadre de téléphone ---- Pendant du cadre de navigateur, pour les captures d'applications mobiles. Dessiné en CSS : la capture d'origine porte la barre d'état et la barre de navigation du téléphone, retirées au recadrage pour ne pas les redoubler. */ .telephone { width: 100%; max-width: 300px; margin-inline: auto; padding: 10px 8px; background: var(--text-primary); border-radius: var(--radius-2xl); box-shadow: var(--shadow-2xl); } .telephone::before { content: ''; display: block; width: 60px; height: 5px; margin: 0 auto 8px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.25); } .telephone__vue { display: block; border-radius: var(--radius-lg); overflow: hidden; } .telephone__vue img { display: block; width: 100%; height: auto; } /* ============ BANDEAU DE PREUVE ============ */ .preuve { padding-block: var(--space-12); background: var(--bg-secondary); border-block: var(--border-width) solid var(--border-color); } .preuve__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); } .preuve__item { display: flex; flex-direction: column; gap: var(--space-1); padding-left: var(--space-5); border-left: 3px solid var(--primary-color); } .preuve__chiffre { font-size: var(--font-4xl); font-weight: var(--font-bold); line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .preuve__label { font-size: var(--font-base); font-weight: var(--font-semibold); color: var(--text-primary); } .preuve__detail { font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.6; } /* ============ CAS CLIENT ============ */ .cas__container { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; } .cas__bloc { margin-bottom: var(--space-8); } .cas__bloc-titre { font-size: var(--font-sm); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--primary-color); margin-bottom: var(--space-3); } .cas__bloc p { color: var(--text-secondary); line-height: 1.8; } .cas__bloc p+p { margin-top: var(--space-4); } .cas__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } .cas__liste li { position: relative; padding-left: var(--space-6); color: var(--text-secondary); line-height: 1.7; } .cas__liste li::before { content: '\2713'; position: absolute; left: 0; color: var(--primary-color); font-weight: var(--font-bold); } .cas__liste strong, .cas__bloc strong { color: var(--text-primary); font-weight: var(--font-semibold); } .cas__chute { margin-top: var(--space-4); padding: var(--space-5); background: var(--bg-gradient-light); border-left: 3px solid var(--secondary-color); border-radius: var(--radius-lg); } .cas__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-8); } .cas__actions .btn { gap: var(--space-2); } .cas__actions-note { font-size: var(--font-sm); color: var(--text-light); max-width: 34ch; line-height: 1.5; } /* Encart client, collant au défilement sur grand écran */ .cas__client { position: sticky; top: calc(var(--header-height) + var(--space-6)); padding: var(--space-6); background: var(--bg-primary); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .cas__client-intro { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); margin-bottom: var(--space-3); } .cas__client-logo { display: block; width: 100%; max-width: 200px; height: auto; margin-bottom: var(--space-4); } .cas__client-texte { font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.7; } .cas__client-texte a { color: var(--primary-color); font-weight: var(--font-medium); } /* ============ MÉTHODE ============ */ .methode { background: var(--bg-secondary); } .methode__container { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } .methode__card { padding: var(--space-6); background: var(--bg-primary); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } .methode__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: var(--bg-gradient-light); color: var(--primary-color); font-size: 1.5rem; } .methode__title { font-size: var(--font-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-3); } .methode__card p { color: var(--text-secondary); line-height: 1.75; } /* ============ RÉALISATIONS ============ */ .realisations__grille { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .realisation { display: flex; flex-direction: column; padding: var(--space-6); background: var(--bg-primary); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); transition: transform var(--transition-normal), box-shadow var(--transition-normal); } .realisation:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .realisation__famille { font-size: var(--font-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--primary-color); margin-bottom: var(--space-2); } .realisation__titre { font-size: var(--font-xl); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-2); } .realisation__texte { flex: 1; color: var(--text-secondary); font-size: var(--font-sm); line-height: 1.7; margin-bottom: var(--space-4); } .realisation__lien { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--font-sm); font-weight: var(--font-medium); color: var(--primary-color); text-decoration: none; } .realisation__lien:hover { text-decoration: underline; } .realisation__lien--muet { color: var(--text-light); font-weight: var(--font-normal); font-style: italic; } .realisations__suite { margin-top: var(--space-10); text-align: center; } .realisations__suite .btn { gap: var(--space-2); } /* ============ À PROPOS RACCOURCI ============ */ /* L'emplacement portait un logo, traité comme une illustration. C'est désormais un portrait : cadrage carré, ombre plus discrète, et une taille qui ne prend pas le pas sur le texte. La phrase « la personne à qui vous parlez est celle qui écrit le code » a besoin d'un visage, pas d'une image de marque. */ /* La colonne de gauche porte le portrait et les reperes d'identite : ils vont ensemble, et ensemble ils remplissent la colonne au lieu de laisser la photo flotter au-dessus d'un vide. */ .about--court .about__image { display: grid; gap: var(--space-6); justify-items: start; text-align: left; } .about--court .about__img { max-width: 100%; /* Pas de ratio impose : la photo a ete elargie a droite pour equilibrer le cadrage, un recadrage carre annulerait ce reglage. */ border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); } .about--court .about__img:hover { transform: none; box-shadow: var(--shadow-lg); } .about--court .about__description p { color: var(--text-secondary); line-height: 1.8; } .about__reperes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); } /* Ces trois lignes portent l'information dure de la section : le diplome, le lieu, l'infrastructure. Elles etaient plus petites et plus claires que le corps de texte, donc lues en dernier alors qu'elles se scannent en premier. Meme taille, meme gris, et un libelle en gras pour accrocher l'oeil. */ .about__repere { display: flex; align-items: flex-start; gap: var(--space-3); color: var(--text-secondary); line-height: 1.7; } .about__repere strong { color: var(--text-primary); font-weight: var(--font-semibold); } .about__repere .icon { flex-shrink: 0; margin-top: 0.2em; font-size: 1.15rem; color: var(--primary-color); } .about__technique { padding: var(--space-4); background: var(--bg-secondary); border-radius: var(--radius-lg); font-size: var(--font-sm); color: var(--text-secondary); line-height: 1.7; } .about__technique a { color: var(--primary-color); font-weight: var(--font-medium); } /* ============ ADAPTATION AUX PETITS ÉCRANS ============ */ @media screen and (max-width: 968px) { .preuve__liste, .methode__container, .realisations__grille { grid-template-columns: 1fr; } .cas__container { grid-template-columns: 1fr; gap: var(--space-8); } /* Sur une colonne, l'encart collant gênerait la lecture. */ .cas__client { position: static; } } @media screen and (max-width: 640px) { .preuve__chiffre { font-size: var(--font-3xl); } .cas__actions { flex-direction: column; align-items: stretch; } .cas__actions-note { max-width: none; } }