/* ========================================================================== Tech Companion — feuille de style dédiée -------------------------------------------------------------------------- Cette feuille est autonome : elle n'étend aucune feuille existante du site et n'est chargée que par index.html. Elle établit les nouvelles conventions visuelles du site (voir CONSIGNES-TECH-COMPANION.md). État actuel : fondations uniquement — variables, échelle typographique, grille, composants réutilisables (§5) et pied de page hérité. Les styles propres à chacune des neuf sections de contenu (§6) seront ajoutés section par section. Les deux polices (Stack Sans Notch, Stack Sans Headline) sont chargées depuis Google Fonts par dans le de la page — voir le commentaire dédié dans index.html. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Reset minimal -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } /* -------------------------------------------------------------------------- 2. Jetons de couleur (§2) -------------------------------------------------------------------------- */ :root { --igni-black: #2C2A29; /* fond général, anthracite de charte */ --igni-white: #EAEAEA; /* texte courant */ --ign-light-orange: #FC4100; /* accent Tech Companion */ --igni-blue: #005FBE; /* bleu de charte, dégradé section réseaux */ --ign-light-blue: #0083D7; /* accent bleu clair, pictos et libellé Prouver */ --ign-grey-row: #4A4A4A; /* fond des lignes de l'inventaire fonctionnel */ --ign-salmon: #FFA599; /* mention discrète sur fond orange */ /* Deux niveaux de blanc : pleine intensité pour titres/surtitres/boutons (--igni-white), 80 % pour le corps de texte (--igni-white-muted). En couleur plutôt qu'en opacité, pour ne pas assombrir d'éventuels enfants (liens, mise en gras) au passage. */ --igni-white-muted: rgba(234, 234, 234, 0.8); /* Grille et rythme (§4) */ --content-max-width: 1280px; --section-padding-y: 120px; /* Rythme différencié : Sécuriser/Prouver et « Ce qui change » s'écartent de la marge de section standard (voir .section--valeur et .section--ce-qui-change). */ --section-padding-y-valeur: 160px; --section-padding-y-change: 100px; --section-padding-x: 10px; --gap-cards: 15px; --gap-title-cards: 30px; --gap-heading-block: 80px; /* écart titre → bloc de contenu, §6.4 et §6.8 */ --radius-card: 25px; --radius-row: 13px; --radius-btn: 21.5px; } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ body { background-color: var(--igni-black); color: var(--igni-white); font-family: 'Stack Sans Headline', sans-serif; font-weight: 200; font-size: 16px; line-height: 1.25; -webkit-font-smoothing: antialiased; /* Filet de sécurité : empêche un élément trop large d'ouvrir un défilement horizontal sur toute la page (cause réelle traitée au §10, pied de page mobile). */ overflow-x: hidden; } /* -------------------------------------------------------------------------- 4. Échelle typographique (§3) -------------------------------------------------------------------------- */ .text-display { font-family: 'Stack Sans Notch', sans-serif; font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: 0; } .text-heading-2 { font-family: 'Stack Sans Notch', sans-serif; font-size: 40px; font-weight: 200; line-height: 1; letter-spacing: -0.8px; } .text-heading-3 { font-family: 'Stack Sans Headline', sans-serif; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.48px; } .text-overline { font-family: 'Stack Sans Headline', sans-serif; font-size: 16px; font-weight: 700; line-height: normal; letter-spacing: -0.32px; /* Couleur pleine intensité explicite : les surtitres Sécuriser/Prouver ne passent pas par cette classe (ils utilisent .text-heading-3 + leur propre couleur, §7.3, pour se distinguer volontairement des autres). */ color: var(--igni-white); } .text-body { font-family: 'Stack Sans Headline', sans-serif; font-size: 16px; font-weight: 200; line-height: 1.5; letter-spacing: 0; color: var(--igni-white-muted); } .text-small { font-family: 'Stack Sans Headline', sans-serif; font-size: 12px; font-weight: 200; line-height: 1.25; letter-spacing: 0; } /* Paragraphes multiples dans un même bloc : 15 px sous chaque paragraphe sauf le dernier. */ p:not(:last-child) { margin-bottom: 15px; } /* -------------------------------------------------------------------------- 5. Grille et rythme (§4) -------------------------------------------------------------------------- */ .container { max-width: var(--content-max-width); margin-inline: auto; padding-inline: var(--section-padding-x); } .section { position: relative; background-color: var(--igni-black); padding-block: var(--section-padding-y); } /* -------------------------------------------------------------------------- 6. Composants (§5) -------------------------------------------------------------------------- */ /* 6.1 — Barre de navigation (§5.1) Fixe en permanence : elle ne quitte jamais l'écran, sinon elle semble disparaître au défilement puis réapparaître — l'impression d'un second header. Seule son apparence change, par transition : - en haut de page, superposée au hero : fond transparent, simple voile dégradé pour la lisibilité, sans bouton (le hero porte déjà le sien) ; - une fois défilée : fond anthracite opaque ; - une fois le bouton du hero sorti de l'écran : le bouton de la nav prend le relais. */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; height: 80px; padding: 10px 30px; background-color: transparent; transition: background-color 300ms ease, box-shadow 300ms ease; } /* Le voile dégradé (anthracite en haut, transparent en bas) rend le logo lisible sur un hero clair. Il est porté par un pseudo-élément plutôt que par la nav elle-même pour pouvoir être fondu vers le fond opaque : deux `background-image` ne se transitionnent pas entre eux. */ .nav::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(44, 42, 41, 0.75), rgba(44, 42, 41, 0)); transition: opacity 300ms ease; pointer-events: none; } .nav.is-scrolled { background-color: rgba(44, 42, 41, 0.94); box-shadow: 0 1px 0 rgba(234, 234, 234, 0.08); } .nav.is-scrolled::before { opacity: 0; } @supports (backdrop-filter: blur(12px)) or (-webkit-backdrop-filter: blur(12px)) { .nav.is-scrolled { background-color: rgba(44, 42, 41, 0.82); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } } .nav__brand { display: flex; align-items: center; gap: 20px; position: relative; } .nav__logo { height: 40px; width: auto; } .nav__powered { opacity: 0.7; display: flex; align-items: center; } .nav__powered img { height: 24px; width: auto; } /* Le bouton de la nav n'apparaît qu'une fois celui du hero sorti de l'écran (classe posée en JavaScript, js/tech-companion.js) : les deux sont identiques, pas besoin des deux à l'écran en même temps. Il descend depuis le haut à l'apparition, rapide au début puis freiné en fin de course (ease-out), plutôt qu'un simple fondu. */ .nav__cta { position: relative; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-16px); transition: opacity 200ms ease, transform 300ms ease-out, visibility 0s 200ms; } .nav.is-cta-visible .nav__cta { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: opacity 200ms ease, transform 300ms ease-out, visibility 0s; } @media (prefers-reduced-motion: reduce) { .nav, .nav::before, .nav__cta, .nav.is-cta-visible .nav__cta { transition: none; } } /* 6.2 — Boutons (§5.2, §5.3) Interactions communes aux deux boutons, définies une seule fois ici et valables partout où .btn apparaît (nav, hero, réseaux, action finale) : - survol : densification du fond translucide uniquement (pas d'agrandissement, pas d'ombre, pas de changement de couleur de bordure, pas de déplacement) ; - clic : léger enfoncement (1 px vers le bas, 80 ms) ; - focus clavier : contour clair, visible, décalé de 2 px ; - curseur pointer. */ .btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius-btn); font-family: 'Stack Sans Headline', sans-serif; font-weight: 200; font-size: 16px; line-height: 1.25; text-align: center; color: var(--igni-white); white-space: nowrap; cursor: pointer; transition: background-color 200ms ease, transform 80ms ease, opacity 200ms ease; } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: 2px solid var(--igni-white); outline-offset: 2px; } .btn--primary { border: 3px solid var(--ign-light-orange); background-color: rgba(252, 65, 0, 0.4); } .btn--primary:hover { background-color: rgba(252, 65, 0, 0.7); } .btn--secondary { border: 3px solid var(--igni-white); background-color: rgba(44, 42, 41, 0.2); } .btn--secondary:hover { background-color: rgba(44, 42, 41, 0.35); } /* Variante fond plein, utilisée pour « Réserver une démonstration » dans l'action finale (§7.9) : la densification de fond des autres boutons ne s'applique pas à un fond déjà à pleine opacité, d'où un simple fondu au survol à la place. */ .btn--white { border: 3px solid var(--igni-white); background-color: var(--igni-white); color: var(--ign-light-orange); font-weight: 500; } .btn--white:hover { opacity: 0.85; } /* Variante utilisée dans la section réseaux (§5.3, §6.6) */ .btn--secondary.btn--secondary-subtle { background-color: rgba(44, 42, 41, 0.1); } .btn--secondary.btn--secondary-subtle:hover { background-color: rgba(44, 42, 41, 0.2); } /* 6.3 — Pastille de picto (§5.4) */ .badge { flex-shrink: 0; width: 56px; height: 56px; border-radius: 100px; display: flex; align-items: center; justify-content: center; } /* Les pictos conservent leurs dimensions propres : pas de taille forcée ici. */ .badge--orange { background-color: var(--ign-light-orange); } .badge--blue { background-color: var(--ign-light-blue); } /* Composant « carte à illustration » (§5.5) retiré : plus utilisé nulle part depuis la refonte de « Ce qui change » (texte et visuel détachés, voir §7.4) — image, badge et texte y sont désormais des enfants directs de .change__item, sans fond ni bordure. */ /* 6.5 — Carte simple (§5.6), utilisée dans la section Réseaux */ .card--simple { flex: 1 1 0%; height: 300px; border-radius: var(--radius-card); padding: 30px 20px; display: flex; flex-direction: column; gap: 25px; } /* 6.6 — Ligne d'inventaire (§5.7), utilisée dans « Ce que l'application couvre » */ .row-inventory { border: 1px solid #959494; background-color: rgba(149, 148, 148, 0.2); border-radius: var(--radius-row); padding: 15px 30px; } /* -------------------------------------------------------------------------- 7. Sections de contenu (§6) -------------------------------------------------------------------------- */ /* 7.1 — Hero (§6.1), hauteur 1024 px. Fond en couverture + voile dégradé, contenu aligné en bas et réparti entre les deux extrémités (texte à gauche, largeur 740 px ; visuel à droite). Le passage de la nav en fond opaque au défilement (§5.1) sera câblé en JavaScript dans une prochaine passe. */ .section--hero { height: 1024px; padding-top: 0; padding-bottom: var(--section-padding-y); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background-image: linear-gradient(180deg, rgba(44, 42, 41, 0) 22.6%, var(--igni-black) 100%), url('../images/hero-diagnostic.png'); background-size: cover; /* Image de fond ancrée en haut : si la hauteur de la section vient à réduire (futurs points de rupture, §9), c'est son bas qui sort du cadre, jamais le haut. */ background-position: center top; } .hero__inner { height: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .hero__text { align-items: flex-start; /* les enfants (dont le bouton) ne s'étirent pas sur la largeur */ display: flex; flex-direction: column; gap: 20px; width: 740px; } .hero__group { display: flex; flex-direction: column; gap: 10px; } /* Taille non précisée dans les consignes (contrairement à schema-ecosysteme.png, §7) : approximée depuis la maquette, à confirmer visuellement. */ .hero__visual { width: 380px; height: auto; } /* 7.2 — Problème (§6.2), hauteur 515 px. Hauteur non forcée : elle résulte naturellement du rythme de section (120 px, hérité de .section) plus le bloc intérieur ci-dessous — avec le texte du contenu final, le total retombe sur les 515 px de la maquette. */ .probleme__panel { display: flex; align-items: flex-start; gap: 25px; padding: 60px 50px; border-radius: 20px; /* Ni fond ni bordure : vérifié par échantillonnage de pixels sur la maquette, le bloc est invisible malgré le rayon prévu au §6.2. Gardé tel quel, prêt si un fond est ajouté plus tard. */ } .probleme__col--text { width: 740px; flex-shrink: 0; } .probleme__col--body { flex: 1; } /* 7.3 — Bloc « créations de valeur » (§6.3), hauteur 1962 px. Conteneur commun à Sécuriser et Prouver, qui n'ont pas de fond propre. Marge de section plus large que la normale (160 px, --section-padding-y- valeur) : la hauteur totale s'en trouve donc augmentée de 80 px par rapport à la valeur de la maquette. */ .section--valeur { padding-block: var(--section-padding-y-valeur); /* Calque de transition par-dessus le visuel : anthracite plein en haut et en bas (raccord avec les sections voisines), passage court (10 % de la hauteur du bloc de chaque côté) vers un voile anthracite à 90 % d'opacité qui couvre les 80 % du milieu du bloc. */ background-image: linear-gradient( 180deg, var(--igni-black) 0%, rgba(44, 42, 41, 0.9) 10%, rgba(44, 42, 41, 0.9) 90%, var(--igni-black) 100% ), url('../images/img-perforations.png'); background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; background-position: center, center; } .valeur__inner { display: flex; flex-direction: column; /* Écart entre Sécuriser et Prouver non précisé au §6.3 : repris du rythme de section standard (120 px, §4). */ gap: var(--section-padding-y); } /* Sécuriser (visuel puis texte) et Prouver (texte puis visuel, « composition inversée ») partagent la même structure : l'ordre visuel vient de l'ordre des enfants dans le HTML, pas d'une classe de variante. */ .value-block { display: flex; align-items: center; gap: 50px; } .value-block__visual { width: 740px; flex-shrink: 0; height: auto; } .value-block__text { flex: 1; display: flex; flex-direction: column; gap: var(--gap-title-cards); } .value-block__title { display: flex; flex-direction: column; gap: 10px; } .value-block__overline--orange { color: var(--ign-light-orange); } .value-block__overline--blue { color: var(--ign-light-blue); } .value-block__cards { display: flex; flex-direction: column; gap: 20px; } /* Écart interne badge / titre / texte non précisé aux consignes : repris du rythme de 15 px déjà utilisé entre paragraphes (§3). */ .value-card { display: flex; flex-direction: column; gap: 15px; } /* 7.4 — Ce qui change (§6.4), hauteur 1465 px. Marge de section plus courte que la normale (100 px, --section-padding-y- change) : la hauteur totale s'en trouve donc réduite de 40 px par rapport à la valeur de la maquette. */ .section--ce-qui-change { padding-block: var(--section-padding-y-change); } .change__heading { text-align: center; } /* Quatre blocs côte à côte, sans contour ni fond (même traitement que les cartes de la section Réseaux, §5.6) : badge, titre et texte, puis le visuel détaché en dessous, au format carré. */ .change__grid { margin-top: var(--gap-heading-block); display: flex; gap: var(--gap-cards); } .change__item { flex: 1; /* Étire chaque bloc à la hauteur du plus haut (comportement par défaut de align-items sur .change__grid, non redéfini). */ display: flex; flex-direction: column; gap: 25px; } .change__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-card); /* Absorbe l'espace restant une fois le bloc étiré à la hauteur du plus haut : le texte reste calé en haut, l'image se cale en bas — jamais de décalage entre les visuels d'un bloc à l'autre. */ margin-top: auto; } /* 7.5 — Écosystème IGNISCIA (§6.5), hauteur 850 px. Fond retiré à la demande : la section revient au fond anthracite uni hérité de .section. Le voile qui accompagnait img-vis.png n'a plus lieu d'être : sans image, sa zone « transparente » ne faisait que révéler la même couleur anthracite, sans aucun effet visible. */ .ecosysteme__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .ecosysteme__text { width: 525px; flex-shrink: 0; display: flex; flex-direction: column; gap: 20px; } .ecosysteme__title { display: flex; flex-direction: column; gap: 10px; } .ecosysteme__visual { width: 670px; height: 582px; flex-shrink: 0; } /* 7.6 — Pour les réseaux (§6.6), hauteur 811 px. */ .section--reseaux { background-image: linear-gradient(180deg, var(--igni-black), var(--igni-blue)); } .reseaux__inner { display: flex; flex-direction: column; align-items: center; } .reseaux__title { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .reseaux__cards { align-self: stretch; display: flex; gap: var(--gap-cards); /* Écart bloc de titre → cartes non précisé aux consignes : repris de --gap-title-cards (§4), déjà utilisé pour ce même type de transition. */ margin-top: var(--gap-title-cards); } .reseaux__cta { /* Écart cartes → bouton non précisé aux consignes : repris des 60 px déjà utilisés comme marge de bloc intérieur (§6.2). */ margin-top: 60px; } /* 7.7 — Application de terrain (§6.7), hauteur 735 px. photo-terrain.png à 20 % d'opacité : posée en fond d'un ::before plutôt que directement sur la section, pour ne réduire que l'opacité du visuel sans toucher au texte par-dessus. */ .section--terrain { position: relative; } .section--terrain::before { content: ""; position: absolute; inset: 0; background-image: url('../images/photo-terrain.png'); background-size: cover; background-position: center; opacity: 0.2; } .section--terrain > .container { position: relative; } /* Les deux blocs ne sont pas côte à côte : dans la maquette, ils sont empilés verticalement, le premier ancré à gauche, le second à droite, séparés de 120 px. */ .terrain__inner { display: flex; flex-direction: column; gap: 120px; } .terrain__block { display: flex; flex-direction: column; gap: 20px; } .terrain__block--left { align-self: flex-start; width: 525px; } .terrain__block--right { align-self: flex-end; width: 526px; text-align: right; } /* 7.8 — Fonctionnalités (§6.8), hauteur 1043 px. Fond en dégradé bleu → anthracite. Liste déroulante à la demande : le déclencheur n'est plus un bouton mais du texte cliquable (même style que le contenu des lignes d'inventaire, §5.7), replié par défaut via JavaScript (voir le commentaire dans le HTML). */ .section--fonctionnalites { background-image: linear-gradient(180deg, var(--igni-blue), var(--igni-black)); } .fonctionnalites__intro { margin-top: 20px; } .fonctionnalites__toggle { margin-top: var(--gap-title-cards); display: inline-block; padding: 0; border: none; background: none; color: var(--igni-white); font-family: 'Stack Sans Headline', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -0.32px; cursor: pointer; transition: opacity 200ms ease; } .fonctionnalites__toggle:hover { opacity: 0.7; } .fonctionnalites__list { margin-top: var(--gap-title-cards); overflow: hidden; /* Deux colonnes, ordre de lecture horizontal : la grille place 1 et 2 sur le premier rang, 3 et 4 sur le second, etc., sans avoir à réordonner les éléments. La 13e ligne, seule, retombe naturellement en colonne 1 du dernier rang, alignée à gauche (comportement par défaut de justify-items, non redéfini). L'écart entre lignes vient uniquement de row-gap ci-dessous : l'ancienne règle .row-inventory + .row-inventory (margin-top) aurait doublé l'écart et décalé la colonne de droite par rapport à celle de gauche sur un même rang — retirée. */ display: grid; grid-template-columns: 1fr 1fr; column-gap: 15px; row-gap: 5px; /* max-height posé en JavaScript à chaque bascule (scrollHeight réel), transitionné ici pour un déroulement fluide plutôt qu'instantané. */ transition: max-height 400ms ease; } /* 7.9 — Action finale (§6.9), hauteur 497 px. */ .section--action-finale { background-image: linear-gradient(180deg, var(--igni-black), var(--ign-light-orange)); } .action-finale__inner { width: 100%; max-width: 848px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--gap-title-cards); } /* Heading-2, Body et mention Small forment un même groupe de titre : écart plus court entre eux (10 px, comme les autres groupes de textes de la page) que vers le bouton ou le bloc tarifaire. */ .action-finale__text { display: flex; flex-direction: column; gap: 10px; } .action-finale__mention { color: var(--ign-salmon); } .action-finale__buttons { display: flex; gap: 20px; } .action-finale__pricing-link { text-decoration: underline; } /* -------------------------------------------------------------------------- 8. Pied de page — propre à Tech Companion -------------------------------------------------------------------------- Le pied de page hérité du site IGNISCIA (Webflow) a été abandonné au profit d'un pied de page propre, construit avec les conventions de cette feuille (variables, échelle typographique). Les liens vers le site IGNISCIA (politiques, logo « Powered by », bloc « Nous contacter ») restent les mêmes que sur le site IGNISCIA — seuls le fond et la mise en forme changent. -------------------------------------------------------------------------- */ .footer { position: relative; /* Pas de padding-top ici : le trait de séparation (posé sur .footer__inner ci-dessous, avec sa propre marge intérieure) doit toucher le tout haut de la section, comme sur la maquette. */ padding-top: 0; padding-bottom: var(--section-padding-y); /* img-perforations.png retournée en paysage (rotation 90°, fichier dédié img-perforations-landscape.png) : l'original est en portrait, pensé pour la section Sécuriser/Prouver. Calque dégradé par-dessus, orange en haut vers anthracite à 90 % d'opacité en bas (même valeur que le calque de Sécuriser/Prouver, §7.3). */ background-image: linear-gradient(180deg, var(--ign-light-orange), rgba(44, 42, 41, 0.9)), url('../images/img-perforations-landscape.png'); background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; background-position: center, center; } .footer__inner { display: flex; flex-direction: column; gap: 60px; /* Trait de séparation à la même largeur que le reste du contenu du site : posé ici plutôt que sur .footer (pleine largeur), puisque .footer__inner porte déjà .container (max-width 1280px, centré). 1 px, le blanc de la page — pas le blanc atténué du corps de texte. padding-top recrée l'écart avec le logo en dessous, puisque .footer n'a plus de marge en haut (le trait doit toucher le tout haut de la section). */ border-top: 1px solid var(--igni-white); padding-top: 60px; } .footer__brand { display: flex; align-items: center; justify-content: space-between; } .footer__logo { height: 40px; width: auto; } .footer__powered { opacity: 0.7; display: flex; align-items: center; } .footer__powered img { height: 24px; width: auto; } .footer__columns { display: flex; justify-content: space-between; gap: 40px; } .footer__legals { display: flex; flex-direction: column; gap: 5px; } .footer__aside { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 30px; } .footer__policies, .footer__contact { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; } /* Corps du pied de page en blanc atténué (comme le corps de texte, §4) : seuls « IGNISCIA » et « NOUS CONTACTER » (.text-overline) restent à pleine intensité. */ .footer .text-small { color: var(--igni-white-muted); } .footer__link:hover { text-decoration: underline; } .footer__socials { display: flex; gap: 16px; margin-top: 5px; } .footer__socials img { width: 32px; height: 32px; opacity: 0.8; } .footer__credit { color: var(--igni-white-muted); } /* -------------------------------------------------------------------------- 9. Animations d'apparition au défilement -------------------------------------------------------------------------- IntersectionObserver natif + CSS uniquement (js/tech-companion.js), sans bibliothèque. Effet : fondu + léger déplacement vertical (24px), 500 ms, courbe douce en sortie. Déclenché une seule fois, quand l'élément est entré à environ 15 % dans la fenêtre (ne se rejoue jamais au défilement inverse). Concerné : images de contenu, cartes à illustration, cartes réseaux, schéma d'écosystème, blocs de texte de la section terrain. Ni le hero (sauf son visuel, déclenché à l'ouverture — voir plus bas), ni les titres de section, ni les fonds. -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 500ms ease-out, transform 500ms ease-out; } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* Décalage de 90 ms entre blocs d'un même rang : « Ce qui change » (quatre blocs sur un seul rang, depuis la refonte en ligne, §7.4) et les 4 cartes réseaux suivent la même logique, via leur position 1 à 4. */ .change__grid .change__item:nth-child(1) { transition-delay: 0ms; } .change__grid .change__item:nth-child(2) { transition-delay: 90ms; } .change__grid .change__item:nth-child(3) { transition-delay: 180ms; } .change__grid .change__item:nth-child(4) { transition-delay: 270ms; } .reseaux__cards .card--simple:nth-child(1) { transition-delay: 0ms; } .reseaux__cards .card--simple:nth-child(2) { transition-delay: 90ms; } .reseaux__cards .card--simple:nth-child(3) { transition-delay: 180ms; } .reseaux__cards .card--simple:nth-child(4) { transition-delay: 270ms; } /* Préférence de mouvement réduit : désactive entièrement l'effet, y compris le visuel du hero ci-dessous — l'élément est toujours dans son état final, sans transition. */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } /* -------------------------------------------------------------------------- 10. Adaptation mobile et tablette (§9) -------------------------------------------------------------------------- Aucune maquette mobile n'existe : adaptation proposée à partir des règles du §9, à vérifier sur téléphone réel. Deux paliers : ≤1024px regroupe les changements structurels (tablette + mobile, là où les largeurs fixes du desktop ne rentrent plus) ; ≤640px affine pour le téléphone (échelle typographique, nav, tailles de visuel). -------------------------------------------------------------------------- */ @media (max-width: 1024px) { /* --- Pastilles de picto (§5.4), toutes sections --- La pastille (56px) et le SVG qu'elle contient sont deux choses distinctes : le SVG s'affiche à sa taille propre (elle varie d'un picto à l'autre, §5.4), jamais mise à l'échelle de la pastille. Réduire la pastille seule ne change donc rien au picto — d'où le transform: scale, qui réduit chaque picto à 75 % de sa taille native quelle qu'elle soit, sans avoir à la connaître ni en forcer une uniforme. La pastille est réduite au même taux (75 % de 56px) : à la précédente valeur (28px, calée sur un ancien taux de 50 %), elle ne suivait plus le picto une fois celui-ci repassé à 75 % — c'est ce décalage qui donnait l'impression que la pastille n'avait pas bougé et que « Une valeur qui croît avec le réseau » (le picto le plus large, 40px de base) débordait sans sembler agrandi. */ .badge { width: 42px; height: 42px; } .badge img { transform: scale(0.75); } /* Les trois valeurs de rythme vertical divisées par deux, à l'identique : l'écart relatif entre elles (160 / 120 / 100) est donc conservé. */ :root { --section-padding-y: 60px; --section-padding-y-valeur: 80px; --section-padding-y-change: 50px; } /* --- Hero (6.1) --- */ .section--hero { height: auto; /* Hauteur proche de celle de l'écran d'un téléphone, sans valeur figée (min-height, pas height : un texte plus long peut encore agrandir la section plutôt que d'être coupé). */ min-height: 100vh; min-height: 100dvh; } .hero__inner { flex-direction: column; align-items: flex-start; /* Bloc de contenu calé en bas (à gauche, déjà la valeur par défaut). */ justify-content: flex-end; /* Marge renforcée : le hero devient un bloc uniquement textuel une fois le visuel retiré ci-dessous. */ padding-inline: 25px; } /* Visuel retiré sur mobile/tablette : le hero devient un bloc uniquement textuel à cette taille d'écran. */ .hero__visual { display: none; } .hero__text { width: 100%; gap: 12px; } .hero__group { gap: 8px; } /* --- Problème (6.2) --- */ .probleme__panel { flex-direction: column; padding: 30px 20px; } .probleme__col--text { width: 100%; } .probleme__col--body { flex: none; width: 100%; } /* --- Sécuriser / Prouver (6.3) --- */ .valeur__inner { gap: 60px; } .value-block { flex-direction: column; align-items: stretch; gap: 30px; } .value-block__visual { align-self: center; width: 100%; max-width: 480px; } /* Marge renforcée sur toute la colonne de texte, titre ET cartes : les cartes de Sécuriser/Prouver sont elles-mêmes surtout du texte (une pastille, un titre, une phrase), pas des visuels — contrairement aux cartes de Réseaux ou de « Ce qui change », elles suivent donc la même marge que le titre plutôt que de la garder à part. Seul le visuel (image) garde la marge existante. */ .value-block__text { width: 100%; padding-inline: 15px; } /* Sécuriser a l'image avant le texte dans le HTML (ordre desktop) ; « texte avant l'image » sur mobile s'obtient sans toucher au HTML. */ #securiser .value-block__visual { order: 2; } #securiser .value-block__text { order: 1; } /* --- Ce qui change (6.4) --- Plus de hauteur fixe ni de calque à gérer ici : depuis la refonte en blocs détachés (§7.4), le visuel n'est plus un fond de carte qu'il fallait garder lisible ou partiellement visible, il s'affiche en entier sous le texte, à sa propre hauteur. */ .change__grid { flex-direction: column; /* Marge renforcée, comme le reste des contenus de section : la section n'a plus de cartes à bordure depuis la refonte en blocs détachés (§7.4), textes et images en profitent donc tous les deux, posée ici au niveau du parent commun aux deux. 15px, pas 25 : .change__grid est imbriqué dans .container, qui applique déjà 10px — 10 + 15 = 25px au total, pour retomber exactement sur la même marge que les autres sections (posée directement sur le conteneur, sans les 10px de base en plus, ailleurs). */ padding-inline: 15px; /* Écart entre blocs empilés, augmenté (15 → 60px, comme les autres transitions entre blocs empilés sur mobile, §6.3 et §6.7) pour marquer plus nettement le passage de l'image d'un bloc au texte du suivant, une fois l'écart interne resserré ci-dessous. */ gap: 60px; } /* Écart interne aligné sur celui des cartes réseaux en mobile (25 → 15px, §6.6) : rapproche à la fois le titre du texte et le texte de son image (les trois se partagent le même gap), sans toucher à l'écart entre blocs ci-dessus. */ .change__item { gap: 15px; } /* Un seul rang dès qu'il n'y a plus qu'un bloc par ligne : plus de décalage à annuler. */ .change__grid .change__item:nth-child(1), .change__grid .change__item:nth-child(2), .change__grid .change__item:nth-child(3), .change__grid .change__item:nth-child(4) { transition-delay: 0ms; } /* --- Écosystème (6.5) --- */ .ecosysteme__inner { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 40px; } .ecosysteme__text { width: 100%; /* Marge renforcée pour ce sous-bloc, purement textuel : le visuel ci-dessous garde la marge existante, sans changement. */ padding-inline: 15px; } .ecosysteme__visual { align-self: center; width: 100%; max-width: 500px; height: auto; } /* --- Pour les réseaux (6.6) --- */ .reseaux__title { /* Marge renforcée pour ce bloc de titre, purement textuel : les cartes ci-dessous gardent la marge existante, sans changement. */ padding-inline: 15px; } .reseaux__cards { flex-direction: column; } /* Pas d'illustration de fond ici (§5.6) : la hauteur peut s'adapter au contenu sans rien cacher. Écart interne (pastille/titre/texte) aligné sur celui de .value-card (Sécuriser/Prouver, 15px) plutôt que le 25px du desktop, pour un rendu cohérent une fois les deux en une colonne. */ .reseaux__cards .card--simple { height: auto; gap: 15px; } .reseaux__cards .card--simple:nth-child(1), .reseaux__cards .card--simple:nth-child(2), .reseaux__cards .card--simple:nth-child(3), .reseaux__cards .card--simple:nth-child(4) { transition-delay: 0ms; } /* --- Application de terrain (6.7) --- */ .terrain__inner { gap: 60px; /* Bloc uniquement textuel : marge renforcée. */ padding-inline: 25px; } .terrain__block--left, .terrain__block--right { width: 100%; max-width: 526px; } .terrain__block--right { align-self: flex-start; text-align: left; } /* --- Fonctionnalités (6.8) : bloc uniquement textuel --- */ #fonctionnalites .container { padding-inline: 25px; } .fonctionnalites__list { grid-template-columns: 1fr; } /* --- Action finale (6.9) : bloc uniquement textuel --- */ #action-finale .container { padding-inline: 25px; } } @media (max-width: 640px) { /* --- Échelle typographique (§9) --- */ .text-display { font-size: 36px; } .text-heading-2 { font-size: 28px; } /* --- Nav (5.1) --- */ .nav { padding: 10px 16px; } /* Logo + bouton seulement : logo + logo + bouton ne rentrent pas sur un écran de 375-428px de large. */ .nav__powered { display: none; } /* --- Hero (6.1) --- */ .hero__visual { width: 220px; } /* --- Action finale (6.9) --- Les deux boutons côte à côte ne tiennent pas sur un écran de 375-428px de large une fois les marges de section retirées. */ .action-finale__buttons { flex-direction: column; } /* --- Pied de page (§8) : empilé et centré, comme le reste des blocs uniquement textuels de la page. --- */ .footer__inner { padding-inline: 25px; } .footer__brand { flex-direction: column; gap: 20px; } .footer__columns { flex-direction: column; align-items: center; text-align: center; gap: 40px; } .footer__legals, .footer__aside, .footer__policies, .footer__contact { align-items: center; text-align: center; } .footer__credit { text-align: center; } }