/* Plus aucune fonte servie depuis le plugin. Amiko était l'ancienne charte. Le site écrit aujourd'hui en Archivo Black pour les titres et en Schibsted Grotesk pour le texte, et le thème sert les deux depuis le site lui-même : l'engagement de départ est tenu, aucune requête vers un domaine tiers sur la page où le client saisit ses coordonnées, simplement il est tenu par le thème. Les trois fichiers assets/fonts/amiko-*.woff2 du plugin ne servent plus à rien et peuvent être supprimés. Ne pas toucher au preset amiko de theme.json, qui couvre d'anciens contenus enregistrés. */ /* ========================================================================= Studio 411 — Réservation Cyan et magenta sont les deux encres de la marque. Aucune des deux ne passe le contraste en petit texte sur blanc : chaque encre a donc une variante « texte », et les aplats restent réservés aux surfaces et aux grands corps. ========================================================================= */ /* La mesure du tunnel reste déclarée ici et NE BOUGE PAS : theme.css remet la gouttière à zéro sur .s411-reserver-tunnel, où le groupe porte déjà la marge de la page, et la colonne de gauche de .s411-reserver vaut 1080px. Ces deux nombres sont la moitié d'un accord écrit dans le thème : les remplacer par contentSize désaxerait le tunnel de la bande de repères qui le borde, et ferait tomber la grille des formules de trois colonnes à deux. C'est la seule chose du fichier qui était déjà juste. */ :root { --s411-tunnel-max: 1080px; --s411-tunnel-gouttiere: 20px; /* Rouge d'erreur, ocre d'attente, vert de confirmation. La palette du thème s'arrête à l'encre, aux gris et aux deux encres de marque, et elle est fermée volontairement (color.custom false) : ces trois familles n'ont pas à devenir des couleurs proposées dans l'éditeur. Elles restent la propriété du plugin, mais nommées une seule fois au lieu d'être recopiées à six endroits. Valeurs inchangées, toutes conformes : texte d'erreur 9,38:1 sur son fond, attente 7,77:1, succès 8,16:1. */ --s411-erreur-fond: #fbedee; --s411-erreur-filet: #a31621; --s411-erreur-texte: #7d111a; --s411-attente-fond: #fff5e5; --s411-attente-filet: #8a5a00; --s411-attente-texte: #6b4600; --s411-succes-fond: #e9f5ef; --s411-succes-filet: #0f7a4d; --s411-succes-texte: #0a5334; } /* `hidden` est une affirmation sur le document, pas une proposition de style. newsletter.js masque la rangée de saisie et la case de consentement après une inscription réussie, mais elles sont déclarées en display:flex et une règle d'auteur l'emporte toujours sur le [hidden]{display:none} du navigateur : le champ restait affiché sous le message de confirmation. Le même piège attendait la bannière d'erreur du tunnel et la zone de réponse de la lettre, qui n'ont aucun display déclaré aujourd'hui. C'est le seul !important du fichier, et il protège un attribut. */ .s411-booking [hidden], .s411-nl [hidden], [hidden].s411-nl-retour { display: none !important; } .s411-booking { /* Les noms courts restent : deux cents déclarations les citent, et les renommer ne changerait rien à l'écran. Ce qui change, c'est leur source. Chacun lit désormais la palette du thème, avec l'ancienne valeur en repli pour qu'une installation sans le thème 411 reste présentable. Les dix valeurs coïncidaient déjà au caractère près : cette étape ne déplace pas un pixel, elle déplace la décision. */ --c-cyan: var(--wp--preset--color--cyan, #009fe3); --c-magenta: var(--wp--preset--color--magenta, #e6007e); /* Le cyan de marque plafonne à 2,97:1 sur blanc : il lui faut sa variante assombrie dès qu'il porte du texte. Le magenta atteint 4,50:1 et porte le texte lui-même, à une condition que le thème écrit noir sur blanc : rester sur du blanc. Sur le gris de surface il retombe à 4,15:1. */ --c-cyan-t: var(--wp--preset--color--cyan-text, #0072a3); --c-magenta-t: var(--wp--preset--color--magenta-text, #e6007e); --c-ink: var(--wp--preset--color--contrast, #0b0f14); --c-ink-2: var(--wp--preset--color--ink-2, #55606d); --c-ink-3: var(--wp--preset--color--ink-3, #8b96a2); --c-rule: var(--wp--preset--color--rule, #e2e7ec); --c-surface: var(--wp--preset--color--surface, #f4f6f8); --c-white: var(--wp--preset--color--base, #fff); /* Un seul dégradé de marque sur le site, et un seul angle : 115 degrés. Le tunnel en avait un à lui, à 100 degrés. Personne ne mesure un angle à l'oeil, mais le filet des cartes de formule ne partait pas comme celui des cartes d'offre de la page coworking, et c'est ce genre d'écart de quinze degrés qui donne l'impression de deux chantiers. */ --grad: var(--wp--preset--gradient--quadri, linear-gradient(115deg, #009fe3 0%, #e6007e 100%)); /* Deux polices, celles du site. C'est la déclaration qui mettait tout le tunnel en Amiko : les six font-family: inherit du fichier en dépendaient, y compris ceux des boutons. */ --f: var(--wp--preset--font-family--body, 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); --f-titre: var(--wp--preset--font-family--display, 'Archivo Black', 'Arial Black', Impact, sans-serif); font-family: var(--f); /* Le corps de texte du site, 1.125rem, au lieu de la taille héritée du navigateur. */ font-size: var(--wp--preset--font-size--medium, 1.125rem); color: var(--c-ink); max-width: var(--s411-tunnel-max); /* Calé à gauche, pas centré. Centrer le tunnel dans une bande de 1780 px lui donnait un axe à lui : le titre du hero, le chapô, les tableaux et le logo partaient chacun d'un endroit différent sur la même page. */ margin: 0; /* 4rem en bas, soit les 64 px d'avant au pixel près, mais dits dans le barème. La gouttière latérale ne bouge pas : theme.css la remet à zéro là où le groupe porte déjà la marge de la page. */ /* Le groupe de patterns/reservation.php porte déjà spacing-50 en bas : les deux s'additionnaient à 128 px avant le pied de page, un total qui n'est sur aucun palier alors que chacune des deux sources y était. Un blanc, une source. */ padding: 0 var(--s411-tunnel-gouttiere); color: var(--c-ink-2); line-height: 1.65; box-sizing: border-box; } @supports (background: linear-gradient(in oklch, red, blue)) { /* En sRGB, cyan vers magenta traverse un violet grisâtre. En OKLCH la saturation tient sur toute la longueur. Seul l'angle reste écrit en clair, comme dans le thème : les fonctions de dégradé n'acceptent pas toujours une variable dans toutes les positions. */ .s411-booking { --grad: linear-gradient(115deg in oklch, var(--c-cyan), var(--c-magenta)); } } .s411-booking *, .s411-booking *::before, .s411-booking *::after { box-sizing: inherit; } /* ---------- progression ------------------------------------------------ */ /* Le dégradé n'est pas un ornement : il mesure le chemin vers le paiement. */ .s411-progress { height: 3px; background: var(--c-rule); overflow: hidden; } .s411-progress-fill { height: 100%; width: 20%; background: var(--grad); background-size: 500% 100%; /* la teinte parcourt le dégradé entier */ background-position: 0 0; /* La courbe des survols et des ouvertures du site, et rien d'autre. */ transition: width .45s cubic-bezier(.16, 1, .3, 1); } .s411-steps { display: flex; list-style: none; margin: 0 0 var(--wp--preset--spacing--40, 2.75rem); padding: var(--wp--preset--spacing--10, .5rem) 0 0; /* 4 px assumé : c'est une gouttière de grille, elle passe sous le plancher du barème, qui commence à 8 px. */ gap: 4px; } /* Le fil d'ariane est un surtitre : même police de labeur en 600, mêmes capitales, même interlettrage large que ceux du reste du site. Le gris clair est abandonné pour les étapes à venir : à 3,01:1 sur blanc il ne porte pas de texte, et à 11 px encore moins. Il reste, mais sur les étapes déjà franchies, où l'information est devenue secondaire. */ .s411-steps li { flex: 1; font-family: var(--f); font-size: var(--wp--preset--font-size--x-small, .8125rem); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; color: var(--c-ink-2); transition: color .3s ease; } .s411-steps li::before { content: attr(data-step-label) ' · '; font-variant-numeric: tabular-nums; } /* L'étape franchie quitte le gris clair : 3,01:1 sur blanc, et le commentaire au-dessus le disait déjà en toutes lettres tout en l'employant. Ce qui est franchi est dit par la barre de progression, qui est là pour ça ; l'étape n'a pas à le redire dans une encre qui ne se lit pas. */ .s411-steps li.is-done { color: var(--c-ink-2); } .s411-steps li.is-current { color: var(--c-magenta-t); } /* ---------- titres ----------------------------------------------------- */ /* .s411-h est un h2 : la recette de titre du thème lui revient de droit. Elle est réécrite ici plutôt que simplement laissée en place, parce que la classe pèse plus lourd que le sélecteur d'élément et qu'on ne veut pas dépendre de la façon dont WordPress enveloppe ses styles d'élément. Ce qui disparaît, c'est le faux gras : Archivo Black n'a qu'une graisse, demander 700 revient à faire épaissir ses contours par le navigateur. Et l'interlettrage positif écartait ce que la fonte serre. */ /* TITRE DE SECTION. Mêmes valeurs que .s411-detail-titre du thème, au caractère près : le h2 du tunnel cohabitait avec ceux des autres pages et se retrouvait un cran en dessous. */ .s411-h { font-family: var(--f-titre); font-size: var(--wp--preset--font-size--x-large, 1.875rem); font-weight: 400; text-transform: uppercase; letter-spacing: -.02em; line-height: 1.12; color: var(--c-ink); margin: 0 0 var(--wp--preset--spacing--20, 1rem); text-wrap: balance; } /* Le chapô se lit à la taille de lecture du site, pas une taille en dessous : c'est la phrase qui évite un appel téléphonique. */ /* CHAPÔ. Les deux feuilles avaient tranché la même question dans deux sens opposés, et les deux réponses étaient visibles sur la même page. C'est celle du thème qui l'emporte, et elle est écrite ici à l'identique. */ .s411-sub { color: var(--c-ink-2); margin: 0 0 var(--wp--preset--spacing--30, 1.75rem); max-width: 62ch; font-size: var(--wp--preset--font-size--large, 1.375rem); line-height: 1.65; } /* MENTION. Elle se lit dans le même écran que les notes à 13 px de la colonne de droite : même rôle, même corps. */ .s411-footnote { margin: var(--wp--preset--spacing--30, 1.75rem) 0 0; font-size: var(--wp--preset--font-size--x-small, .8125rem); line-height: 1.65; color: var(--c-ink-2); } .s411-empty { color: var(--c-ink-2); } /* Le souligné vient de styles.elements.link, il manquait ici : un lien qui ne se distingue que par sa couleur est un lien réservé à ceux qui les distinguent. */ .s411-link { color: var(--c-cyan-t); text-decoration: underline; } /* ---------- étapes ----------------------------------------------------- */ .s411-step { display: none; } .s411-step.is-active { display: block; animation: s411-in .35s ease both; } @keyframes s411-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- formules --------------------------------------------------- */ .s411-formulas { display: grid; /* 280 px de plancher : à 1080 px de conteneur cela donne 3 colonnes, et les six formules du studio remplissent exactement deux rangées. Une largeur plus faible en produirait quatre, laissant deux cartes orphelines. */ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--wp--preset--spacing--20, 1rem); } /* Les quatre lignes de la carte sont empruntées à la grille parente : un nom qui passe sur deux lignes décalait le prix et le bouton de sa carte, et la rangée partait de travers. Avec subgrid, prix et boutons tombent à la même hauteur quelle que soit la longueur des libellés. */ /* Recette de la carte d'offre du thème, transposée ici. Le nom de classe ne change pas : booking.js lit .s411-formula pour la sélection, et poser .s411-offer par-dessus l'abonnerait aux animations de défilement du thème, jouées sur des sections en display:none. Angles droits, et c'est le filet qui commande : posé en haut d'une carte arrondie, le dégradé suivait la courbe et plongeait à ses extrémités. Un filet doit être droit, sinon ce n'est plus un filet mais un ornement. Le fond passe du gris au blanc, ce qui remet le prix magenta sur le seul fond où il est conforme. */ .s411-formula { position: relative; display: grid; grid-template-rows: subgrid; grid-row: span 4; /* C'est l'écart entre la durée, le nom, le prix et le lien : tout le rythme interne du premier écran du tunnel tenait sur une valeur de 6 px qui n'est sur aucun palier. */ row-gap: var(--wp--preset--spacing--10, .5rem); justify-items: center; align-items: center; text-align: center; background: var(--c-white); border: 1px solid var(--c-rule); border-radius: 0; /* Le thème donne spacing-40 à ses cartes d'offre, mais elles sont trois sur toute la largeur. Ici il y en a six, deux fois plus étroites : 44 px de chaque côté ne laisseraient pas la place au prix. */ padding: var(--wp--preset--spacing--30, 1.75rem); font-family: inherit; cursor: pointer; overflow: hidden; transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; } /* Le filet ne se révèle plus, il est là dès le départ, comme sur les cartes d'offre de la page coworking. Il dit la marque, pas la sélection. */ .s411-formula::before { content: ''; position: absolute; /* Décalé d'un pixel vers l'extérieur pour couvrir la bordure de la carte : sans ça, un liseré gris dépasse à chaque extrémité du filet. */ top: -1px; left: -1px; right: -1px; height: 4px; background: var(--grad); } .s411-formula:hover, .s411-formula:focus-visible { transform: translateY(-3px); box-shadow: var(--wp--preset--shadow--carte, 0 1px 2px rgba(11, 15, 20, .04), 0 14px 36px -24px rgba(11, 15, 20, .5)); } /* Le filet étant devenu permanent, la sélection se dit par un liseré interne, sur le modèle de la tuile encre du thème. */ .s411-formula.is-selected { box-shadow: inset 0 0 0 2px var(--c-ink); } .s411-formula.is-selected:hover { box-shadow: inset 0 0 0 2px var(--c-ink), var(--wp--preset--shadow--carte, 0 14px 36px -24px rgba(11, 15, 20, .5)); } /* Plus de contour à soi : celui du socle du thème s'applique, 3 px cyan décalés de 3 px. Un seul anneau de focus sur tout le site, c'est la règle, et la carte déclare son propre rayon, donc le border-radius de 3 px posé par cette règle en :where() ne peut pas la casser. */ /* Sans subgrid, le pied de carte est simplement poussé en bas : les cartes gardent la même hauteur, seule la position du prix peut varier. */ @supports not (grid-template-rows: subgrid) { .s411-formula { display: flex; flex-direction: column; align-items: center; grid-row: auto; } .s411-formula-cta { margin-top: auto; } } /* La durée est ce qui distingue les six cartes les unes des autres : elle était le plus petit texte de la carte, elle en devient l'entrée. Elle prend la police de titre, sans faux gras. */ /* TITRE DE CARTE. La durée avait été grossie parce qu'elle était illisible, et c'était juste : ce qui distingue les six cartes les unes des autres, c'est la durée. Ce n'est donc pas un surtitre grossi, c'est le TITRE de la carte, et elle en prend le rôle entier : Archivo Black à l'encre, au jeton large, au serrage des titres. Le cyan lisible part : le titre d'une carte est à l'encre sur tout le site, et la carte de formule doit se lire comme la carte d'offre du coworking, nom en Archivo Black encre puis prix en magenta. */ .s411-formula-duration { font-family: var(--f-titre); font-size: var(--wp--preset--font-size--large, 1.375rem); font-weight: 400; letter-spacing: -.015em; text-transform: uppercase; color: var(--c-ink); line-height: 1.12; } /* LIBELLÉ, sous le titre qu'il accompagne : exactement la place et la recette de .s411-offer-kicker sous .s411-offer-name. Le nom de la formule n'était ni un titre ni un libellé, c'était une légende en Schibsted gris sous une durée qui avait pris la police de titre : la carte n'avait pas de titre. */ .s411-formula-name { font-family: var(--f); font-size: var(--wp--preset--font-size--x-small, .8125rem); font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--c-ink-2); line-height: 1.4; } /* Le prix en police de titre, comme le montant d'une offre. Le jeton est fluide de 2rem à 3,25rem : on reste au-dessus de 24 px à toutes les largeurs, donc en grand texte, où le magenta pur est conforme, et le palier mobile à 40 px du bas de fichier devient inutile. */ .s411-formula-price { font-family: var(--f-titre); font-size: var(--wp--preset--font-size--xx-large, 2.75rem); font-weight: 400; line-height: 1; color: var(--c-magenta); margin: var(--wp--preset--spacing--10, .5rem) 0; font-variant-numeric: tabular-nums; } /* Recette du lien d'offre du thème, et non d'un bouton : la carte entière est déjà un bouton, un deuxième bouton dessiné à l'intérieur promettrait deux clics différents. */ /* LIEN D'ACTION. Les deux définitions coïncidaient déjà déclaration par déclaration et ne rendaient pourtant pas pareil : celle-ci vit dans un