/* ========================================================================== Studio : les composants de l'ancien accueil d'odratta.com, dans l'identité d'odrahosting (09/11/2026). Chargé sur toutes les pages publiques après site.css : chaque classe commence par st- (seule exception : .mark). Mode d'emploi de chaque composant (HTML exact, attributs data-, variantes) : rapports/composants-studio.md. Fond blanc, sections blanc / --gris-fond en alternance, ni dégradé ni halo. Depuis le 11/11/2026, Odratta Studio se lit en noir (#0a0b0e) : le héros de ses pages (site.css §3.5 bis) et le bloc d'une offre de la maison (§19), une fois par page ; l'hébergement garde le héros bleu #2f59ec. Le mouvement : la piste des métiers épinglée (le seul moment assumé), les bandeaux qui défilent et les vidéos en boucle ; tout s'arrête sous prefers-reduced-motion: reduce (la piste devient une pile). ========================================================================== */ /* ---------- 1. Le mot souligné de chaque titre ----------

Quelques sites

: un trait bleu sous un mot ; blanc sur un fond bleu. */ .mark { text-decoration: underline; text-decoration-color: var(--bleu); text-decoration-thickness: 0.08em; text-underline-offset: 0.12em; text-decoration-skip-ink: none; } :is(.heros-produit, .appel, .heros-accueil) .mark { text-decoration-color: rgb(255 255 255 / 0.85); } /* Joseph, 12/11/2026 : « l'effet que tu as mis sur français, tu l'appliques aussi sur les pages studio ». Le mot marqué du titre principal des pages Studio (/studio/, /site/, /logiciel/, /agent/, SPX et les réalisations) passe du trait à l'aplat blanc, texte bleu, mêmes mesures que « français » sur /hebergement/ (site.css §3.4, .mot-francais). */ :is(.page-studio, .page-site, .page-logiciel, .page-spx, .page-agent, .page-projet) h1 .mark { display: inline-block; padding: 0 .14em .04em; margin-inline: -.02em; border-radius: .12em; background: #fff; color: #2e57e7; text-decoration: none; } /* Réalisations (outils/pages-projets.py) : .ppr-nom lie l'élision, le nom et la virgule (« d’Atelier de la Déco, » à Nantes), le nom garde la place des deux ; après « d’ » ou « l’ », un léger écart laisse l'apostrophe hors de l'aplat. */ .ppr-nom { white-space: nowrap; } .ppr-nom .mark { white-space: normal; max-width: 100%; } .page-projet .ppr-elision + .mark { margin-left: .1em; max-width: calc(100% - 1em); } .ppr-nom-virgule .mark { max-width: calc(100% - .4em); } .page-projet .ppr-nom-virgule .ppr-elision + .mark { max-width: calc(100% - 1.4em); } /* Un nom long passe sur deux lignes dans son aplat : l'élision s'aligne sur la première, la virgule suit la dernière. */ .ppr-elision { display: inline-block; vertical-align: top; } /* ---------- 2. Têtes de section propres au studio ---------- Lien sous le chapeau d'un .entete-double (« Tous les articles », « Suivre @odratta.fr »). */ .entete-double > .st-entete-lien { margin-top: 16px; padding-top: 0; font-size: var(--t-5); } @media (min-width: 1024px) { .entete-double:has(> .st-entete-lien) > h2 { grid-row: span 2; } } /* Tête seule dans son .conteneur, suivie d'un bloc pleine largeur (piste, bandeau) : la marge que .entete-double:last-child retire. */ .st-tete { margin-bottom: 48px; } @media (max-width: 1023px) { .st-tete { margin-bottom: 36px; } } .st-entete-lien .ic { margin-left: 6px; vertical-align: -0.2em; } /* ---------- 3. Héros du studio ---------- .heros-produit.st-heros : le texte à gauche ; à droite, une illustration de la famille des pages d'hébergement, adaptée au studio (.heros-illustration, site.css §3.5 ; Joseph, 11/11/2026 : « pas les mêmes illustrations, même style mais adapté »). Le plan coté Odratta posé sur le filet bas du héros et, devant lui, en cascade, ce que le studio construit : un site, un logiciel métier, le point du matin d'un agent IA. Aucune pastille : le texte du héros dit le reste. Sous 900 px, l'illustration passe sous le texte. */ .st-heros { padding-bottom: 0; } .st-heros-grille { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(32px, 4vw, 64px); align-items: end; } .st-heros-texte { align-self: start; min-width: 0; padding-bottom: clamp(56px, 6vw, 88px); } .st-heros h1 { max-width: 17ch; font-size: var(--t-0); } .st-heros .heros-texte { max-width: 34em; } .st-heros-lieu { display: flex; align-items: flex-start; gap: 8px; max-width: 40em; margin: 28px 0 0; font-size: var(--t-6); line-height: 1.5; color: var(--ardoise); } .st-heros-lieu .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; } @media (max-width: 899px) { .st-heros-grille { grid-template-columns: minmax(0, 1fr); } .st-heros-texte { padding-bottom: 32px; } } /* ---------- 4. Index des métiers ----------