/* ===================================================================== YD Studio · les études de cas (une page par app : booxs.html, puis les 5 autres) Construites sur le modèle de l'étude « Flex » d'Off Menu (offmenu.design/work/flex), adaptées aux règles du site : 2 polices (+ la police de la marque, seulement pour la présenter), rayon 12 px, pas d'ombre, pas de pilule. Chaque page pose les couleurs de SA marque sur (classe etude--) : tout le reste en découle. Les couleurs, la police et les tuiles propres à une marque sont dans css/marque-.css (chargée par sa page seulement) ; ici, seulement le gabarit commun. Variables qu'une marque doit poser : --m-fonce, --m-vin, --m-vif, --m-clair, --m-encre, --m-accent, --m-degrade, --m-police. Ordre : hero · introduction et détails · l'identité (grille) · la direction artistique · le design · la refonte · l'univers (mosaïque penchée) · la charte (fiches) · la publication · grande image · les autres apps · appel · pied. ===================================================================== */ /* ---------- Gabarit ---------- */ .etude { --marge: 18px; --bloc: min(100% - 48px, 1280px); } .etude main { display: block; } .e-bloc { width: var(--bloc); margin: 0 auto; } .e-pleine { margin: 0 var(--marge); } .e-espace { height: clamp(80px, 10vw, 160px); } .e-espace--petit { height: clamp(18px, 1.25vw, 18px); } /* Le menu de la hero, posé en haut et qui suit le défilement */ .etude .menu { position: fixed; top: 16px; z-index: 50; } .etude .menu__bloc { border: 1px solid var(--trait); } /* ---------- Hero : le décor de la marque en plein cadre, UN seul téléphone au milieu ---------- 06/10 (Yoann) : « un seul mockup, ultra propre… un bel arrière-plan… prends modèle sur ce qu'a fait Off Menu », puis « remplace le fond par quelque chose comme ils avaient fait avec supercomputer » = leur étude « Superintelligent » : un décor photographique plein cadre, un seul appareil au milieu, le nom en bas à gauche. Les visuels : assets/etudes/outils/poser-ecran.py (provenance des photos et demandes exactes en tête). ⛔ L'écran montré est TOUJOURS une vraie capture de l'app, incrustée dans le téléphone de la photo. */ .e-hero { position: relative; isolation: isolate; overflow: hidden; margin: 92px var(--marge) 0; height: max(560px, calc(100svh - 110px)); border-radius: var(--rayon); background: var(--m-degrade); /* 06/10 soir : c'est CETTE ligne qui fait l'ouverture en deux temps (css/hero.css, @keyframes hero-ouvre). Elle était posée par js/transition.js — trop tard : un script « defer » s'exécute APRÈS le moment où le navigateur photographie la page qui arrive. La hero n'était donc jamais reconnue et on ne voyait qu'un fondu. En CSS, le nom est là dès la première lecture de la page : l'ouverture se joue à tous les coups. */ view-transition-name: ouverture; } .e-hero__univers { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ⚠️ Il n'y a plus de téléphone en CSS par-dessus le décor, ni d'avant-plan. 06/10 au soir, Yoann : « ces téléphones, comment ils tiennent debout ? Ils tiennent sur quoi ? […] Tu mets les téléphones debout, mais ils ne tiennent sur rien, donc c'est illogique. » Il avait raison : un téléphone posé par-dessus une image ne peut qu'avoir l'air collé. Le téléphone fait désormais partie de la PHOTO, appuyé sur quelque chose de visible, avec la lumière, l'ombre, le reflet et le flou de la scène. La vraie capture de l'app y est incrustée par assets/etudes/outils/poser-ecran.py. La page n'a donc plus qu'une image à afficher. */ /* un voile très doux vers le bas : le nom reste lisible même sur un décor clair (l'eau d'AudiCheck) */ .e-hero::after { content: ""; position: absolute; z-index: 4; inset: auto 0 0; height: 46%; pointer-events: none; background: linear-gradient(to top, rgb(0 0 0 / 0.42), rgb(0 0 0 / 0)); } .e-hero__nom { position: absolute; z-index: 5; left: clamp(20px, 2.6vw, 40px); bottom: clamp(18px, 2.2vw, 34px); margin: 0; color: var(--nuage); } .e-hero__nom b { display: block; font: 600 clamp(30px, 3.2vw, 48px) / 1 var(--police-texte); letter-spacing: -0.01em; } .e-hero__nom span { display: block; margin-top: 8px; font-size: 15px; font-weight: 500; opacity: 0.86; } /* ---------- Introduction et détails ---------- */ .e-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: 56px 96px; align-items: start; } .e-etiquette { margin: 0 0 22px; font: 500 15px / 1.2 var(--police-texte); color: var(--encre-douce); } .e-grand-texte { margin: 0; max-width: 27em; font: 500 clamp(22px, 2.25vw, 33px) / 1.3 var(--police-texte); letter-spacing: -0.01em; color: var(--encre); text-wrap: pretty; } .e-texte { margin: 0; max-width: 40em; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.5; color: var(--encre); text-wrap: pretty; } .e-details { margin: 0; } .e-details > div { display: flex; justify-content: space-between; gap: 18px; padding: 13px 0; border-top: 1px solid var(--trait); font-size: 15px; line-height: 1.35; } .e-details dt { flex: none; color: var(--encre-douce); } /* le libellé ne se coupe jamais (« Ce qu’on a fait ») */ .e-details dd { margin: 0; text-align: right; color: var(--encre); font-weight: 500; } /* ---------- L'identité : la grille de tuiles ---------- */ .e-grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--marge); } .e-tuile { position: relative; overflow: hidden; margin: 0; min-height: clamp(300px, 34vw, 540px); border-radius: var(--rayon); } .e-tuile--6 { grid-column: span 6; } .e-tuile--4 { grid-column: span 4; } .e-tuile--3 { grid-column: span 3; } .e-tuile--2 { grid-column: span 2; } .e-tuile figcaption, .e-legende { position: absolute; left: 18px; bottom: 16px; margin: 0; font: 500 13px / 1.2 var(--police-texte); } /* le logotype et sa construction : les quatre espaces entre les lettres sont égaux (x) */ .e-logo { display: grid; place-items: center; background: var(--m-clair); color: var(--m-encre); } .e-logo__dessin { position: relative; width: 64%; } .e-logo__dessin img { display: block; width: 100%; height: auto; position: relative; z-index: 1; } .e-logo__ecart { position: absolute; top: -16%; bottom: -16%; width: 2.57%; background: color-mix(in srgb, var(--m-vif) 16%, transparent); } .e-logo__ecart::before { content: "x"; position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font: 500 13px / 1 var(--police-texte); } .e-logo__ligne { position: absolute; left: -7%; right: -7%; height: 1px; background: color-mix(in srgb, var(--m-encre) 40%, transparent); } .e-logo .e-legende { color: var(--m-encre); } .e-marque { display: grid; place-items: center; background: var(--m-degrade); } .e-marque img { display: block; width: 42%; height: auto; } .e-marque .e-legende { color: var(--nuage); } .e-palette { display: flex; flex-direction: column; } .e-palette span { flex: 1; min-width: 0; display: flex; align-items: flex-end; padding: 8px 10px; font: 500 11px / 1 var(--police-texte); letter-spacing: 0.02em; } .e-typo { display: flex; flex-direction: column; justify-content: space-between; padding: clamp(18px, 2vw, 28px); background: var(--m-vif); color: var(--m-clair); } .e-typo__aa { font: 600 clamp(110px, 12vw, 210px) / 0.9 var(--m-police); letter-spacing: -0.02em; } .e-typo__nom { font: 600 clamp(20px, 1.8vw, 28px) / 1.1 var(--m-police); } .e-typo__alphabet { margin-top: 8px; font: 600 14px / 1.45 var(--m-police); opacity: 0.85; overflow-wrap: anywhere; } /* ---------- La direction artistique : trois feuilles posées sur un grand fond ---------- */ .e-planche { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: clamp(16px, 3vw, 44px); border-radius: var(--rayon); background: var(--m-clair); } .e-feuille { display: flex; flex-direction: column; min-height: clamp(420px, 40vw, 600px); padding: 16px 18px 18px; border-radius: var(--rayon); background: var(--nuage); } .e-feuille__tete { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); font: 500 11px / 1 var(--police-texte); color: var(--encre-douce); } .e-feuille__geant { margin: clamp(28px, 4vw, 56px) 0 0; font: 700 clamp(40px, 4.4vw, 74px) / 0.96 var(--police-texte); letter-spacing: -0.025em; color: var(--encre); } .e-feuille__titre { margin: 20px 0 18px; font: 600 clamp(18px, 1.5vw, 22px) / 1.15 var(--police-texte); color: var(--encre); } .e-feuille__pied { margin-top: auto; padding-top: 24px; font: 600 11px / 1 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-douce); } .e-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: auto; } .e-collage img { display: block; width: 100%; height: auto; aspect-ratio: 520 / 696; object-fit: cover; } .e-elements { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; } .e-elements figure { margin: 0; font: 500 11px / 1.2 var(--police-texte); color: var(--encre); } .e-elements__case { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: 7px; overflow: hidden; border-radius: var(--rayon); } .e-elements__case img { display: block; width: 64%; height: auto; } .e-elements__case--aa { font: 600 clamp(40px, 4vw, 64px) / 1 var(--m-police); } /* ---------- Le design : trois vrais écrans sur la couleur claire de la marque ---------- */ .e-ecrans { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 6vw, 110px); padding: clamp(48px, 7vw, 110px) 24px; border-radius: var(--rayon); background: var(--m-clair); --tel-l: clamp(190px, 20vw, 290px); } .e-ecrans figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; } .e-ecrans figcaption { font: 500 14px / 1.2 var(--police-texte); color: var(--m-encre); } .e-ecrans .tel:nth-child(1) { margin-top: 0; } .e-ecrans figure:nth-child(2) { margin-top: clamp(24px, 4vw, 64px); } /* le téléphone du milieu un peu plus bas : la rangée respire */ /* ---------- La refonte : le texte et le téléphone à curseur ---------- */ .e-refonte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 8vw, 120px); align-items: center; } .e-refonte .tel { --tel-l: clamp(260px, 24vw, 320px); } .e-refonte__legende { display: flex; justify-content: space-between; margin-top: 14px; font: 600 12px / 1 var(--police-texte); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ciel-texte); } /* ---------- L'univers : la mosaïque penchée de tous les visuels de la marque ---------- */ .e-univers { position: relative; overflow: hidden; height: clamp(520px, 58vw, 900px); border-radius: var(--rayon); background: var(--m-fonce); } .e-univers__mosaique { position: absolute; left: 50%; top: 50%; width: 150%; columns: 8; column-gap: clamp(12px, 1.4vw, 22px); transform: translate(-50%, calc(-50% + var(--derive, 0px))) rotate(-11deg); } .e-univers__mosaique img { display: block; width: 100%; height: auto; margin-bottom: clamp(12px, 1.4vw, 22px); border-radius: var(--rayon); break-inside: avoid; } .e-univers__case { display: grid; place-items: center; aspect-ratio: 1; margin-bottom: clamp(12px, 1.4vw, 22px); border-radius: var(--rayon); background: var(--m-vin); break-inside: avoid; } /* un insigne posé sur sa case lie-de-vin */ .e-univers__mosaique .e-univers__case img { width: 56%; margin: 0; border-radius: 0; } /* ---------- La charte : des fiches comme les pages d'un guide de marque ---------- */ .e-fiches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--marge); } .e-fiche { margin: 0; border: 1px solid var(--trait); border-radius: var(--rayon); background: var(--nuage); } .e-fiche__tete { display: grid; grid-template-columns: auto 1fr auto; gap: 40px; padding: 18px 24px; border-bottom: 1px solid var(--trait); font: 500 12px / 1 var(--police-texte); color: var(--encre-douce); } .e-fiche__tete b { color: var(--encre); font-weight: 600; } .e-fiche__corps { padding: 26px 24px 30px; } .e-fiche__titre { margin: 0 0 22px; font: 600 clamp(22px, 2vw, 30px) / 1.1 var(--police-texte); color: var(--encre); } .e-fiche__note { margin: 18px 0 0; max-width: 34em; font-size: 14px; line-height: 1.5; color: var(--encre-douce); } .e-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .e-logos figure { margin: 0; font: 500 12px / 1.2 var(--police-texte); color: var(--encre-douce); } .e-logos img { display: block; width: 100%; height: auto; margin-bottom: 8px; border-radius: var(--rayon); } .e-seuils { margin: 0; padding: 0; list-style: none; } .e-seuils li { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px; padding: 9px 0; border-top: 1px solid var(--trait); font-size: 15px; } .e-seuils li:first-child { border-top: 0; } .e-seuils img { width: 34px; height: auto; display: block; justify-self: center; } .e-seuils b { font-weight: 600; } .e-seuils span { color: var(--encre-douce); } .e-couleurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .e-couleurs figure { margin: 0; font-size: 13px; line-height: 1.35; } .e-couleurs i { display: block; height: clamp(84px, 9vw, 150px); margin-bottom: 8px; border-radius: var(--rayon); } .e-couleurs i.e-couleurs__bord { border: 1px solid var(--trait); } .e-couleurs b { display: block; font-weight: 600; color: var(--encre); } .e-couleurs span { color: var(--encre-douce); font-variant-numeric: tabular-nums; } .e-partage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; } .e-partage img { display: block; width: 100%; height: auto; border-radius: var(--rayon); } /* ---------- La publication : la vraie fiche App Store ---------- */ .e-publication { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(40px, 8vw, 120px); align-items: center; } .e-publication .store { position: relative; inset: auto; height: 470px; border-bottom: 1px solid var(--trait); border-radius: var(--rayon); } /* ---------- La grande image de fin ---------- */ .e-final { overflow: hidden; border-radius: var(--rayon); background: var(--m-fonce); } .e-final img { display: block; width: 100%; height: auto; aspect-ratio: 21 / 9; object-fit: cover; transform: scale(var(--zoom, 1)); } /* ---------- Les autres apps ---------- */ .e-autres__titre { margin: 0 0 clamp(28px, 3vw, 44px); font: 600 clamp(28px, 3vw, 44px) / 1.05 var(--police-texte); letter-spacing: -0.01em; color: var(--encre); } .e-autres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--marge); } .e-autre { display: block; color: var(--encre); text-decoration: none; } .e-autre__visuel { position: relative; display: flex; justify-content: center; overflow: hidden; height: clamp(320px, 38vw, 620px); border-radius: var(--rayon); background: var(--app); } .e-autre__visuel .tel { --tel-l: clamp(180px, 17vw, 260px); margin-top: clamp(40px, 5vw, 80px); } .e-autre__visuel span { display: block; } /* dans un lien, le téléphone est fait de */ .e-autre__nom { display: block; margin-top: 12px; font: 500 16px / 1.3 var(--police-texte); } .e-autre__nom span { color: var(--encre-douce); } .e-autre:focus-visible { outline: 3px solid var(--mandarine); outline-offset: 4px; border-radius: var(--rayon); } /* ---------- L'appel ---------- */ .e-appel { display: flex; flex-direction: column; align-items: center; gap: 30px; padding: clamp(64px, 8vw, 120px) 24px; border: 1px solid var(--trait); border-radius: var(--rayon); text-align: center; } .e-appel .section__titre { max-width: 14em; } /* ---------- Le pied de page : les liens et le logo géant, coupé par le bas ---------- */ .e-pied { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: start; padding: clamp(48px, 5vw, 72px) var(--marge) 0; overflow: hidden; } .e-pied__liens { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 16px; } .e-pied__liens a { color: var(--encre); text-decoration: none; } .e-pied__liens a:hover { text-decoration: underline; text-underline-offset: 4px; } .e-pied__droits { margin: 18px 0 0; font-size: 13px; color: var(--encre-douce); } .e-pied__geant { display: block; margin-bottom: -6.5%; line-height: 0; } .e-pied__geant svg { display: block; width: 100%; height: auto; overflow: visible; } /* 07/10 (Yoann) : le bouton flottant « Réserver un appel » est retiré. « Il tourne bizarrement et je ne sais pas pourquoi tu l'as mis dans le case study. Il fait doublon puisqu'il est déjà en bas. » C'était vrai : le même bouton est dans le menu, en haut, et l'appel final est à la fin de chaque étude. */ /* ---------- Tablette ---------- */ @media (max-width: 1080px) { .e-intro, .e-refonte, .e-publication { grid-template-columns: 1fr; } .e-tuile--6 { grid-column: span 12; } .e-tuile--3 { grid-column: span 6; } .e-tuile--4 { grid-column: span 6; } .e-tuile--2 { grid-column: span 6; } .e-planche { grid-template-columns: 1fr; } .e-feuille { min-height: 0; gap: 0; } .e-collage { margin-top: 24px; } .e-fiches { grid-template-columns: 1fr; } .e-refonte .tel, .e-publication .store { justify-self: center; } .e-publication .store { width: min(100%, 520px); } } /* ---------- Téléphone ---------- */ @media (max-width: 640px) { .etude { --marge: 12px; --bloc: min(100% - 32px, 1280px); } .e-hero { margin-top: 76px; height: 520px; } /* au téléphone, le décor passe à sa version verticale (3 pour 4), cadrée serré sur l'appareil :