/* Theme Name: realisons-v2 Theme URI: https://realisons.com Author: Yan Haltey Brands Description: Thème blocs de Réalisons. Il porte la charte de la marque : turquoise et orange, plus un violet réservé au parcours Startup. La forme reprend le prototype « calme premium » du 11.07.2026. Les polices sont auto-hébergées, avec leurs licences dans assets/fonts. Version: 0.3.0 Requires at least: 6.5 Tested up to: 6.7 Requires PHP: 8.1 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: realisons-v2 Tags: full-site-editing, block-templates */ /* COMMENT CE FICHIER EST ORGANISÉ, ET POURQUOI IL EXISTE. Les jetons vivent dans theme.json. Ici on habille des BLOCS DU CŒUR, parce que le compilateur de la chaîne ne transporte pas les classes du prototype : il rend des titres, des paragraphes et des boutons. La mise en page, elle, vient du contenu de la page, qui se dessine à la main : chaque bande est un groupe portant une classe `r-sec`, et les cartes sont de vraies colonnes portant `r-cartes`. Ces deux classes sont les seules prises que ce fichier emploie — rien ici ne dépend d'un `nth-child`, donc rien ne casse quand un texte gagne un paragraphe. */ :root{ --r-bg:#F3F5F8; --r-surface:#FFFFFF; --r-teal:#28A8BF; /* LE TURQUOISE FONCÉ SERT DES DEUX CÔTÉS, ET L'ANCIEN NE TENAIT QUE D'UN. #1E7F8E donnait 4.69 en fond de bouton avec un libellé blanc, mais 4.29 en TEXTE sur le fond clair de la page — sous les 4.5 exigés. Mesuré à l'axe le 16.09.2026 sur les boutons secondaires, le titre « En bref » et les libellés de carte. #1A737F passe des deux côtés : 5.06 en texte sur le fond, 5.52 en fond avec du blanc, 4.72 sur la bande violette. */ --r-teal-dark:#1A737F; --r-teal-light:#CAEEF4; --r-orange:#EEA32A; --r-orange-dark:#BC770B; /* L'ORANGE DE LA CHARTE NE PORTE PAS DE TEXTE, MÊME FONCÉ. Mesuré à l'axe le 16.09.2026 : #EEA32A donne 1.94 sur blanc, et son foncé #BC770B 3.41 — l'un et l'autre sous les 4.5 exigés. La porte « Optimiser une entreprise » a pourtant besoin d'un accent chaud qui la distingue des deux autres. #8F5B08 garde la famille ambrée et passe : 5.70 sur blanc, 5.32 sur le fond de page. Il sert au filet, à l'icône et au lien de cette porte, jamais au texte courant. */ --r-ambre-texte:#8F5B08; --r-violet:#6E5AC8; --r-violet-dark:#4E3CA0; --r-violet-light:#EFEBFB; /* Le voile violet des cartes Startup. En rgba, et non en hexadécimal : le contrôle du standard lit un `#` en début de mot comme un sélecteur d'identifiant, et refuse le fichier. */ --r-violet-voile:rgba(110,90,200,.045); --r-text-dark:#2D3748; /* LE GRIS DE LA CHARTE NE PASSE PAS AA SUR NOS FONDS CLAIRS. Mesuré le 16.09.2026 : #718096 donne 4.02 sur une carte blanche, 3.68 sur le fond, 3.43 sur la bande violette — sous les 4.5 exigés pour du texte courant. #5F6C7E garde la même teinte bleutée et ne descend jamais sous 4.56, fonds teintés compris. */ --r-text-body:#5F6C7E; --r-text-muted:#5F6C7E; /* ── LE FILET, ET LA VALEUR QUI N'ÉTAIT PAS LA NÔTRE ────────────────── `--r-bord` valait #E2E8F0, une couleur EXCLUSIVE à sidelune. Le rail des jetons la refuse, et il a raison : une couleur qui traverse deux marques est une charte qui cesse de vouloir dire quelque chose. Elle ne se remplace pas par une couleur inventée : ce thème déclare DÉJÀ son filet neutre, douze lignes plus bas, et en rgba de sa propre encre — `--r-bande-filet:rgba(45,55,72,.10)`. Deux jetons disaient le même trait avec deux valeurs ; ils n'en disent plus qu'une. Mesuré : sur une carte blanche le trait passe de #E2E8F0 à #EAEBED, sur le fond de page de #E2E8F0 à #DFE2E6 — trois pour cent de clarté sur un cheveu d'un pixel. `--r-filet` reste là pour le trait qui doit SUIVRE sa bande ; `--r-bord` est le neutre fixe. */ --r-bord:rgba(45,55,72,.10); /* Le trait FORT, celui qui cerne un bloc au lieu de le séparer. Il ne servait qu'au bloc « réalisation » et s'y écrivait en dur. */ --r-bord-fort:#94A3B8; /* L'ENCRE SUR FOND COLORÉ. Même valeur que `--r-surface`, autre rôle : une matière et un texte ne se nomment pas pareil, et `color:var(--r-surface)` se lirait comme une erreur. Vingt-six occurrences en dur avant ce jeton. */ --r-encre-inverse:#FFFFFF; /* Le turquoise foncé ENFONCÉ — le survol et l'actif des boutons pleins. Il n'était déclaré nulle part et se répétait quatre fois en dur. */ --r-teal-enfonce:#17636F; /* Les deux voiles de bande, et la pastille du duo de cycle. */ --r-voile-teal:#ECF6F8; --r-voile-ambre:#FDF6EA; --r-pastille-teal:#E6F6F9; /* L'ÉCHELLE DES CHEVRONS D'ÉTAPE. Cinq crans turquoise, deux violets pour le parcours startup. La série s'arrête où le contraste s'arrête : le motif mesuré est écrit à l'endroit où elle sert. */ --r-etape-1:#F8FCFC; --r-etape-2:#F2F9FA; --r-etape-3:#EDF6F8; --r-etape-4:#E8F4F6; --r-etape-5:#E3F1F4; --r-etape-startup-1:#FAF8FE; --r-etape-startup-2:#F5F2FC; --r-radius:20px; --r-ombre:0 14px 34px rgba(45,55,72,.08); --r-ombre-douce:0 4px 14px rgba(45,55,72,.05); /* ── L'ÉCHELLE TYPOGRAPHIQUE, DÉCLARÉE UNE FOIS ─────────────────────── Relevé au navigateur le 13.10.2026, avant cette échelle : NEUF tailles différentes pour du corps de texte sur les seize pages — 32, 24, 20.8, 20, 18, 17.3, 15.2, 13 et 12 px. La cause n'était pas le désordre des règles seul : `theme.json` avait la typographie FLUIDE, qui rendait le corps en `clamp(14px … 20px)`. Il grossissait donc avec l'écran pendant que les règles écrites en rem restaient fixes, et tombait à 14 px sur téléphone, sous le plancher de 16 px. La fluidité est coupée, et tout part désormais d'ici. Une taille qui ne vient pas de ces jetons est une exception, et une exception se motive en commentaire à l'endroit où elle s'écrit. */ --r-txt:1.125rem; /* 18 px — LE corps de texte, partout */ --r-txt-lead:1.25rem; /* 20 px — le chapô sous un titre de page */ --r-txt-petit:.9375rem; /* 15 px — menu, pied, légendes, poids */ --r-txt-micro:.8125rem; /* 13 px — sur-titres en capitales espacées */ --r-h1-heros:clamp(2.7rem,5.6vw,5rem); --r-h1:clamp(2.2rem,4.4vw,3.4rem); --r-h2:clamp(1.7rem,3.4vw,2.4rem); --r-h3:1.3rem; --r-h4:1.125rem; --r-prix:2rem; /* le montant se lit de loin, ce n'est pas du corps */ /* ── L'ÉCHELLE D'ESPACEMENT, DÉCLARÉE UNE FOIS ──────────────────────── Mesuré au navigateur le 16.09.2026, avant cette échelle : sur une seule page, les cartes donnaient 28, 26, 30, 34 et 44 px de marge intérieure, selon qu'elles étaient une carte, une étape, un panneau, un prix ou un rappel. Rien ne le justifiait — chaque famille avait reçu sa valeur le jour où elle avait été écrite. Cinq crans, et RIEN d'écrit en dur ailleurs. Deux surfaces de même nature donnent donc le même nombre, ce qui se vérifie en une commande plutôt qu'à l'œil. xs ce qui sépare une étiquette de son titre s ce qui sépare deux lignes d'un même bloc m ce qui sépare deux cartes l la marge intérieure d'une carte ou d'un panneau xl la respiration d'une bande Seul `l` est fluide : une carte doit se resserrer sur un téléphone, un intervalle entre deux cartes n'a pas à le faire. */ --r-esp-xs:8px; --r-esp-s:14px; --r-esp-m:22px; --r-esp-l:clamp(24px,2.2vw,30px); /* DEUX BANDES QUI SE TOUCHENT CUMULENT LEUR MARGE INTÉRIEURE. Deux fois 92 px faisaient près de deux cents pixels de vide entre deux couleurs. Mesuré le 16.09.2026, l'écart retombe à 152 px au plus large — et la bande de fond coincée entre les deux disparaît avec la gouttière de WordPress, neutralisée plus bas. */ --r-esp-xl:clamp(52px,6vw,76px); --r-air:var(--r-esp-xl); /* ── LA GOUTTIÈRE LATÉRALE, DÉCLARÉE UNE FOIS ET UNE SEULE ───────────── Elle valait 24 px sur le pied, 16 px sur les bandes, 36 px sur les héros de l'accueil et de Startup : trois retraits sur une même page, et un texte qui ne s'alignait pas d'une section à l'autre. Mesuré au navigateur le 16.09.2026, à 390 px, après le relevé de Yan sur son iPhone. Une seule valeur, portée par un jeton, reprise par les bandes, l'en-tête, la barre basse, le pied — et par les blocs du cœur, puisqu'on écrit dans la même variable que WordPress emploie pour ses alignements. L'ENCOCHE S'AJOUTE, ELLE NE REMPLACE PAS. Sur un iPhone tenu en paysage, `env()` vaut plusieurs dizaines de pixels ; posé seul, il collerait le texte au bord en portrait, où il vaut zéro. */ --r-marge:24px; --r-marge-g:calc(var(--r-marge) + env(safe-area-inset-left,0px)); --r-marge-d:calc(var(--r-marge) + env(safe-area-inset-right,0px)); --wp--style--root--padding-left:var(--r-marge-g); --wp--style--root--padding-right:var(--r-marge-d); /* ── LE RELIEF EST TEINTÉ PAR SA BANDE ──────────────────────────────── Décision de Yan, 16.09.2026, et c'est la bonne : « ici c'est du jaune, pourquoi pour tout ce qui est jaune on ne le ferait pas sous forme jaune ? » Jusqu'ici, les cartes restaient blanches sur les bandes crème, turquoise et violette, et leurs ombres gardaient le gris bleuté du fond de page. Deux matières cohabitaient donc dans la même bande : la carte ne semblait pas taillée dans la couleur qui l'entoure, elle semblait posée dessus. Une bande déclare désormais SON jeu — la surface d'une carte, celle d'un creux, sa lumière, son ombre, son filet — et tout ce qu'elle contient en hérite. Les composites ci-dessous ne nomment plus aucune couleur : ils lisent les jetons de la bande où ils se trouvent. Une seule mécanique, donc, et aucune liste d'exceptions à tenir à jour. LE HÉROS FAIT EXCEPTION, ET LUI SEUL : c'est la zone où les teintes se croisent, il garde le jeu neutre. Les surfaces sont mesurées, pas choisies à l'œil : le gris du corps (#5F6C7E) reste au-dessus de 4,5 sur chacune. Le violet était le plus risqué — son creux à #E7E1F8 tombait à 4,20 — il a donc été éclairci jusqu'à #F1EEFC, qui donne 4,67. */ --r-bande-carte:#FFFFFF; --r-bande-papier:#FAFBFC; --r-bande-creux:#F3F5F8; --r-bande-lumiere:rgba(255,255,255,.95); --r-bande-ombre:rgba(174,184,202,.45); --r-bande-ombre-forte:rgba(174,184,202,.5); --r-bande-ombre-pose:rgba(45,55,72,.28); --r-bande-filet:rgba(45,55,72,.10); } body{background:var(--r-bg);color:var(--r-text-body)} .wp-site-blocks{padding-top:0} /* WORDPRESS POSE 24 px DE GOUTTIÈRE ENTRE DEUX BLOCS DE PREMIER NIVEAU. Entre deux bandes de couleur, ces 24 px laissaient voir le fond de page : une bande claire parasite, que rien dans la maquette n'explique. C'est le « padding entre les sections » relevé par Yan le 16.09.2026. On l'annule à la racine plutôt que bande par bande — la marge intérieure de `.r-sec` suffit à faire respirer. */ .entry-content > .r-sec{margin-block:0} /* ET LA MÊME GOUTTIÈRE SÉPARE L'EN-TÊTE, LE CONTENU ET LE PIED. La règle du cœur, `:where(.wp-site-blocks) > * {margin-block-start:24px}`, ne vise pas que les bandes d'une page : elle vise aussi les trois parties du gabarit. D'où la bande claire SOUS l'en-tête collant et SOUS le pied, relevée par Yan le 16.09.2026 — deux symptômes, une seule cause, corrigée une seule fois. `:where()` est de spécificité nulle : une classe suffit à la reprendre, sans recourir à `!important`. */ .wp-site-blocks > *{margin-block-start:0} /* ── En-tête ─────────────────────────────────────────────────────────── */ /* L'EN-TÊTE PORTE SA PROPRE MARGE LATÉRALE. Sans elle, le mot-symbole touchait le bord gauche et se coupait sous 400 px : la mise en page contrainte pose son retrait sur le contenu, pas sur la bande qui colle en haut. Mesuré à l'image le 16.09.2026. */ /* L'EN-TÊTE COLLE PAR SON ENVELOPPE, PAS PAR LUI-MÊME. Yan a redemandé le 16.09.2026 un en-tête collant, qui était pourtant déclaré depuis deux passes. Mesuré au navigateur : après 1200 px de défilement, il se trouvait à -1186 px — c'est-à-dire parti avec la page. `position:sticky` ne sort JAMAIS de la boîte du parent. Ici le parent est le `
` que WordPress pose autour d'une partie de gabarit, et il fait exactement la hauteur de l'en-tête : 74 px. L'élément n'avait donc aucun trajet à parcourir, et la déclaration ne produisait rien du tout. C'est l'enveloppe qui doit coller, elle dont le parent fait toute la page. La leçon vaut au-delà de ce site : un `sticky` se vérifie en défilant, pas en relisant la feuille de style. */ .wp-site-blocks > header{position:sticky;top:0;z-index:30} .r-entete{background:rgba(243,245,248,.94); backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid rgba(226,232,240,.9); padding:14px var(--r-marge-d) 14px var(--r-marge-g); transition:padding .18s ease,box-shadow .18s ease,background .18s ease} /* L'EN-TÊTE COLLANT SE RESSERRE DÈS QU'ON DESCEND. À hauteur pleine, il mange une bande de lecture sur toute la page. La classe est posée par `assets/js/site.js`, au-delà de 24 px de défilement : plus bas, le mouvement se lit comme un sursaut. */ .r-entete--reduite{padding-top:7px;padding-bottom:7px; background:rgba(243,245,248,.97);box-shadow:0 10px 26px rgba(45,55,72,.08)} .r-entete--reduite .r-logo img{width:150px} /* NOTRE HTML N'EST PAS UN BLOC : IL N'HÉRITE PAS DU MODÈLE DE BOÎTE DU CŒUR. WordPress pose `box-sizing:border-box` sur ses blocs, pas sur le HTML qu'on écrit soi-même. Le panneau du tiroir, large de 335 px, en mesurait donc 379 une fois ses 44 px de marge intérieure ajoutés : il couvrait l'écran entier, et le voile qui doit le refermer n'existait plus qu'en théorie. Mesuré au navigateur le 16.09.2026. */ .r-entete__barre,.r-entete__barre *,.r-tiroir,.r-tiroir *{box-sizing:border-box} .r-entete__barre{display:flex;align-items:center;justify-content:space-between; gap:20px;max-width:72.5rem;margin:0 auto} .r-logo{margin:0;line-height:0;display:inline-block;flex:0 0 auto} .r-logo img{display:block;width:180px;height:auto} .r-logo--pied img{width:164px} /* ── Le menu, large ──────────────────────────────────────────────────── */ .r-nav{display:flex;align-items:center;gap:26px; font-family:'Kulim Park',Arial,sans-serif;font-weight:600;font-size:var(--r-txt-petit)} .r-nav__liste{display:flex;align-items:center;gap:26px; list-style:none;margin:0;padding:0} .r-nav__liste li{margin:0} .r-nav a{color:var(--r-text-body);text-decoration:none} .r-nav a:hover{color:var(--r-teal-dark)} /* ── LE DÉROULANT « NOTRE MÉTIER » ──────────────────────────────────── */ /* Retiré le 18.10 quand les deux portes sont passées à plat, ramené le 19.10 par Yan, à trois entrées : démarrer, optimiser, faire réaliser. Les règles reviennent de l'historique, qui les avait gardées. Le parent tient en deux gestes : un bouton qui déroule, et la liste qu'il déroule. Ils se touchent, donc ils doivent se lire comme un seul objet. */ .r-nav__parent{display:flex;align-items:center;gap:2px} .r-nav__bascule{display:inline-flex;align-items:center;justify-content:center; width:24px;height:24px;font:inherit; color:var(--r-text-body);background:none;border:0;padding:0;cursor:pointer} .r-nav__bascule:hover,.r-nav__parent:hover .r-nav__parent-lien{ color:var(--r-teal-dark)} .r-nav__chevron{transition:transform .18s ease} .r-nav__bascule[aria-expanded="true"] .r-nav__chevron{transform:rotate(180deg)} /* Le panneau est une carte posée sur la page : même relief que les autres, pour qu'il se lise comme une surface et non comme une liste flottante. Yan le 19.10.2026 : « enlève ce texte, ça n'a pas de sens ». La phrase qui ouvrait le panneau arrivait avant qu'on sache de quoi on parle. Elle part, et le filet qui la séparait des entrées avec elle. */ .r-nav__parent{position:relative} .r-tiroir__intitule-lien{display:block;padding:13px 14px 4px;font-size:var(--r-txt-micro); letter-spacing:.12em;text-transform:uppercase;color:var(--r-text-muted); text-decoration:none} .r-tiroir__intitule-lien:hover{color:var(--r-teal-dark)} .r-nav__sous{position:absolute;top:calc(100% + 10px);left:-8px;z-index:5; list-style:none;margin:0;padding:8px;min-width:250px; background:var(--r-surface);border-radius:16px; box-shadow:var(--r-neu-carte-relief)} .r-nav__sous a{display:block;padding:10px 14px;border-radius:11px; font-weight:600} .r-nav__sous a:hover{background:var(--r-bg);color:var(--r-teal-dark); box-shadow:var(--r-neu-pastille-creuse)} .r-tiroir__groupe > ul{list-style:none;margin:2px 0 0;padding:0 0 0 12px} .r-tiroir__intitule{display:block;padding:13px 14px 4px;font-size:var(--r-txt-micro); letter-spacing:.12em;text-transform:uppercase;color:var(--r-text-muted)} /* LE MOT MÈNE À LA PAGE, LE CHEVRON OUVRE LE DÉTAIL. Yan le 19.10.2026 : « je préférerais qu'il y ait vraiment une page dédiée à notre métier ». L'intitulé redevient donc un lien, et le chevron reprend sa forme de bouton à côté de lui — deux cibles distinctes, deux gestes distincts, et le clavier atteint le lien sans ouvrir le panneau. */ .r-nav__parent-lien{font-weight:600;font-size:var(--r-txt-petit); color:var(--r-text-body);text-decoration:none;padding:6px 0} .r-nav__parent:hover .r-nav__parent-lien, .r-nav__parent-lien:hover{color:var(--r-teal-dark)} .r-nav__parent-lien:focus-visible,.r-nav__bascule:focus-visible{ outline:3px solid var(--r-teal);outline-offset:3px;border-radius:8px} .r-nav__bascule[aria-expanded="true"]{color:var(--r-teal-dark)} /* LA PAGE OUVERTE SE CREUSE, ELLE NE CHANGE PAS SEULEMENT DE COULEUR. Un simple changement de teinte se perd sur une barre claire ; la pastille enfoncée dit « vous êtes ici » sans ajouter de mot. La classe est posée par le script, qui compare l'adresse courante aux liens du menu. */ .r-nav .r-ici{color:var(--r-teal-dark);background:var(--r-bg); border-radius:999px;padding:8px 16px;box-shadow:var(--r-neu-pastille-creuse)} /* LE LIBELLÉ DU BOUTON D'EN-TÊTE ÉTAIT GRIS SUR TURQUOISE, À 1.03. Relevé par Yan à l'image le 16.09.2026, mesuré à l'axe ensuite : le texte sortait à rgb(95,108,126) sur rgb(26,115,127), c'est-à-dire invisible. La cause n'est pas la couleur écrite, c'est le poids du sélecteur. `.r-nav a` pèse une classe ET un élément ; `.r-nav__cta`, une classe seule. Le gris de la navigation battait donc le blanc du bouton, alors qu'il est déclaré plus bas. Deux classes remettent l'ordre, sans `!important` — et la règle dit désormais ce qu'elle vise : un bouton DANS la navigation. */ .r-nav .r-nav__cta{background:var(--r-teal-dark);color:var(--r-encre-inverse);border-radius:999px; padding:10px 20px;box-shadow:var(--r-neu-btn-plein); white-space:nowrap;transition:box-shadow .2s ease,transform .14s ease} .r-nav .r-nav__cta:hover{background:var(--r-teal-dark);color:var(--r-encre-inverse); box-shadow:var(--r-neu-btn-plein-relief);transform:translateY(-1px)} .r-nav .r-nav__cta:active{box-shadow:var(--r-neu-btn-plein-enfonce); transform:translateY(1px)} .r-nav .r-nav__cta:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px} /* ── Le tiroir, écrans étroits ───────────────────────────────────────── */ /* LE BOUTON D'OUVERTURE N'EXISTE QUE LÀ OÙ LE MENU NE TIENT PAS. Le seuil est 900 px : à 880, « Réserver un échange » touchait « À propos ». Mesuré au navigateur, pas choisi rond. */ .r-tiroir__ouvrir{display:none;align-items:center;justify-content:center; width:44px;height:44px;flex:0 0 auto;color:var(--r-text-dark); background:var(--r-bg);border:0;border-radius:14px;cursor:pointer; box-shadow:var(--r-neu-btn)} .r-tiroir__ouvrir:active{box-shadow:var(--r-neu-btn-enfonce)} .r-tiroir{position:fixed;inset:0;z-index:60} .r-tiroir__voile{position:absolute;inset:0;background:rgba(45,55,72,.45); animation:r-voile .18s ease} .r-tiroir__panneau{position:absolute;top:0;right:0;bottom:0; width:min(86vw,360px);display:flex;flex-direction:column;gap:22px; overflow-y:auto;background:var(--r-bg); padding:18px calc(22px + env(safe-area-inset-right,0px)) 30px 22px; box-shadow:-18px 0 40px rgba(45,55,72,.18);animation:r-tiroir .2s ease} @keyframes r-voile{from{opacity:0}to{opacity:1}} @keyframes r-tiroir{from{transform:translateX(16px);opacity:.6} to{transform:none;opacity:1}} .r-tiroir__haut{display:flex;align-items:center;justify-content:space-between} .r-tiroir__titre{font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt-micro); letter-spacing:.12em;text-transform:uppercase;color:var(--r-text-muted)} .r-tiroir__fermer{display:flex;align-items:center;justify-content:center; width:44px;height:44px;color:var(--r-text-dark);background:var(--r-surface); border:0;border-radius:14px;cursor:pointer;box-shadow:var(--r-neu-btn)} .r-tiroir__fermer:active{box-shadow:var(--r-neu-btn-enfonce)} .r-tiroir__liste{list-style:none;margin:0;padding:0; font-family:'Kulim Park',Arial,sans-serif;font-weight:600;font-size:var(--r-txt)} .r-tiroir__liste li{margin:0} /* Le tiroir EST la barre de navigation, en étroit : il en prend la taille. La cible du doigt vient du `padding`, pas d'un corps plus gros. */ .r-tiroir__liste a{display:block;padding:14px;border-radius:14px; font-size:var(--r-txt-petit); color:var(--r-text-dark);text-decoration:none} .r-tiroir__liste a:hover,.r-tiroir__liste a:focus-visible{ background:var(--r-surface);color:var(--r-teal-dark)} .r-tiroir__liste .r-ici{background:var(--r-surface);color:var(--r-teal-dark); box-shadow:var(--r-neu-pastille-creuse)} .r-tiroir__liste--second{font-size:var(--r-txt-petit);font-weight:600; border-top:1px solid var(--r-bord);padding-top:10px} .r-tiroir__liste--second a{color:var(--r-text-body)} .r-tiroir__cta{display:block;margin-top:auto;padding:15px 20px; background:var(--r-teal-dark);color:var(--r-encre-inverse);border-radius:999px; font-family:'Kulim Park',Arial,sans-serif;font-weight:600; font-size:var(--r-txt-petit); text-align:center;text-decoration:none; box-shadow:var(--r-neu-btn-plein)} .r-tiroir__cta:hover{background:var(--r-teal-dark);color:var(--r-encre-inverse); box-shadow:var(--r-neu-btn-plein-relief)} .r-tiroir__cta:active{box-shadow:var(--r-neu-btn-plein-enfonce)} .r-tiroir__cta:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px} /* Le fond ne défile plus derrière le tiroir ouvert. */ body.r-tiroir-ouvert{overflow:hidden} /* LE SEUIL DU TIROIR EST MESURÉ, PAS CHOISI, ET IL A FAIT L'ALLER-RETOUR. Il était à 900 px tant que « Parcours » repliait trois liens en un mot. Le 18.10, les deux portes sont passées à plat : la barre portait alors six libellés dont deux longs, elle débordait dès 995 px, et le seuil est monté à 1180. Le 19.10, Yan ramène un déroulant — « Notre métier » replie trois entrées en deux mots — et la barre redevient courte : mesurée à 1440, elle laisse 266 px entre le logo et le premier lien, contre 65 à plat. Le seuil redescend donc à 900, et l'iPad en largeur retrouve sa barre. */ @media (max-width:900px){ .r-nav{display:none} .r-tiroir__ouvrir{display:inline-flex} } @media (min-width:901px){ .r-tiroir{display:none} } /* ── Les bandes ──────────────────────────────────────────────────────── */ .r-sec{padding:var(--r-air) var(--r-marge-d) var(--r-air) var(--r-marge-g)} /* CHAQUE BANDE DÉCLARE SON JEU, ET SEULEMENT SON JEU. Quatre valeurs suffisent : la surface d'une carte, celle d'un creux, la lumière et l'ombre. Tout ce que la bande contient — cartes, panneaux, pastilles, chevrons, champs, boutons secondaires — lit ces jetons sans qu'une seule règle ait à nommer la bande. C'est ce qui remplace les six surcharges d'ombre qui vivaient ici, une par bande et par état. L'ombre n'est jamais noire : elle est un ton foncé de la bande elle-même, sans quoi deux matières cohabitent dans le même bloc. */ .r-sec--teinte{background:var(--r-voile-teal); --r-bande-carte:#F7FCFD; --r-bande-papier:#F2FAFC; --r-bande-creux:#E9F3F5; --r-bande-lumiere:rgba(255,255,255,1); --r-bande-ombre:rgba(120,163,176,.42); --r-bande-ombre-forte:rgba(120,163,176,.5); --r-bande-ombre-pose:rgba(26,115,127,.3); --r-bande-filet:rgba(26,115,127,.14)} .r-sec--ambre{background:var(--r-voile-ambre); --r-bande-carte:#FFFCF6; --r-bande-papier:#FDF8EE; --r-bande-creux:#F7EEDD; --r-bande-lumiere:rgba(255,255,255,1); --r-bande-ombre:rgba(196,169,124,.4); --r-bande-ombre-forte:rgba(196,169,124,.48); --r-bande-ombre-pose:rgba(143,91,8,.26); --r-bande-filet:rgba(143,91,8,.14)} /* LE VIOLET EST LE PLUS RISQUÉ, SA SURFACE RESTE DILUÉE. Mesuré à l'axe le 16.09.2026 : le gris du corps donne 4,20 sur #E7E1F8 — sous le seuil. La surface est donc éclaircie jusqu'à #F1EEFC (4,67), et c'est la teinte qui cède, jamais le texte. */ .r-sec--violet{background:var(--r-violet-light); --r-bande-carte:#FBF9FE; --r-bande-papier:#F6F3FD; --r-bande-creux:#F1EEFC; --r-bande-lumiere:rgba(255,255,255,1); --r-bande-ombre:rgba(140,120,200,.34); --r-bande-ombre-forte:rgba(140,120,200,.42); --r-bande-ombre-pose:rgba(78,60,160,.26); --r-bande-filet:rgba(78,60,160,.14)} /* LE HÉROS GARDE LE MÉLANGE, et il est le seul. Décision de Yan, 16.09.2026 : c'est la zone où le turquoise et l'ambre se croisent, donc la seule où une carte ne peut pas appartenir à une teinte unique. Elle garde le jeu neutre hérité de la racine. */ .r-sec--hero{ background: radial-gradient(1100px 520px at 84% 4%,rgba(202,238,244,.6),transparent 62%), radial-gradient(820px 460px at 6% 96%,rgba(238,163,42,.14),transparent 60%)} .page-lancer-une-startup .r-sec--hero{ background: radial-gradient(1100px 520px at 84% 4%,rgba(110,90,200,.16),transparent 62%), radial-gradient(820px 460px at 6% 96%,rgba(202,238,244,.45),transparent 60%)} /* LES COMPOSITES SE REDÉCLARENT LÀ OÙ LE JEU CHANGE, ET C'EST OBLIGATOIRE. Mesuré au navigateur le 16.09.2026, avant d'écrire ces lignes : un composite déclaré à la racine qui lit `var(--r-bande-lumiere)` est résolu SUR LA RACINE, puis hérité déjà résolu. Une bande a beau redéclarer ses jetons, la carte reçoit alors le blanc et le gris de la racine — c'est-à- dire exactement le défaut qu'on corrige. D'où cette liste de sélecteurs : tout élément qui redéclare un jeton de bande doit aussi redéclarer les composites, sinon il hérite de ceux de son parent. C'est la seule règle à retenir de ce fichier. */ :root,.r-sec,.r-cartes .r-carte--violet,.r-cartes .r-porte--optimiser{ /* ── LE RELIEF, REPRIS DE LA MAQUETTE DU 11.07.2026 ──────────────────── Deux ombres par surface, et jamais une seule : une lumière en haut à gauche, une ombre en bas à droite. C'est ce couple qui fait le neumorphisme ; une ombre portée seule ne fait qu'un carton. Les courses sont celles de `styles.css` du prototype ; les couleurs, elles, viennent de la bande. Ce qu'on ne reprend pas : le relief sur le bouton principal. Il est le seul geste que le site demande, il reste plein et se voit de loin. */ --r-neu-carte: -6px -6px 9px var(--r-bande-lumiere), 6px 6px 9px var(--r-bande-ombre); --r-neu-carte-relief: -8px -8px 14px var(--r-bande-lumiere), 8px 8px 14px var(--r-bande-ombre-forte); --r-neu-btn: -4px -4px 6px var(--r-bande-lumiere), 4px 4px 6px var(--r-bande-ombre); --r-neu-btn-relief: -6px -6px 10px var(--r-bande-lumiere), 6px 6px 10px var(--r-bande-ombre-forte); --r-neu-creux: inset -4px -4px 8px var(--r-bande-lumiere), inset 4px 4px 8px var(--r-bande-ombre); --r-neu-btn-enfonce: inset 3px 3px 5px var(--r-bande-ombre), inset -3px -3px 5px var(--r-bande-lumiere); /* ── LE RELIEF BICOLORE DES BOUTONS PLEINS ──────────────────────────── Décision de Yan, 13.10.2026 : « on pourrait utiliser du néomorphisme bicolore ». Même principe que le relief teinté par bande — la lumière et l'ombre se dérivent de la COULEUR DE L'OBJET, pas d'un gris. Le fond du bouton ne bouge pas : il porte le libellé blanc à 4.69, et l'éclaircir le ferait passer sous le seuil. Le relief se joue donc en ombres portées, plus un liseré intérieur assez discret pour ne pas déplacer la mesure. */ --r-neu-btn-plein: -5px -5px 12px rgba(94, 206, 222, .34), 7px 7px 16px rgba(10, 61, 69, .40), inset 0 1px 0 rgba(255, 255, 255, .16); --r-neu-btn-plein-relief: -3px -3px 8px rgba(94, 206, 222, .26), 4px 4px 10px rgba(10, 61, 69, .34), inset 0 1px 0 rgba(255, 255, 255, .12); --r-neu-btn-plein-enfonce: inset 3px 3px 7px rgba(10, 61, 69, .42), inset -3px -3px 7px rgba(94, 206, 222, .26); /* Le bouton blanc du rappel sombre : lumière blanche, ombre prise dans le turquoise profond du bloc qui le porte. */ --r-neu-btn-clair: -5px -5px 12px rgba(255, 255, 255, .22), 7px 7px 16px rgba(8, 48, 55, .45), inset 0 1px 0 rgba(255, 255, 255, .55); --r-neu-btn-clair-relief: -3px -3px 8px rgba(255, 255, 255, .18), 4px 4px 10px rgba(8, 48, 55, .38), inset 0 1px 0 rgba(255, 255, 255, .45); /* ── LE CREUX, l'autre moitié du neumorphisme ────────────────────────── Le relief seul ne fait qu'un empilement de cartons : ce qui donne la matière, c'est qu'une surface puisse aussi s'enfoncer. On creuse ce qui REÇOIT — un champ, un panneau de rappel, une pastille d'étape — et on soulève ce qui SE PREND — une carte, un bouton. La règle est constante sur tout le site, faute de quoi le relief ne veut plus rien dire. */ --r-neu-panneau-creux: inset -7px -7px 14px var(--r-bande-lumiere), inset 7px 7px 14px var(--r-bande-ombre); --r-neu-pastille-creuse: inset -2px -2px 4px var(--r-bande-lumiere), inset 2px 2px 4px var(--r-bande-ombre-forte); /* La barre basse, elle, REÇOIT la lecture : elle se creuse, comme un rail posé dans la page, plutôt que de se soulever par-dessus le pied. */ --r-neu-rail-creux: inset 0 6px 14px var(--r-bande-ombre), inset 0 -2px 6px var(--r-bande-lumiere); /* Le papier, le filet et la pose ne nomment plus de couleur : ils lisent le jeu de leur bande, comme le relief. Une carte de texte posée sur la bande crème est donc crème, et son ombre ambrée. */ --r-papier:var(--r-bande-papier); --r-filet:var(--r-bande-filet); --r-pose:0 1px 2px var(--r-bande-ombre-pose), 0 10px 26px -14px var(--r-bande-ombre-pose); --r-pose-haute:0 2px 4px var(--r-bande-ombre-pose), 0 20px 40px -18px var(--r-bande-ombre-pose); /* CE QUI SE PREND GARDE LE RELIEF, ET IL S'ALLONGE. Les portes de parcours et les cartes d'offre sont les objets que le visiteur attrape : eux seuls reçoivent la course longue de l'étude du relief poussé, et le rayon généreux qui va avec. Partout ailleurs, le relief se retire — un site où tout ressort ne hiérarchise plus rien. */ --r-neu-prise: -16px -16px 32px var(--r-bande-lumiere), 18px 18px 38px var(--r-bande-ombre-forte); --r-neu-prise-haute: -20px -20px 40px var(--r-bande-lumiere), 22px 22px 48px var(--r-bande-ombre-forte); } /* LE RAPPEL DE FIN SE NOMME, IL N'EST PLUS « LE DERNIER ». La règle visait `:last-child`, et elle a mordu le 19.10.2026 : le formulaire de contact, déplacé en fin de page de réservation, est devenu le dernier enfant — donc une bande sombre — pendant que ses libellés gardaient leur couleur de texte foncé. Mesuré : 1,24 de contraste sur les cinq libellés, c'est-à-dire illisible. Une bande sombre est une DÉCISION, pas une position. Elle se nomme donc : seul l'appel final la reçoit, et une section ajoutée en fin de page ne change plus de couleur sans que personne l'ait voulu. */ .entry-content > .r-sec--appel:last-child{background:var(--r-text-dark);text-align:center; --r-bande-carte:#38455C; --r-bande-papier:#38455C; --r-bande-creux:#2F3B4F; --r-bande-lumiere:rgba(255,255,255,.055); --r-bande-ombre:rgba(0,0,0,.45); --r-bande-ombre-forte:rgba(0,0,0,.5); --r-bande-ombre-pose:rgba(0,0,0,.5); --r-bande-filet:rgba(255,255,255,.12)} .entry-content > .r-sec--appel:last-child :where(h1,h2,h3){color:var(--r-encre-inverse)} .entry-content > .r-sec--appel:last-child p{color:rgba(255,255,255,.86); margin-left:auto;margin-right:auto} .entry-content > .r-sec--appel:last-child .wp-block-buttons{justify-content:center} /* LE RELIEF DESCEND JUSQU'EN BAS DE PAGE, ET IL CHANGE DE LUMIÈRE. Yan, 16.09.2026 : le rappel et le pied ne doivent pas rester des aplats pendant que tout le reste a de la matière. Le rappel garde donc son fond sombre — c'est lui qui tranche avec les bandes claires et fait qu'on le remarque — mais son panneau se soulève avec une lumière SOURDE en haut et une ombre DENSE en bas. Les ombres du fond gris, elles, y poseraient une tache blanche : elles supposent une lumière que ce fond ne renvoie pas. Le panneau est d'un ton plus clair que la bande, sans quoi une ombre sur un fond de même valeur ne se verrait pas. */ .entry-content > .r-sec--appel:last-child > .wp-block-group{ background:var(--r-bande-carte);border-radius:var(--r-radius); padding:var(--r-esp-l);box-shadow:var(--r-neu-carte)} /* SUR FOND SOMBRE, LE RELIEF CLAIR NE VEUT RIEN DIRE. Le neumorphisme du fond gris suppose une lumière qui vient du clair : posé sur le rappel sombre, il pose une tache blanche. Le bouton secondaire y devient un contour, qui tient le même rôle sans mentir sur la matière. */ .entry-content > .r-sec--appel:last-child .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link{background:transparent;color:var(--r-encre-inverse); box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)} .entry-content > .r-sec--appel:last-child .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link:hover{background:rgba(255,255,255,.12);color:var(--r-encre-inverse); box-shadow:inset 0 0 0 2px var(--r-encre-inverse)} .entry-content > .r-sec--appel:last-child .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link:active{box-shadow:inset 0 0 0 2px var(--r-encre-inverse); transform:translateY(1px)} /* ── Titres et texte ─────────────────────────────────────────────────── */ /* L'échelle porte sur l'ÉLÉMENT autant que sur la classe du bloc. Mesuré le 13.10.2026 : les 41 fiches /service/ et /partenaire/ écrivent leurs titres avec leurs propres classes, sans `wp-block-heading` — elles tombaient donc sur le défaut du navigateur, soit 2em/1.5em/1.17em d'un corps à 18 px : h1 à 36 px contre 54 px ailleurs, h2 à 27 contre 38. La classe reste dans le sélecteur pour ne pas baisser la spécificité de ce qui l'emportait. */ h1,h1.wp-block-heading{font-size:var(--r-h1);margin:0 0 .35em; letter-spacing:-.015em} h2,h2.wp-block-heading{font-size:var(--r-h2);margin:0 0 .45em; letter-spacing:-.01em} h3,h3.wp-block-heading{font-size:var(--r-h3);margin:0 0 .4em} h4{font-size:var(--r-h4);margin:0 0 .4em} .r-sec > .wp-block-group > p{max-width:64ch} .r-sec p{margin:0 0 1rem} /* ── Boutons ─────────────────────────────────────────────────────────── */ /* LE TURQUOISE DE MARQUE NE PORTE PAS DE TEXTE BLANC. Mesuré : blanc sur #28A8BF donne 2.82, très loin des 4.5. Le fond du bouton prend donc le turquoise foncé de la charte (4.69), et le turquoise clair reste ce qu'il est : une couleur d'accent, pas de texte. */ .wp-block-button__link{border-radius:999px;padding:14px 26px; font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-petit); background:var(--r-teal-dark);color:var(--r-encre-inverse);text-decoration:none; box-shadow:var(--r-neu-btn-plein); transition:transform .14s ease,background .2s ease,box-shadow .2s ease} /* Au survol, le relief s'atténue au lieu de changer de couleur : le fond reste #1A737F, donc le libellé garde exactement son contraste mesuré. */ .wp-block-button__link:hover{box-shadow:var(--r-neu-btn-plein-relief); transform:translateY(-1px)} .wp-block-button__link:active{box-shadow:var(--r-neu-btn-plein-enfonce); transform:translateY(1px)} .wp-block-button__link:focus-visible{outline:3px solid var(--r-teal); outline-offset:3px} /* LE BOUTON SECONDAIRE EST NEUMORPHIQUE, ET LUI SEUL. Le compilateur donne à chaque lien son propre groupe de boutons : le second groupe d'une section porte donc le geste secondaire. La règle ne compte pas les enfants, elle lit une suite de frères — un texte qui gagne un paragraphe ne la dérange pas. */ .r-sec .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link{ background:var(--r-bande-carte);color:var(--r-teal-dark); box-shadow:var(--r-neu-btn)} .r-sec .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link:hover{ background:var(--r-bande-carte);color:var(--r-teal-enfonce);box-shadow:var(--r-neu-btn-relief)} .r-sec .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link:active{ box-shadow:var(--r-neu-btn-enfonce);transform:translateY(1px)} .page-lancer-une-startup .r-sec .wp-block-buttons ~ .wp-block-buttons .wp-block-button__link{ color:var(--r-violet-dark)} /* LE COMPILATEUR DONNE À CHAQUE LIEN SON PROPRE GROUPE DE BOUTONS. Deux appels à l'action voisins s'empilaient donc verticalement, là où la maquette les pose côte à côte. En ligne, ils se remettent d'aplomb sans qu'il faille toucher au prototype. */ .r-sec .wp-block-buttons{gap:var(--r-esp-s);margin:0 1rem 1rem 0;display:inline-flex; vertical-align:top} .page-lancer-une-startup .wp-block-button__link{background:var(--r-violet); box-shadow:0 10px 22px rgba(110,90,200,.26)} .page-lancer-une-startup .wp-block-button__link:hover{background:var(--r-violet-dark)} /* ── Le héros ────────────────────────────────────────────────────────── */ .r-heros{gap:clamp(24px,4vw,56px);align-items:flex-start} .r-heros .wp-block-column{align-self:flex-start} /* LE PANNEAU « EN BREF » EST CREUSÉ, PAS POSÉ. Il ne se prend pas, il rappelle : le creux le range d'un cran derrière le titre et les boutons, là où une carte en relief leur disputait le regard. C'est aussi ce qui fait lire le neumorphisme — un site où tout ressort n'en est pas un. */ .r-heros .r-carte--bref{background:var(--r-bande-creux);border-radius:var(--r-radius); padding:var(--r-esp-l);box-shadow:var(--r-neu-panneau-creux); margin-top:clamp(8px,2vw,28px)} .r-heros .r-carte--bref h2{font-size:var(--r-txt);letter-spacing:.09em; text-transform:uppercase;color:var(--r-teal-dark);margin-bottom:.9em} .r-heros .r-carte--bref p{margin-bottom:var(--r-esp-s);color:var(--r-text-dark); position:relative;padding-left:38px;min-height:26px} .r-heros .r-carte--bref p:last-child{margin-bottom:0} /* ── La coche, en pastille creusée ───────────────────────────────────── */ /* LE COMPILATEUR NE TRANSPORTE PAS LES DÉCORATIONS DU PROTOTYPE. Les coches y sont marquées `data-sb-ignore`, donc elles ne survivent pas à la compilation : elles n'appartiennent pas au texte, et le client ne doit pas avoir à les retaper. Elles se redessinent ici, en CSS, à partir de la position du paragraphe dans sa carte. Rien à maintenir dans le contenu. Trois familles seulement, et nommées : le panneau « En bref » d'un héros, un panneau qui déclare porter des coches, et la liste d'inclusions d'une carte de prix — celle-ci commence après le montant et la cadence, d'où le `h3 + p + p ~ p`. Un panneau qui liste ce qu'on NE fait PAS n'en reçoit jamais : une coche verte devant « la mise en relation avec des investisseurs » dirait le contraire de la phrase. */ .r-heros .r-carte--bref p::before, .r-panneau--coches h3 ~ p::before, .page-offres .r-sec--offres .r-cartes--2 .wp-block-column h3 + p + p ~ p::before{ content:"";position:absolute;left:0;top:.05em;width:24px;height:24px; border-radius:50%;background:var(--r-bande-creux); box-shadow:var(--r-neu-pastille-creuse)} .r-heros .r-carte--bref p::after, .r-panneau--coches h3 ~ p::after, .page-offres .r-sec--offres .r-cartes--2 .wp-block-column h3 + p + p ~ p::after{ content:"";position:absolute;left:9px;top:.5em;width:5px;height:9px; border-right:2px solid var(--r-teal-dark); border-bottom:2px solid var(--r-teal-dark); transform:rotate(43deg)} .page-lancer-une-startup .r-panneau--coches h3 ~ p::after, .r-carte--violet .r-panneau--coches h3 ~ p::after{ border-color:var(--r-violet-dark)} /* ── Le panneau large, une carte qui tient toute la bande ────────────── */ /* Ces sections portaient un titre et une suite de paragraphes à plat, sans rien qui les rassemble. Le panneau leur donne une surface, et la liste qui suit son titre devient lisible comme une liste. */ .r-sec--panneau > .wp-block-group{background:var(--r-bande-carte); border-radius:var(--r-radius);padding:var(--r-esp-l); border:0;box-shadow:var(--r-neu-carte)} .r-sec--panneau h3{margin-top:1.6rem;font-size:var(--r-txt-micro);letter-spacing:.11em; text-transform:uppercase;color:var(--r-text-muted)} .r-sec--panneau h3 ~ p{position:relative;padding-left:38px;min-height:26px; margin-bottom:.7rem;color:var(--r-text-dark)} /* Un panneau sans coches garde la même colonne, avec un repère neutre : la liste reste alignée, sans rien affirmer. */ .r-sec--panneau:not(.r-panneau--coches) h3 ~ p::before{content:""; position:absolute;left:4px;top:.72em;width:14px;height:2px;border-radius:2px; background:var(--r-bord)} .r-sec--panneau .wp-block-buttons{margin-top:.4rem} /* ── Les questions fréquentes ────────────────────────────────────────── */ /* ELLES SE REPLIENT À NOUVEAU, ET C'EST UNE RÉPARATION. Le prototype les écrit en `details`/`summary`. La compilation ne connaît pas ces deux balises : elle gardait les textes et jetait la mécanique, et les vingt-cinq questions du Compas arrivaient en paragraphes, toutes dépliées, sur une page qui n'en finissait plus. Une règle `nth-of-type` rendait ici l'alternance question/réponse — elle soignait le symptôme. Les questions passent donc par un bloc HTML du contenu, comme les corps juridiques, les grilles et les carrousels de ce site : la chaîne ne sait pas porter cette forme, et c'est écrit dans `documentation/CE-QUE-LE-PROCESSUS-APPREND.md`. */ .r-questions{margin-top:var(--r-esp-m)} .r-question{background:var(--r-surface);border-radius:14px;padding:16px 20px; box-shadow:var(--r-ombre-douce);margin-bottom:12px} .r-question summary{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; color:var(--r-text-dark);cursor:pointer;list-style:none; display:flex;align-items:flex-start;gap:12px} .r-question summary::-webkit-details-marker{display:none} /* Le chevron dit l'état : fermé il pointe vers le bas, ouvert vers le haut. Il est dessiné en bordures plutôt qu'en image — rien à charger, et il suit la couleur du texte. */ .r-question summary::after{content:"";flex:0 0 auto;margin-left:auto; width:9px;height:9px;margin-top:6px; border-right:2px solid var(--r-teal-dark);border-bottom:2px solid var(--r-teal-dark); transform:rotate(45deg);transition:transform .18s ease} .r-question[open] summary::after{transform:rotate(-135deg);margin-top:10px} .r-question summary:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px; border-radius:8px} .r-question p{margin:.8rem 0 0;padding-left:18px; border-left:2px solid var(--r-teal-light)} /* ── Les cartes ──────────────────────────────────────────────────────── */ /* LE RELIEF REVIENT SUR TOUT LE SITE. Décision de Yan, 16.09.2026, qui revient sur celle du matin : « un petit peu partout », et non au seul héros. La matière redevient donc la règle, et le contour l'exception. Ce que le relief continue de DIRE, et qui ne change pas : une surface soulevée se prend, une surface creusée reçoit. Un site où tout se soulève ne hiérarchise plus rien — c'est pourquoi les panneaux de rappel, les champs, les pastilles d'étape et la barre basse restent CREUSÉS. Le relief partout, oui ; dans le même sens, toujours. Les ombres suivent le fond : la lumière blanche porte davantage sur une bande teintée, et une ombre bleutée n'a rien à faire sur de l'ambre. */ .r-cartes{gap:var(--r-esp-m);margin-top:calc(var(--r-esp-l) + var(--r-esp-s))} .r-cartes .wp-block-column{background:var(--r-bande-carte);border-radius:var(--r-radius); padding:var(--r-esp-l);border:0;box-shadow:var(--r-neu-carte); transition:box-shadow .18s ease,transform .18s ease} .r-cartes .wp-block-column:hover{box-shadow:var(--r-neu-carte-relief); transform:translateY(-2px)} .r-cartes .wp-block-column p:last-child{margin-bottom:0} /* Les six surcharges d'ombre par bande qui vivaient ici ont disparu : la bande déclare sa lumière et son ombre, `--r-neu-carte` les lit. Une carte posée dans une autre bande demain n'a rien à corriger. */ /* ── Les étapes, numérotées par le CSS ───────────────────────────────── */ /* LE NUMÉRO N'EST PAS DU TEXTE, C'EST UN REPÈRE. Le prototype le marque `data-sb-ignore` : il ne doit ni se traduire, ni s'éditer, ni se perdre si une carte bouge. Un compteur CSS le redonne, et il se renumérote tout seul — la page Méthode compte ses six temps sur deux rangées sans que personne ne retape « 4 ». La pastille est creusée : une étape est un jalon posé dans la page, pas un objet à prendre. */ .r-sec--etapes{counter-reset:etape} /* LES ÉTAPES SONT DES CHEVRONS, PAS DES CARTES. Décision de Yan, 16.09.2026. Une suite de cartes dit « voici trois choses » ; une suite de chevrons dit « on va de celle-ci à celle-là ». La forme porte l'ordre, et le lecteur n'a plus à déduire la séquence des numéros. LES CHEVRONS S'EMBOÎTENT PAR UN DÉCALAGE NÉGATIF, ET LE `clip-path` COUPE TOUT CE QU'ON POSERAIT DESSUS — bordure comprise. La séparation ne peut donc pas venir d'un trait : elle vient de la teinte, qui fonce d'un cran à chaque étape. La progression de couleur dit la progression du parcours. `nth-child` vise ici des colonnes, c'est-à-dire les étapes elles-mêmes : un texte qui gagne un paragraphe ne le dérange pas. */ /* LES CHEVRONS NE SE TOUCHENT PAS, ILS SE SUIVENT. Emboîtés par un décalage négatif, leurs pointes se confondaient : sur des fonds presque blancs, l'œil ne voyait qu'un bandeau. Un intervalle de 10 px laisse passer la couleur de la bande, et c'est elle qui dessine la pointe. Constaté à l'image le 16.09.2026, sur l'accueil et sur la page Méthode. */ .r-cartes--etapes{gap:10px;flex-wrap:nowrap} /* LE CHEVRON SE SOULÈVE PAR UN FILTRE, PAS PAR UNE OMBRE PORTÉE. `clip-path` coupe tout ce qui dépasse de la forme — la `box-shadow` comprise, qui est peinte hors de la boîte. Le relief neumorphique d'un chevron ne peut donc pas venir de là. `drop-shadow` suit la silhouette réelle, pointe comprise : deux filtres enchaînés, la lumière puis l'ombre, redonnent le couple qui fait la matière. */ .r-cartes--etapes .wp-block-column{counter-increment:etape; background:var(--r-bande-carte);border:0;border-radius:0;box-shadow:none; padding:var(--r-esp-l) var(--r-esp-l) var(--r-esp-l) calc(var(--r-esp-l) + 20px); filter:drop-shadow(-3px -3px 5px var(--r-bande-lumiere)) drop-shadow(4px 4px 7px var(--r-bande-ombre)); clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%, 0 100%,24px 50%)} .r-cartes--etapes .wp-block-column:first-child{padding-left:var(--r-esp-l); border-radius:16px 0 0 16px; clip-path:polygon(0 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,0 100%)} .r-cartes--etapes .wp-block-column:last-child{border-radius:0 16px 16px 0; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,24px 50%)} .r-cartes--etapes .wp-block-column:hover{transform:none; filter:drop-shadow(-4px -4px 7px var(--r-bande-lumiere)) drop-shadow(6px 6px 10px var(--r-bande-ombre-forte))} /* LA PROGRESSION S'ARRÊTE OÙ LE CONTRASTE S'ARRÊTE. Une teinte plus franche rendait mieux la progression, et faisait tomber le texte courant à 4.1 sur le dernier chevron. Mesuré le 16.09.2026 : le gris du corps tient 4.51 sur #DEEFF3 et 4.38 sur #D9ECF0 — la série s'arrête donc à #E3F1F4, qui garde 4.62. Le pas est plus petit que voulu ; c'est le texte qui commande, pas l'effet. */ .r-cartes--etapes .wp-block-column:nth-child(2){background:var(--r-etape-1)} .r-cartes--etapes .wp-block-column:nth-child(3){background:var(--r-etape-2)} .r-cartes--etapes .wp-block-column:nth-child(4){background:var(--r-etape-3)} .r-cartes--etapes .wp-block-column:nth-child(5){background:var(--r-etape-4)} .r-cartes--etapes .wp-block-column:nth-child(6){background:var(--r-etape-5)} .page-lancer-une-startup .r-cartes--etapes .wp-block-column:nth-child(2){background:var(--r-etape-startup-1)} .page-lancer-une-startup .r-cartes--etapes .wp-block-column:nth-child(3){background:var(--r-etape-startup-2)} /* Le numéro devient une étiquette, puisque la pastille en relief s'en va avec le neumorphisme des cartes. */ .r-cartes--etapes .wp-block-column::before{ content:counter(etape,decimal-leading-zero); display:block;margin-bottom:var(--r-esp-xs); font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-micro); letter-spacing:.14em;color:var(--r-teal-dark)} .page-lancer-une-startup .r-cartes--etapes .wp-block-column::before{color:var(--r-violet-dark)} .r-cartes--etapes .wp-block-column h3{font-size:var(--r-h4)} .r-cartes--etapes .wp-block-column p{font-size:var(--r-txt)} /* EN DESSOUS DE 781 px, WORDPRESS EMPILE SES COLONNES : le chevron doit alors pointer vers le bas, sans quoi la flèche dirait la droite quand la lecture descend. */ @media (max-width:781px){ .r-cartes--etapes{flex-wrap:wrap;gap:10px} .r-cartes--etapes .wp-block-column, .r-cartes--etapes .wp-block-column:first-child, .r-cartes--etapes .wp-block-column:last-child{ padding:var(--r-esp-l) var(--r-esp-l) calc(var(--r-esp-l) + 14px); border-radius:0; clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),50% 100%,0 calc(100% - 20px))} .r-cartes--etapes .wp-block-column:first-child{border-radius:16px 16px 0 0} .r-cartes--etapes .wp-block-column:last-child{ clip-path:polygon(0 0,100% 0,100% 100%,0 100%);border-radius:0 0 16px 16px; padding-bottom:var(--r-esp-l)} } .r-cartes .wp-block-column .wp-block-buttons{margin-top:1.1rem;margin-bottom:0} /* Le premier paragraphe d'une carte sert d'étiquette. */ .r-cartes .wp-block-column .wp-block-group > p:first-child{ font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-micro); letter-spacing:.11em;text-transform:uppercase;color:var(--r-teal-dark); margin-bottom:.6rem} .page-lancer-une-startup .r-cartes .wp-block-column .wp-block-group > p:first-child, .r-cartes .r-carte--violet .wp-block-group > p:first-child{color:var(--r-violet-dark)} /* ── La carte de témoignage ──────────────────────────────────────────── */ /* SON PREMIER PARAGRAPHE EST LA CITATION, PAS UNE ÉTIQUETTE. La règle d'étiquette ci-dessus met le premier paragraphe d'une carte en petites capitales. Sur un témoignage, elle rendait la citation entière en capitales de douze pixels, illisible — relevé à l'image le 16.09.2026. Même poids de sélecteur que l'étiquette : c'est l'ordre qui tranche, donc ce bloc reste APRÈS elle. */ .r-cartes .r-carte--citation .wp-block-group > p:first-child{ font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt);font-weight:600; line-height:1.5;color:var(--r-text-dark);text-transform:none;letter-spacing:0; margin-bottom:.9rem} .r-cartes .r-carte--citation .wp-block-group > p:last-child{ font-size:var(--r-txt-petit);color:var(--r-text-body)} /* LA CARTE DU PARCOURS STARTUP, PARTOUT OÙ ELLE APPARAÎT. Le violet ne dit pas « une autre marque », il dit « l'autre parcours » : il suit la carte, y compris sur l'accueil et sur la page d'échange. */ /* UNE CARTE STARTUP POSÉE DANS UNE AUTRE BANDE EMPORTE SON JEU. Sur l'accueil, la porte « Booster ma startup » vit dans la bande turquoise des trois portes : elle y redéclare les jetons violets, plutôt que de recevoir une ombre écrite à la main. La mécanique reste la même à un cran plus bas, et c'est ce qui évite la liste d'exceptions. */ .r-cartes .r-carte--violet{ --r-bande-carte:#FBF9FE; --r-bande-papier:#F6F3FD; --r-bande-creux:#F1EEFC; --r-bande-ombre:rgba(140,120,200,.34); --r-bande-ombre-forte:rgba(140,120,200,.42); --r-bande-ombre-pose:rgba(78,60,160,.26); --r-bande-filet:rgba(78,60,160,.14); background:linear-gradient(180deg,var(--r-violet-voile),var(--r-bande-carte) 58%)} .r-cartes .r-carte--violet:hover{border-color:var(--r-violet)} .r-cartes .r-carte--violet .wp-block-button__link{color:var(--r-violet-dark)} /* Un lien seul en bas de carte se lit comme une suite, pas comme un bouton. Le `.r-sec` de tête n'est pas décoratif : il passe devant la règle du bouton secondaire, qui vise une suite de groupes de boutons et attraperait sinon le second lien d'une carte. */ .r-sec .r-cartes .wp-block-column .wp-block-button__link{background:transparent; color:var(--r-teal-dark);box-shadow:none;padding:0;text-decoration:underline; text-underline-offset:4px} .r-sec .r-cartes .wp-block-column .wp-block-button__link:hover{background:transparent; color:var(--r-text-dark);transform:none;box-shadow:none} .page-lancer-une-startup .r-sec .r-cartes .wp-block-column .wp-block-button__link{ color:var(--r-violet-dark)} /* ── Les prix ────────────────────────────────────────────────────────── */ /* ELLES NE SE DISTINGUENT PLUS PAR LEUR MARGE INTÉRIEURE, MAIS PAR LEUR CONTENU. Elles donnaient 34 px là où les autres cartes donnaient 28 : deux nombres pour une même nature, sans qu'on sache lequel faisait foi. */ .page-offres .r-sec--offres .r-cartes--2 .wp-block-column h3{font-size:var(--r-h3);margin-bottom:.15em} /* LE MONTANT EST LE PREMIER PARAGRAPHE QUI SUIT LE TITRE DE LA CARTE. C'est ce qu'on vient chercher sur une page de prix : il se lit de loin. */ .page-offres .r-sec--offres .r-cartes--2 .wp-block-column h3 + p{font-family:'Kulim Park',Arial,sans-serif; font-weight:700;font-size:var(--r-prix);color:var(--r-teal-dark);margin-bottom:1.1rem; padding-bottom:1.1rem;border-bottom:1px solid var(--r-bord)} /* La liste d'inclusions commence après le montant et la cadence. Elle porte la colonne des coches, dessinée plus haut. */ .page-offres .r-sec--offres .r-cartes--2 .wp-block-column h3 + p + p ~ p{ position:relative;padding-left:38px;min-height:26px;color:var(--r-text-dark)} .page-offres .r-sec--offres .r-cartes--2 .wp-block-column p{margin-bottom:.55rem} .page-offres .r-sec--offres .r-cartes--2 .wp-block-column .wp-block-button__link{ background:var(--r-teal-dark);color:var(--r-encre-inverse);padding:14px 26px;text-decoration:none; box-shadow:0 10px 22px rgba(26,115,127,.3)} .page-offres .r-sec--offres .r-cartes--2 .wp-block-column .wp-block-button__link:hover{ background:var(--r-teal-enfonce);color:var(--r-encre-inverse)} /* L'INTRO S'ALIGNE SUR LES CARTES, PAS SUR LE CENTRE. Une mise en page contrainte centre ce qui porte une largeur maximale ; l'intro se retrouvait donc décalée vers l'intérieur, et le regard butait sur deux bords gauches différents. */ /* Le groupe d'un pattern reste CONTRAINT comme la bande qui le porte : c'est ce qui aligne son titre sur le bord gauche des cartes. */ /* Une largeur maximale, dans une mise en page contrainte, se centre toute seule. Un paragraphe se retrouvait donc rentré vers l'intérieur alors que son titre commençait au bord. */ /* LA LONGUEUR DE LIGNE SE RÈGLE PAR LA MARGE INTÉRIEURE, PAS PAR LA LARGEUR. La mise en page contrainte de WordPress centre ses enfants avec `margin:auto !important` : un paragraphe à qui l'on donne une largeur maximale se retrouve centré sous son titre, qui, lui, commence au bord. En gardant la largeur du bloc et en poussant sa marge intérieure droite, le texte se coupe au bon endroit ET reste aligné sur le titre. */ .r-sec > .wp-block-group > p{padding-right:max(0px,calc(100% - 64ch))} /* WORDPRESS POSE `has-global-padding` SUR CHAQUE GROUPE CONTRAINT. Un pattern posé dans une bande, ou dans une carte, héritait donc d'une marge intérieure de plus : le texte rentrait d'un cran à chaque niveau. La bande porte déjà sa marge, les cartes la leur. */ .r-sec .wp-block-group.has-global-padding{padding-left:0;padding-right:0} /* SAUF LE PANNEAU, QUI EST UNE SURFACE ET NON UN GROUPE DE MISE EN PAGE. La règle ci-dessus lui retirait aussi ses marges latérales : mesuré au navigateur le 16.09.2026, un panneau donnait 44 px en haut et 0 sur les côtés, texte collé au bord de sa propre carte. Elle pèse trois classes, il en fallait donc trois et un enfant direct pour la reprendre. */ .r-sec--panneau > .wp-block-group.has-global-padding{ padding-left:var(--r-esp-l);padding-right:var(--r-esp-l)} /* ── Les icônes des portes ───────────────────────────────────────────── */ /* ELLES VIVENT DANS LE CONTENU, PAS DANS LE PROTOTYPE : un dessin ne se traduit pas et ne s'édite pas. Elles prennent la couleur de leur carte par `currentColor` — la porte Startup les passe en violet sans une règle de plus, et un changement de palette les suit toutes seules. */ /* LA COULEUR SE POSE SUR L'ICÔNE, PAS SUR LA CARTE. Portée par la colonne, elle descendait sur tout le texte : les trois portes se sont retrouvées écrites en turquoise et en violet. Constaté à l'image le 16.09.2026. `currentColor` ne vaut que pour le dessin. */ .r-icone{display:block;margin-bottom:var(--r-esp-s);color:var(--r-teal-dark)} .r-carte--violet .r-icone{color:var(--r-violet-dark)} /* ── Les trois portes, chacune sa couleur ────────────────────────────── */ /* Yan, 16.09.2026 : « chacun pourra avoir une autre couleur, un tout petit peu différente ». Le filet d'en-tête porte la couleur VIVE, l'icône et le lien sa version qui passe le contraste. Le texte courant, lui, ne change jamais de teinte : une carte se distingue par son accent, pas en rendant sa lecture plus difficile. */ .r-cartes--portes .wp-block-column{position:relative;overflow:hidden} .r-cartes--portes .wp-block-column::before{content:"";position:absolute; left:0;right:0;top:0;height:4px;background:var(--r-teal)} /* LE FILET DE CHAQUE PORTE PERDAIT CONTRE LA RÈGLE COMMUNE. `.r-cartes--portes .wp-block-column::before` pèse deux classes ; les trois filets de couleur n'en pesaient qu'une, et le turquoise commun gagnait sur les trois cartes. Constaté à l'image le 16.09.2026, après la teinte par bande : la porte Startup était violette de surface, et turquoise de filet. On rétablit l'ordre par le poids, sans `!important`. */ .r-cartes--portes .r-porte--startup::before{background:var(--r-violet)} .r-cartes--portes .r-porte--optimiser::before{background:var(--r-orange)} .r-porte--optimiser .r-icone, .r-sec .r-cartes .r-porte--optimiser .wp-block-button__link{ color:var(--r-ambre-texte)} /* Même histoire de poids pour son sur-titre : `.r-cartes .wp-block-column .wp-block-group > p:first-child` pèse trois classes, et le gris commun gagnait sur l'ambre. */ .r-cartes .r-porte--optimiser .wp-block-group > p:first-child{ color:var(--r-ambre-texte)} /* Et elle emporte son jeu de bande, comme la porte Startup emporte le sien : surface crème, ombre ambrée, filet ambré. Les composites se redéclarent ici, sans quoi elle hériterait de ceux de la bande turquoise. */ .r-cartes .r-porte--optimiser{ --r-bande-carte:#FFFCF6; --r-bande-papier:#FDF8EE; --r-bande-creux:#F7EEDD; --r-bande-ombre:rgba(196,169,124,.4); --r-bande-ombre-forte:rgba(196,169,124,.48); --r-bande-ombre-pose:rgba(143,91,8,.26); --r-bande-filet:rgba(143,91,8,.14); background:var(--r-bande-carte)} /* ── Le disque de la méthode ─────────────────────────────────────────── */ /* Le SVG hérite de la police par le CSS : ses étiquettes restent dans la typographie de la marque sans qu'il faille la répéter dans le dessin. */ .r-disque{display:block;width:min(100%,560px);height:auto; margin:clamp(22px,3vw,40px) auto clamp(10px,2vw,20px); font-family:'Kulim Park',Arial,sans-serif} .r-domaines__titre{text-align:center;margin:0 0 .9rem; font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-micro); letter-spacing:.11em;text-transform:uppercase;color:var(--r-text-muted)} .r-domaines{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r-esp-xs);padding:0; margin:0 auto;justify-content:center;max-width:760px} .r-domaines li{background:var(--r-bande-carte);border:0; border-radius:999px;padding:7px 15px;font-size:var(--r-txt-petit);margin:0; color:var(--r-text-dark);box-shadow:var(--r-neu-btn)} /* ── Le logo d'une marque partenaire ─────────────────────────────────── */ /* Blackformance apparaît sur le parcours Startup : elle y conduit l'analyse. Le logo reste discret, aligné sur le texte qu'il accompagne. */ .r-logo-partenaire{margin:0 0 1.4rem;line-height:0} .r-logo-partenaire img{display:block;width:168px;height:auto} /* ── Les listes de fiches (catalogue, partenaires) ───────────────────── */ .r-liste{margin-top:calc(var(--r-esp-l) + var(--r-esp-s))} .r-liste .wp-block-post-template{gap:var(--r-esp-m);padding:0;margin:0} .r-liste .wp-block-post-template > li{background:var(--r-bande-carte); border-radius:var(--r-radius);padding:var(--r-esp-l);border:0; box-shadow:var(--r-neu-carte);list-style:none; transition:box-shadow .18s ease,transform .18s ease} .r-liste .wp-block-post-template > li:hover{box-shadow:var(--r-neu-carte-relief); transform:translateY(-2px)} .r-liste .wp-block-post-title{font-size:var(--r-h4);margin:0 0 .5em} .r-liste .wp-block-post-title a{color:var(--r-text-dark);text-decoration:none} .r-liste .wp-block-post-title a:hover{color:var(--r-teal-dark)} .r-liste .wp-block-post-excerpt__excerpt{margin:0;font-size:var(--r-txt)} .r-liste .wp-block-post-excerpt__more-text{display:none} /* ── Les champs, creusés plutôt que cerclés ──────────────────────────── */ /* Le pendant du relief : ce qui reçoit une saisie s'enfonce. Les sélecteurs couvrent les champs de Fluent Forms comme ceux du cœur, sans dépendre du balisage de l'extension au-delà de sa classe d'enveloppe. */ .r-sec input[type=text],.r-sec input[type=email],.r-sec input[type=tel], .r-sec input[type=url],.r-sec input[type=number],.r-sec input[type=date], .r-sec textarea,.r-sec select, .fluentform input[type=text],.fluentform input[type=email], .fluentform input[type=tel],.fluentform input[type=url], .fluentform textarea,.fluentform select{ width:100%;background:var(--r-bande-creux);border:0;border-radius:14px; padding:13px 16px;color:var(--r-text-dark);font-family:inherit;font-size:var(--r-txt); box-shadow:var(--r-neu-creux);transition:box-shadow .2s ease} .r-sec textarea,.fluentform textarea{min-height:140px;line-height:1.55} .r-sec input:focus,.r-sec textarea:focus,.r-sec select:focus, .fluentform input:focus,.fluentform textarea:focus,.fluentform select:focus{ outline:3px solid var(--r-teal-dark);outline-offset:2px} .fluentform .ff-el-input--label label{font-family:'Kulim Park',Arial,sans-serif; font-weight:700;color:var(--r-text-dark);margin-bottom:.4rem;display:block} .fluentform .ff-el-group{margin-bottom:1.1rem} /* LE BOUTON D'ENVOI SE REPREND PAR LA VARIABLE, PAS PAR LA FORCE. Fluent Forms imprime dans la page `form.fluent_form_1 .ff-btn-submit:not( .ff_btn_no_style){background:var(--fluentform-primary)}` : trois classes et un élément, que nos deux classes ne battaient pas — le bouton restait bleu vif, libellé blanc à 3.87, sous le seuil et étranger à la marque. Plutôt que de surenchérir en spécificité, on redéfinit LA VARIABLE qu'il lit : sa règle continue de s'appliquer, avec notre turquoise. Mesuré à l'axe le 16.09.2026. */ .fluentform{--fluentform-primary:var(--r-teal-dark)} .fluentform .ff-btn, .fluentform .ff-btn-submit{border-radius:999px;padding:14px 26px;border:0; font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-petit); background:var(--r-teal-dark);color:var(--r-encre-inverse);cursor:pointer; box-shadow:0 10px 22px rgba(26,115,127,.3); transition:background .2s ease,transform .14s ease} .fluentform .ff-btn:hover, .fluentform .ff-btn-submit:hover{background:var(--r-teal-enfonce);color:var(--r-encre-inverse); transform:translateY(-1px)} .fluentform .ff-btn:active, .fluentform .ff-btn-submit:active{transform:translateY(1px)} /* ── Pied de page ────────────────────────────────────────────────────── */ /* LA CARTE BLANCHE DU BLOC D'IDENTITÉ EST RETIRÉE LE 16.09.2026. Posée sur le gris, elle flottait au milieu de colonnes restées à plat, et Yan l'a relevée à l'image : « le bas de page n'est pas beau ». Le pied redevient une seule surface, tenue par un filet haut et par des colonnes de même poids. Le relief, lui, reste où il sert : les objets qu'on prend. */ /* Le pied est plus petit que le corps, et il l'est ENTIÈREMENT : ses liens relevaient à 18 px quand le menu, qui dit la même chose, était à 15. */ .r-pied{background:var(--r-bg); border-top:1px solid var(--r-bord); font-size:var(--r-txt-petit); padding:56px var(--r-marge-d) 30px var(--r-marge-g)} .r-pied .wp-block-columns > .wp-block-column{align-self:flex-start} .r-pied .r-logo{margin-bottom:14px} .r-pied .r-pied__mention{border-top:1px solid var(--r-bord); margin-top:30px;padding-top:18px;color:var(--r-text-muted)} .r-pied h3{font-size:var(--r-txt-micro);letter-spacing:.11em;text-transform:uppercase; color:var(--r-text-muted);margin-bottom:.9em} .r-pied ul{list-style:none;padding:0;margin:0} .r-pied li{margin-bottom:.5rem} .r-pied a{color:var(--r-text-body);text-decoration:none} .r-pied a:hover{color:var(--r-teal-dark);text-decoration:underline} .r-pied .wp-block-columns{gap:32px} /* ── La barre basse, qui suit la lecture ─────────────────────────────── */ .r-barre{position:sticky;bottom:0;z-index:20;background:rgba(255,255,255,.96); border-top:1px solid var(--r-bord);font-size:var(--r-txt-petit); padding:9px var(--r-marge-d) 9px var(--r-marge-g); backdrop-filter:saturate(1.3) blur(6px); transition:padding .2s ease,font-size .2s ease,background .2s ease} .r-barre a{color:var(--r-text-body);text-decoration:none} .r-barre a:hover{color:var(--r-teal-dark)} /* Le lien du bouton est un lien : sans cette ligne il reprenait le gris de la barre sur son fond turquoise, et le libellé disparaissait. */ .r-barre .wp-block-button__link{padding:9px 18px;font-size:var(--r-txt-petit);box-shadow:none; color:var(--r-encre-inverse)} .r-barre .wp-block-button__link:hover{color:var(--r-encre-inverse)} .r-barre p{margin:0} /* ARRIVÉE AU PIED DE PAGE, LA BARRE S'Y POSE ET S'Y DÉPLIE. Elle cessait de flotter d'un coup, en laissant un trait blanc en travers du pied. Posée, elle prend le fond du pied, perd sa bordure, s'aère, et son appel reprend sa taille normale : elle devient la première ligne du pied au lieu d'un bandeau par-dessus. La classe vient de `assets/js/site.js`, qui observe l'entrée du pied à l'écran. */ /* POSÉE, ELLE SE CREUSE : C'EST UN RAIL, PAS UNE CARTE. Elle ne se prend pas, elle accompagne — le creux la range d'un cran sous le pied au lieu de la faire flotter par-dessus. Même règle que les champs et les panneaux de rappel : ce qui reçoit s'enfonce, ce qui se prend se soulève. */ .r-barre--posee{position:static;background:var(--r-bg); border-top:0;font-size:var(--r-txt-petit);box-shadow:var(--r-neu-rail-creux); padding:22px var(--r-marge-d) 22px var(--r-marge-g); backdrop-filter:none} .r-barre--posee .wp-block-button__link{padding:13px 24px;font-size:var(--r-txt-petit); box-shadow:0 10px 22px rgba(26,115,127,.3)} .r-barre--posee + .r-pied{padding-top:34px} /* ── Listes ──────────────────────────────────────────────────────────── */ main ul{padding-left:1.1rem} main li{margin-bottom:.45rem} main li strong,main p strong{color:var(--r-text-dark)} /* ── Le contour de focus, seul repère au clavier ─────────────────────── */ a:focus-visible,button:focus-visible,summary:focus-visible{ outline:3px solid var(--r-teal-dark);outline-offset:3px;border-radius:4px} /* ── Écrans étroits ──────────────────────────────────────────────────── */ /* LA GOUTTIÈRE SE RESSERRE, ET ELLE SEULE : LES BANDES, L'EN-TÊTE, LA BARRE ET LE PIED SUIVENT LE JETON. Aucune de ces règles ne redéclare un retrait latéral — c'est ainsi qu'ils restent alignés. */ @media (max-width:781px){ :root{--r-marge:20px} /* La marge intérieure des cartes ne se redéclare PAS ici : `--r-esp-l` est fluide, il vaut déjà 24 px sous 1090 px de large. Une valeur de plus rouvrirait exactement l'écart qu'on vient de fermer. */ /* LA COLONNE DE TEXTE D'UN HÉROS N'EST PAS UNE CARTE. La même règle habillait les deux : le titre d'un héros commençait donc 36 px du bord quand la section suivante commençait à 16. Le panneau « En bref », lui, est une vraie carte et garde sa marge intérieure. */ .r-heros .wp-block-column{padding-inline:0} } @media (max-width:400px){ :root{--r-marge:18px} } /* Une animation qui ne se coupe pas rend certaines personnes malades. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms;animation-iteration-count:1; transition-duration:.001ms;scroll-behavior:auto} .wp-block-button__link:hover,.wp-block-button__link:active, .r-cartes .wp-block-column:hover,.r-liste .wp-block-post-template > li:hover{ transform:none} } [hidden]{display:none !important} /* ══════════════════════════════════════════════════════════════════════ MATIÈRE PARTOUT, HABITATION DANS LES HÉROS Décision de Yan, 16.09.2026, après avoir comparé les trois études du dossier `01_STRATEGY/offre/design/` : il retient « Matière » et aime « Habitée ». On combine, avec une règle qui empêche la surcharge. Matière la base du site. La hiérarchie vient de la typographie, les cartes sont à peine soulevées, les bords adoucis, et le fond porte une texture qu'on ne voit pas mais qui se sent. Habitée les héros SEULEMENT : monogramme en filigrane, dégradé très doux, liseré de la couleur du parcours. Poussé ce que l'étude `design/pousse/` a validé, et rien d'autre : rayon plus généreux et ombre plus longue sur ce qui SE PREND, liseré de lumière intérieure sur le bouton principal, commandes en rail creusé. Ce qui reste dehors, et c'est l'étude qui le dit : la surface dégradée généralisée (elle mange le contraste pour un gain discret), le relief sur les blocs de texte courant, et le panneau sombre ailleurs qu'à un endroit par page. Les valeurs ci-dessous sont celles des études, pas des nôtres. ══════════════════════════════════════════════════════════════════════ */ :root{ /* Le rayon des objets qui se prennent : une longueur, pas une couleur, donc il n'a pas à suivre la bande. */ --r-radius-prise:28px; } /* LA TEXTURE : DU BRUIT, PAS UN MOTIF. Un bruit fractal à 2,8 % d'opacité, calculé par le navigateur et non téléchargé : rien ne sort de ce site, et le fichier ne pèse rien. On le voit à peine, et c'est le but — il empêche le grand aplat gris de sonner creux sous les bandes claires. */ body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.028'/%3E%3C/svg%3E")} /* ── La typographie porte la hiérarchie ──────────────────────────────── */ /* C'est la définition même de la direction retenue : ce qui distingue un titre d'un autre n'est pas son ombre, c'est sa taille et son approche. Les échelles sont celles de `direction-3-matiere.html`, converties en rem. */ h1,h1.wp-block-heading{font-size:var(--r-h1);letter-spacing:-.032em} h2,h2.wp-block-heading{font-size:var(--r-h2);letter-spacing:-.026em} /* ── Les cartes de texte se posent ───────────────────────────────────── */ /* Trois classes, comme les règles de bande qu'elles remplacent : à égalité de poids, c'est la dernière écrite qui gagne, et elle est ici. */ .r-sec .r-cartes .wp-block-column{ background:var(--r-papier);border:1px solid var(--r-filet); box-shadow:var(--r-pose)} .r-sec .r-cartes .wp-block-column:hover{ box-shadow:var(--r-pose-haute);transform:translateY(-2px)} .r-sec .r-liste .wp-block-post-template > li{ background:var(--r-papier);border:1px solid var(--r-filet); box-shadow:var(--r-pose)} .r-sec .r-liste .wp-block-post-template > li:hover{ box-shadow:var(--r-pose-haute)} /* ── Ce qui se prend garde son relief ────────────────────────────────── */ .r-sec .r-cartes--portes .wp-block-column, .page-offres .r-sec--offres .r-cartes--2 .wp-block-column{ background:var(--r-bande-carte);border:0; border-radius:var(--r-radius-prise);box-shadow:var(--r-neu-prise)} .r-sec .r-cartes--portes .wp-block-column:hover, .page-offres .r-sec--offres .r-cartes--2 .wp-block-column:hover{ box-shadow:var(--r-neu-prise-haute);transform:translateY(-2px)} /* Le panneau « En bref » reste creusé — il rappelle, il ne se prend pas — mais il suit le rayon des objets du héros, sans quoi deux arrondis différents se disputent le même bloc. */ .r-heros .r-carte--bref{border-radius:var(--r-radius-prise)} /* ── Le bouton principal prend sa lumière intérieure ─────────────────── */ /* Le seul emprunt du relief poussé qui touche un objet présent sur toutes les pages : un liseré clair d'un pixel en haut, qui fait lire la surface comme bombée. Le fond, lui, ne change pas : il porte le contraste. */ .wp-block-button__link{ box-shadow:0 10px 22px rgba(26,115,127,.3), inset 0 1px 0 rgba(255,255,255,.28)} .page-lancer-une-startup .wp-block-button__link{ box-shadow:0 10px 22px rgba(110,90,200,.26), inset 0 1px 0 rgba(255,255,255,.28)} /* ── Habitée : les héros, et eux seuls ───────────────────────────────── */ /* LE FILIGRANE EST UNE DÉCORATION, DONC IL N'EST PAS DANS LE TEXTE. Posé en pseudo-élément, il n'entre pas dans l'arbre d'accessibilité : un lecteur d'écran ne le rencontre jamais, sans qu'on ait à le masquer. Il reste à 5 % d'opacité et se retire sous 900 px, où il passerait sous le texte au lieu de passer derrière lui. */ .r-sec--hero{position:relative;overflow:hidden; border-bottom:3px solid var(--r-teal)} .r-sec--hero::after{content:"";position:absolute; right:-70px;top:50%;transform:translateY(-50%); width:min(420px,46vw);aspect-ratio:1; background:url("assets/img/monogram.svg") center/contain no-repeat; opacity:.05;pointer-events:none} .r-sec--hero > *{position:relative;z-index:1} .page-lancer-une-startup .r-sec--hero{border-bottom-color:var(--r-violet)} /* AUCUN DÉGRADÉ SOUS UN PARAGRAPHE LONG. Le Compas, les mentions et le contact ouvrent sur du texte suivi : le dégradé y grignoterait le contraste pour rien. Ces pages gardent le liseré du parcours, qui suffit à les rattacher au reste. */ .page-compas .r-sec--hero, .page-contact .r-sec--hero, .page-mentions-legales .r-sec--hero{background:none} .page-compas .r-sec--hero::after, .page-contact .r-sec--hero::after, .page-mentions-legales .r-sec--hero::after{display:none} @media (max-width:900px){ .r-sec--hero::after{display:none} } /* ════════════════════════════════════════════════════════════════════════ LE SITE REFAIT DEPUIS LE DECK, 18.09.2026 Plan : 02_WEB/260918-plan-du-site-realisons-v3.md. Fond : deck v15. Les règles ci-dessous habillent les composants nouveaux ; elles lisent les jetons déjà déclarés (bandes, marges, espacements) et n'en ajoutent pas. ════════════════════════════════════════════════════════════════════════ */ /* ── Le point orange des titres (charte, ligne 267 ; posé par site.js) ── */ .r-point{color:var(--r-orange)} /* ── Le ® qui suit « Réalisons » : petit, surélevé, sans toucher l'interligne ─ */ .r-reg{font-size:.58em;line-height:0;position:relative;top:-.62em;margin-left:.04em; vertical-align:baseline} .r-nav .r-podcast,.r-entete__mobile .r-podcast{display:inline-flex;align-items:center; justify-content:center;width:40px;height:40px;border-radius:999px; color:var(--r-teal-dark);background:var(--r-surface);box-shadow:var(--r-ombre-douce)} .r-podcast:hover{color:var(--r-orange-dark)} .r-entete__mobile{display:none;align-items:center;gap:10px} @media (max-width:900px){ .r-entete__mobile{display:inline-flex} } /* ── Le héros de l'accueil : les publics en pastilles ────────────────── */ .r-publics{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:var(--r-esp-m) 0 0;padding:0} .r-publics li{margin:0;padding:8px 18px;border-radius:999px;background:var(--r-surface); color:var(--r-teal-dark);font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-txt-petit);box-shadow:var(--r-ombre-douce)} /* ── La situation, le but, l'approche : trois colonnes de même poids ─── */ .r-cartes--situation{margin-top:0} .r-cartes--situation .wp-block-column{border-top:4px solid var(--r-teal)} .r-cartes--situation .wp-block-column:nth-child(2){border-top-color:var(--r-orange)} .r-cartes--situation p.sb-c-surtitre{font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt-micro); font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--r-text-dark); margin-bottom:var(--r-esp-xs)} /* ── Ce que ça apporte : les pictogrammes du deck, en cartes ─────────── */ .r-apports{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r-esp-m); margin-top:calc(var(--r-esp-l) + var(--r-esp-s))} .r-apport{background:var(--r-bande-carte);border-radius:var(--r-radius);padding:var(--r-esp-l); box-shadow:var(--r-neu-carte);text-align:center} .r-apport__picto{display:block;margin:0 auto var(--r-esp-s);width:112px;height:112px} .r-apport h3{font-size:var(--r-h3);margin:0 0 .5em;color:var(--r-text-dark)} .r-apport > p{margin:0 0 var(--r-esp-m);color:var(--r-text-dark)} .r-apport__gains{list-style:none;margin:0;padding:var(--r-esp-s) 0 0;text-align:left; border-top:1px solid var(--r-bande-filet,var(--r-bord))} .r-apport__gains li{display:flex;align-items:center;gap:12px;margin:0 0 10px;color:var(--r-text-dark)} .r-apport__gains li:last-child{margin-bottom:0} .r-ico{flex:0 0 auto;width:28px;height:28px} .r-apport--court > p{margin-bottom:0} @media (max-width:860px){ .r-apports{grid-template-columns:1fr} } /* ── Le relais, entre deux bandes : une phrase et un bouton ──────────── */ .r-sec--relais{padding-top:var(--r-esp-l);padding-bottom:var(--r-esp-l)} .r-sec--relais > .wp-block-group{display:flex;flex-wrap:wrap;align-items:center; justify-content:space-between;gap:var(--r-esp-s) var(--r-esp-m)} .r-sec--relais p{margin:0;font-size:var(--r-txt);color:var(--r-text-dark);max-width:52ch} .r-sec--relais .wp-block-buttons{margin:0} /* ── Les infographies du deck : le dessin en grand, le texte en petit écran ─ */ .r-infographie{margin-top:calc(var(--r-esp-l) + var(--r-esp-s))} .r-infographie__dessin svg{display:block;width:100%;height:auto; font-family:'Kulim Park',Arial,sans-serif} .r-infographie__texte{position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} /* SOUS 900 px, LE DESSIN NE DISPARAÎT PLUS : IL CHANGE DE FORME. Yan, capture d'iPhone le 19.10.2026 : « il manque les illustrations en responsive ». Jusque-là, les schémas s'effaçaient au profit de cartes de texte — un choix de lisibilité qui coûtait à la page son langage visuel, précisément là où une bonne part des visiteurs la lisent. Chaque schéma a donc DEUX dessins : celui du large, et une variante verticale pensée pour l'étroit. Jamais les deux à la fois. Le repli textuel, lui, ne se montre plus — il reste au lecteur d'écran, qu'on soit large ou étroit, et il dit la même chose que le dessin. Les étiquettes des variantes verticales sont dimensionnées pour rendre AU MOINS 16 px à 360 de large, la plus étroite que nous visons. */ .r-infographie__dessin--etroit{display:none} @media (max-width:900px){ .r-infographie__dessin--large{display:none} .r-infographie__dessin--etroit{display:block} /* TANT QU'UN SCHÉMA N'A PAS SA VARIANTE VERTICALE, il garde l'ancien repli : ses cartes de texte reparaissent. La règle se désarme d'elle-même le jour où la variante arrive — c'est ce qui empêche de laisser un schéma dans un état intermédiaire, sans dessin ni cartes. */ .r-infographie:not(:has(.r-infographie__dessin--etroit)) .r-infographie__dessin{display:none} .r-infographie:not(:has(.r-infographie__dessin--etroit)) .r-infographie__texte{ position:static;width:auto;height:auto;overflow:visible; clip:auto;clip-path:none;white-space:normal} } .r-infographie__texte ol,.r-infographie__texte ul{list-style:none;margin:0;padding:0} .r-infographie__texte li{background:var(--r-bande-carte);border-radius:18px; padding:14px 18px;margin:0 0 10px;box-shadow:var(--r-ombre-douce)} .r-infographie__texte li strong{display:block;font-family:'Kulim Park',Arial,sans-serif; color:var(--r-text-dark);font-size:var(--r-txt)} .r-infographie__texte li span{color:var(--r-text-body)} .r-cycle__duo{display:flex;gap:10px;margin:0 0 14px} .r-cycle__duo span{flex:1;text-align:center;padding:12px 8px;border-radius:999px; font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-petit);letter-spacing:.06em; text-transform:uppercase;background:var(--r-teal-light);color:var(--r-teal-dark)} .r-cycle__duo span + span{background:var(--r-bord);color:var(--r-text-dark)} .r-cycle{counter-reset:cycle} .r-cycle li{position:relative;padding-left:58px;counter-increment:cycle} .r-cycle li::before{content:counter(cycle);position:absolute;left:16px;top:50%; transform:translateY(-50%);width:28px;height:28px;border-radius:50%; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--r-txt-petit); background:var(--r-teal-dark);color:var(--r-encre-inverse)} .r-cycle .r-cycle__etape--seance{box-shadow:inset 0 0 0 2px var(--r-orange)} .r-cycle__retour{margin:4px 0 0;color:var(--r-teal-dark);font-weight:700} .r-temps{margin-bottom:var(--r-esp-m)} .r-pistes__titre{font-family:'Kulim Park',Arial,sans-serif;font-weight:700;color:var(--r-text-dark); margin:0 0 10px} .r-bloc{border-radius:var(--r-radius);padding:var(--r-esp-l);margin-bottom:var(--r-esp-m)} .r-bloc--accompagnement{background:var(--r-surface);box-shadow:inset 0 0 0 2px var(--r-teal)} .r-bloc--realisation{background:var(--r-bg);box-shadow:inset 0 0 0 2px var(--r-bord-fort)} .r-bloc__titre{font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-micro); letter-spacing:.12em;text-transform:uppercase;color:var(--r-teal-dark);margin:0 0 12px} .r-bloc--realisation .r-bloc__titre{color:var(--r-text-body)} .r-bloc__duo{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--r-text-dark); font-weight:700} .r-bloc__fleche{color:var(--r-orange-dark)} .r-bloc__option{margin:12px 0 0;color:var(--r-text-body)} .r-bloc__option strong{color:var(--r-text-dark)} .r-voies li{display:flex;align-items:center;gap:12px;box-shadow:none;background:var(--r-surface)} .r-voies .r-ico{stroke:var(--r-text-body)} /* ── Les domaines : une liste qui se lit en colonnes ─────────────────── */ .r-domaines-liste{list-style:none;margin:calc(var(--r-esp-l) + var(--r-esp-s)) 0 0;padding:0; columns:4 12rem;column-gap:var(--r-esp-m);border-top:4px solid var(--r-teal)} .r-domaines-liste li{break-inside:avoid;margin:0;padding:12px 2px; border-bottom:1px solid var(--r-bord);color:var(--r-text-dark)} .r-domaines-liste--courte{columns:3 12rem} @media (max-width:560px){ .r-domaines-liste,.r-domaines-liste--courte{columns:2} } /* ── Les marques de la maison et nos partenaires : tuiles égales ─────── */ .r-tuiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--r-esp-s);margin:calc(var(--r-esp-l) + var(--r-esp-s)) 0 0;padding:0} .r-tuile{margin:0;min-height:104px;border-radius:18px;background:var(--r-bande-creux); display:flex;align-items:center;justify-content:center;gap:10px;padding:14px} .r-tuile img{display:block;width:auto;max-width:100%;height:auto} .r-l--large{height:26px} .r-l--sidelune{width:150px} .r-l--carre{height:74px} .r-l--yf{height:78px} .r-l--clairvidence{width:160px} .r-l--symbole{height:36px} .r-tuile__nom,.r-tuile__texte{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; color:var(--r-text-dark)} .r-tuile__nom{font-size:var(--r-txt)} /* EXCEPTION ASSUMÉE : Gneiz n'a pas de logo validé, son nom est donc rendu en texte dans une tuile qui contient partout ailleurs une image. Il prend la place d'un logo, pas celle d'un titre. */ .r-tuile__texte{font-size:1.5rem} .r-tuile--partenaires{flex-direction:column;gap:0;background:var(--r-surface); box-shadow:inset 0 0 0 2px var(--r-teal)} /* LA TUILE QUI COMPTAIT NE COMPTE PLUS. Yan le 18.10.2026 : « 30+ partenaires » disparaît du site, partout, et se dit « des partenaires sélectionnés avec soin ». La tuile reste — c'est la dernière de la grille des marques — mais elle porte une phrase, pas un chiffre : elle se lit donc comme les noms, à la taille des noms. */ .r-tuile--partenaires a,.r-tuile--partenaires span{ font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-txt-petit);line-height:1.3;text-align:center; color:var(--r-teal-dark);text-decoration:none;text-wrap:balance} .r-tuile--partenaires a:hover{color:var(--r-orange-dark);text-decoration:underline} @media (max-width:781px){ .r-tuiles{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ── La genèse de la marque ──────────────────────────────────────────── */ /* Yan le 20.10.2026 : « le texte qui est indiqué ici, c'est plus un petit peu la genèse de Réalisons ». Il était présenté comme la biographie du fondateur, dans une carte à part au-dessus de l'équipe — ce qui mettait Yan hors de son propre site. Le texte raconte d'où vient la marque : il devient une section, et son auteur redescend dans l'équipe, en première carte. La carte isolée du fondateur n'a donc plus d'objet, et ses règles partent avec elle. Elles sont dans l'historique si une page en redemande une. */ .r-sec--genese p{max-width:68ch;font-size:var(--r-txt);line-height:1.7} /* Le portrait de la première carte garde le cercle orange qui le distinguait : il disait le fondateur, et il le dit toujours, dans la grille cette fois. */ .r-personne:first-child .r-personne__portrait{ box-shadow:0 0 0 3px var(--r-orange)} /* ── L'offre conseillée, l'analyse, l'agenda ─────────────────────────── */ .r-sec--analyse .r-bf{max-width:72.5rem;margin-inline:auto} .r-bf{margin-bottom:var(--r-esp-m);line-height:0} .r-bf img{width:220px;height:auto} .r-joindre{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r-esp-m); margin:var(--r-esp-l) 0 0;padding:0} .r-joindre li{margin:0;background:var(--r-bande-carte);border-radius:var(--r-radius); padding:var(--r-esp-l);min-width:16rem;box-shadow:var(--r-neu-carte)} .r-joindre span{display:block;font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt-micro); font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--r-text-body)} .r-joindre a{font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-h3); color:var(--r-teal-dark);text-decoration:none} /* ── Les offres ──────────────────────────────────────────────────────── */ .r-cartes--offres .wp-block-column h3{font-size:var(--r-h3);margin-bottom:.2em} .r-cartes--offres .sb-c-prix{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-prix);color:var(--r-text-dark);margin-bottom:.2rem} .r-cartes--offres .sb-c-cadence{color:var(--r-teal-dark);font-weight:700;margin-bottom:1rem} .r-cartes--offres .r-offre-carte--phare{box-shadow:var(--r-neu-carte),inset 0 4px 0 var(--r-orange)} /* UN PARAGRAPHE QUE LE SHORTCODE LAISSE VIDE NE DOIT PAS LAISSER SON TROU. `[r_acheter]` rend une chaîne vide tant que l'adresse Payrexx de l'offre n'est pas renseignée — c'est voulu, et c'est mieux qu'un bouton qui mène nulle part. Mais le paragraphe compilé reste dans la page et garde sa marge. Mesuré le 21.10.2026 sur /offres/ : trois `

` vides, donc trois trous sous les trois cartes d'offre. La règle disparaît d'elle-même le jour où les adresses sont posées. */ .sb-c-achat:empty{display:none} .r-sec .r-cartes--offres .wp-block-column .wp-block-button__link{background:var(--r-teal-dark); color:var(--r-encre-inverse);padding:12px 22px} /* ── Le bloc d'appel final, identique sur toutes les pages ───────────── */ /* Celui de la planche 7 du deck : turquoise foncé, filet orange, bouton blanc. Il remplace le rappel sombre ; les coordonnées vivent au pied. */ .entry-content > .r-sec.r-sec--appel{background:var(--r-teal-dark);text-align:left} .entry-content > .r-sec.r-sec--appel > .wp-block-group{background:none;box-shadow:none; padding:0;position:relative;padding-left:64px} .entry-content > .r-sec.r-sec--appel > .wp-block-group::before{content:"";position:absolute; left:0;top:.9rem;width:40px;height:4px;border-radius:2px;background:var(--r-orange)} .entry-content > .r-sec.r-sec--appel :where(h2){color:var(--r-encre-inverse)} .entry-content > .r-sec.r-sec--appel p{color:var(--r-encre-inverse);margin-left:0} .entry-content > .r-sec.r-sec--appel .wp-block-buttons{justify-content:flex-start} .entry-content > .r-sec.r-sec--appel .wp-block-button__link{background:var(--r-surface);color:var(--r-teal-dark); box-shadow:var(--r-neu-btn-clair)} /* Le fond reste blanc au survol : c'est lui qui porte les 7.3 du libellé turquoise foncé. Seul le relief bouge. */ .entry-content > .r-sec.r-sec--appel .wp-block-button__link:hover{background:var(--r-surface); color:var(--r-teal-dark);box-shadow:var(--r-neu-btn-clair-relief)} .entry-content > .r-sec.r-sec--appel .wp-block-button__link:focus-visible{ outline:3px solid var(--r-encre-inverse);outline-offset:3px} .r-sec--appel .r-point{color:var(--r-orange)} @media (max-width:560px){ .entry-content > .r-sec.r-sec--appel > .wp-block-group{padding-left:0;padding-top:22px} .entry-content > .r-sec.r-sec--appel > .wp-block-group::before{top:0} } /* ── La barre basse et le pied ───────────────────────────────────────── */ .r-barre__interieur{display:flex;align-items:center;justify-content:space-between;gap:14px; max-width:72.5rem;margin:0 auto} .r-barre__interieur p{margin:0} .r-barre .r-barre__cta{display:inline-block;background:var(--r-teal-dark);color:var(--r-encre-inverse); border-radius:999px;padding:9px 18px;font-family:'Kulim Park',Arial,sans-serif;font-weight:700; text-decoration:none;white-space:nowrap} .r-barre .r-barre__cta:hover{background:var(--r-teal-enfonce);color:var(--r-encre-inverse)} .r-barre--posee .r-barre__cta{padding:13px 24px} .r-pied__grille{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;max-width:72.5rem; margin:0 auto} .r-pied__grille p{margin:0 0 .6rem} .r-pied__titre{font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt-micro);font-weight:700; letter-spacing:.11em;text-transform:uppercase;color:var(--r-text-muted)} .r-pied__titre--second{margin-top:1.4rem} .r-pied__telecharger{font-weight:700} .r-pied a.r-pied__telecharger{color:var(--r-teal-dark)} .r-pied__podcast{display:inline-flex;align-items:center;gap:8px} .r-pied__podcast svg{color:var(--r-teal-dark)} .r-pied__coordonnees,.r-pied__bas{display:flex;flex-wrap:wrap;gap:6px 32px;max-width:72.5rem; margin:30px auto 0;padding-top:18px;border-top:1px solid var(--r-bord)} .r-pied__coordonnees p,.r-pied__bas p{margin:0} .r-pied__bas{justify-content:space-between;margin-top:14px;padding-top:14px; color:var(--r-text-muted)} /* LES QUATRE PAGES LÉGALES TIENNENT SUR UNE LIGNE. Une liste les porte, parce que c'est une liste de liens et que les lecteurs d'écran l'annoncent comme telle. Elle se met en ligne ici, faute de quoi le pied se termine par quatre lignes empilées là où une suffit. */ .r-pied__legal ul{display:flex;flex-wrap:wrap;gap:6px 24px;list-style:none; margin:0;padding:0} .r-pied__legal li{margin:0} @media (max-width:781px){ .r-pied__grille{grid-template-columns:1fr 1fr} .r-pied__marque{grid-column:1 / -1} } @media (max-width:460px){ .r-pied__grille{grid-template-columns:1fr} .r-barre__interieur p{display:none} .r-barre__interieur{justify-content:center} } /* Les trois colonnes de l'accueil portent des h2 (la hiérarchie saute sinon du h1 au h3), à la taille d'un titre de carte. */ .r-cartes--situation h2.wp-block-heading{font-size:var(--r-h3);letter-spacing:0;margin-bottom:.5em} /* La page de réservation finit sur l'agenda, pas sur le bloc d'appel : la règle du rappel sombre (dernière bande) ne doit pas l'assombrir. */ .entry-content > .r-sec.r-sec--agenda:last-child{background:var(--r-voile-teal);text-align:left} .entry-content > .r-sec.r-sec--agenda:last-child > .wp-block-group{background:none;box-shadow:none;padding:0} .entry-content > .r-sec.r-sec--agenda:last-child :where(h1,h2,h3){color:var(--r-text-dark)} .entry-content > .r-sec.r-sec--agenda:last-child p{color:var(--r-text-body);margin-left:0} .r-sec--agenda .r-joindre li{background:var(--r-surface);box-shadow:var(--r-ombre)} .r-sec--agenda .r-joindre span{color:var(--r-text-body)} .r-sec--agenda .r-joindre a{color:var(--r-teal-dark)} .r-cycle__duo span{background:var(--r-pastille-teal)} /* Les hauteurs optiques des logos : plus précises que la règle générale des tuiles. */ .r-tuile img.r-l--large{height:26px;width:auto} .r-tuile img.r-l--sidelune{width:150px;height:auto} .r-tuile img.r-l--carre{height:74px;width:auto} .r-tuile img.r-l--yf{height:74px;width:auto} .r-tuile img.r-l--clairvidence{width:160px;height:auto} .r-tuile img.r-l--symbole{height:36px;width:auto} /* Le relais : la phrase et le bouton sur une même ligne. */ .r-sec--relais > .wp-block-group > *{margin-inline:0} .r-sec.r-sec--relais > .wp-block-group > p{padding-right:0} /* Le sur-titre, comme dans le deck : petites capitales turquoise. */ .r-sec p.sb-c-surtitre{font-family:'Kulim Park',Arial,sans-serif;font-size:var(--r-txt-micro);font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--r-teal-dark);margin-bottom:var(--r-esp-s)} /* ── L'accueil : les deux pôles, et Réalisons au milieu ─────────────────── Réalisons n'est pas un point de passage entre les deux pôles : la carte du milieu porte donc le turquoise de la marque, et non l'ambre des accents. */ .page-accueil .r-infographie--deux{margin-top:var(--r-esp-l)} .page-accueil .r-sec--poles .sb-c-texte{margin-top:var(--r-esp-l); padding-left:18px;border-left:4px solid var(--r-orange);max-width:62ch; color:var(--r-text-dark)} .page-accueil .r-infographie__texte li.r-centre{ background:var(--r-surface);box-shadow:inset 0 0 0 2px var(--r-teal)} .page-accueil .r-infographie__texte li.r-centre strong{color:var(--r-teal-dark)} /* L'accueil respire : une section se termine loin de la suivante. */ .page-accueil .r-sec{padding-top:calc(var(--r-esp-l) * 1.5); padding-bottom:calc(var(--r-esp-l) * 1.5)} .page-accueil .r-sec--hero{padding-bottom:calc(var(--r-esp-l) * 1.2)} /* ── L'accueil : un héros qui occupe l'écran, et un corps plus petit ────── Retenu par Yan le 02.10.2026 parmi quatre propositions comparées côte à côte sur le WordPress local. Les règles restent accrochées à `.page-accueil` plutôt qu'au thème entier : les pages intérieures gardent leur échelle. */ /* `vh` MESURE LE GRAND ÉCRAN, PAS CELUI QU'ON VOIT. Sur iPad et sur iPhone, `100vh` est la hauteur que la page AURA quand la barre d'adresse se sera repliée — donc plus que la hauteur visible à l'arrivée. Un héros à `75vh` y dépasse ce que Yan voit, et toute la page descend d'autant. `svh` est la petite hauteur, celle d'avant le repli : c'est elle qu'on veut. La ligne en `vh` reste au-dessus, pour les navigateurs qui ne connaissent pas encore `svh`. */ .page-accueil .r-sec--hero{display:flex;align-items:center; min-height:max(75vh,520px); min-height:max(75svh,520px); padding-top:var(--r-esp-l); padding-bottom:var(--r-esp-l)} .page-accueil .r-sec--hero > .wp-block-group{width:100%} .page-accueil .r-sec--hero h1{ font-size:var(--r-h1-heros);margin-bottom:.3em} /* La mise en page contrainte de WordPress centre ce qui est plus étroit que la colonne : un chapô limité à 46ch se décalait sous le titre. Il garde donc la largeur commune, et ne gagne que sa taille. */ .page-accueil .r-sec--hero .sb-c-chapo{font-size:var(--r-txt-lead)} /* Ces règles baissaient le corps de l'accueil SEUL, du temps où le reste du site était à 20 px. L'échelle commune le fait maintenant pour toutes les pages, et le h2 plus petit ici que partout ailleurs était exactement l'écart relevé par Yan le 13.10.2026. Retirées. */ .page-accueil .r-apport h3{font-size:var(--r-h4)} .page-accueil .r-sec{padding-top:calc(var(--r-esp-l) * 1.9); padding-bottom:calc(var(--r-esp-l) * 1.9)} /* Une voix : la citation, puis qui la signe. */ .r-avis{margin:0;background:var(--r-bande-carte,var(--r-surface)); border-radius:var(--r-radius);padding:var(--r-esp-l); box-shadow:var(--r-neu-carte);border-top:4px solid var(--r-teal-dark)} .r-avis blockquote{margin:0 0 var(--r-esp-s)} .r-avis blockquote p{margin:0;color:var(--r-text-dark);font-size:var(--r-txt); font-style:italic} .r-avis figcaption{font-size:var(--r-txt)} .r-avis__nom{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; color:var(--r-text-dark)} .r-avis__qui{color:var(--r-text-body)} .r-avis__qui::before{content:" — "} /* ── Le carrousel des avis ─────────────────────────────────────────────── Le défilement est celui du système : `scroll-snap` donne le glissement au doigt, l'inertie et le rebond, sans qu'une ligne de script écoute le toucher. Le script n'ajoute que les commandes, le clavier et l'annonce. Aucune lecture automatique : le texte ne bouge pas sous les yeux. */ .r-carrousel{margin-top:calc(var(--r-esp-l) + var(--r-esp-s))} /* LA PISTE NE DÉFILE QUE SUR UN AXE, ET IL FAUT L'ÉCRIRE. `overflow-x:auto` seul ne suffit pas : dès qu'un axe cesse d'être `visible`, l'autre est calculé à `auto` par le navigateur — mesuré ici, `overflow-y` valait bien `auto`. La piste était donc un second cadre défilant, vertical de quelques pixels, posé au milieu de la page. Sur un écran tactile, le doigt l'attrape au lieu d'attraper la page, et on croit défiler au-delà de la fin. `clip` borne sans créer de cadre, et laisse le `scroll-snap` horizontal intact. */ .r-carrousel__piste{display:flex;gap:var(--r-esp-m);overflow-x:auto;overflow-y:clip; scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px} .r-carrousel__piste::-webkit-scrollbar{display:none} /* `box-sizing` explicite : sans lui, la rembourrure des cartes s'ajoutait à la base de flex, les trois cartes dépassaient de la piste, et le script en déduisait qu'elles tenaient toutes — donc cachait ses commandes. */ .r-carrousel__piste > .r-avis{box-sizing:border-box; flex:0 0 calc((100% - 2 * var(--r-esp-m)) / 3);scroll-snap-align:start} .r-carrousel__piste:focus-visible{outline:3px solid var(--r-teal-dark); outline-offset:4px;border-radius:var(--r-radius)} .r-carrousel__commandes{display:flex;align-items:center;gap:var(--r-esp-s); margin-top:var(--r-esp-s)} .r-carrousel__bouton{width:44px;height:44px;border:0;border-radius:50%; /* EXCEPTION ASSUMÉE : ce n'est pas du texte mais le chevron « ‹ › » du carrousel, dont la taille fait la cible de clic. */ background:var(--r-surface);color:var(--r-teal-dark);font-size:1.6rem; line-height:1;cursor:pointer;box-shadow:var(--r-neu-bouton,0 2px 10px rgba(45,55,72,.12))} .r-carrousel__bouton:disabled{opacity:.4;cursor:default} .r-carrousel__bouton:focus-visible{outline:3px solid var(--r-teal-dark); outline-offset:3px} .r-carrousel__points{display:flex;gap:8px;margin-inline:auto 0} .r-carrousel__point{width:12px;height:12px;padding:0;border:0;border-radius:50%; background:var(--r-bord);cursor:pointer} .r-carrousel__point[aria-current="true"]{background:var(--r-teal-dark)} .r-carrousel__point:focus-visible{outline:3px solid var(--r-teal-dark); outline-offset:3px} .r-carrousel__etat{margin:var(--r-esp-s) 0 0;color:var(--r-text-body); font-size:var(--r-txt)} @media (max-width:860px){ .r-carrousel__piste > .r-avis{flex-basis:100%} } @media (prefers-reduced-motion:reduce){ .r-carrousel__piste{scroll-behavior:auto} } /* Les paliers de réalisation n'affichent pas un montant mais une phrase : la typographie du prix l'écrasait. Elle se calme, sans changer de rôle. */ .r-offre-carte--realisation .sb-c-prix{font-size:var(--r-h3);line-height:1.35} /* ── Offres : les deux catégories, visibles sans défiler ────────────────── Yan, 02.10.2026 : « je veux directement les deux catégories en haut, que ce soit directement clair. Sinon on doit scroller jusqu'en bas. Je veux une boîte avec le pricing. » */ .r-cartes--choix{gap:var(--r-esp-m)} .r-choix-carte{background:var(--r-surface);border-radius:var(--r-radius); padding:var(--r-esp-l);box-shadow:var(--r-neu-carte); border-top:5px solid var(--r-teal-dark)} .r-choix-carte--realisation{border-top-color:var(--r-orange-dark)} .r-choix-carte h3{font-size:var(--r-h3);margin:0 0 .25em} .r-choix-carte .sb-c-texte{color:var(--r-text-body);margin-bottom:var(--r-esp-m)} .r-choix__ligne{display:flex;justify-content:space-between;gap:var(--r-esp-s); margin:0;padding:12px 0;border-top:1px solid var(--r-bord); font-family:'Kulim Park',Arial,sans-serif;font-weight:600; color:var(--r-text-dark)} .r-choix__ligne:last-of-type{border-bottom:1px solid var(--r-bord); margin-bottom:var(--r-esp-m)} /* ── L'accueil : trois sections, trois traitements ──────────────────────── Yan, 02.10.2026 : « c'est un petit peu monotone d'avoir trois carrés, trois carrés. Il y a trois fois trois carrés sur la page d'accueil, il faut varier. » Une seule section garde des cartes — les trois parcours, parce qu'on y entre. Les apports deviennent des lignes, les avis des citations sans cadre, et les marques une simple frise. */ .page-accueil .r-apports{display:block} .page-accueil .r-apport{display:grid;grid-template-columns:96px 1fr; align-items:start;gap:var(--r-esp-m);background:none;box-shadow:none; border:0;padding:var(--r-esp-m) 0;margin:0; border-top:1px solid var(--r-bord)} .page-accueil .r-apport:first-child{border-top:0} /* Chaque élément prend sa place : sans ces trois lignes, le paragraphe tombait dans une troisième colonne large de rien. */ .page-accueil .r-apport__picto{grid-column:1;grid-row:1 / span 2; width:84px;height:84px} .page-accueil .r-apport h3{grid-column:2;grid-row:1;margin:0 0 .2em; text-align:left;align-self:end} .page-accueil .r-apport p{grid-column:2;grid-row:2;margin:0;text-align:left; max-width:62ch} /* Les voix : une citation ne s'enferme pas dans une boîte. */ .page-accueil .r-carrousel__piste > .r-avis{background:none;box-shadow:none; border-top:0;border-left:3px solid var(--r-teal-dark);border-radius:0; padding:4px 0 4px var(--r-esp-m)} /* Les marques : une frise, pas une grille de tuiles. */ .page-accueil .r-tuiles{display:flex;flex-wrap:wrap;align-items:center; justify-content:flex-start;gap:var(--r-esp-l) calc(var(--r-esp-l) * 1.4); border-top:1px solid var(--r-bord);padding-top:var(--r-esp-l)} .page-accueil .r-tuile{background:none;min-height:0;padding:0;width:auto} .page-accueil .r-tuile--partenaires{box-shadow:none;background:none; flex-direction:row;gap:10px;align-items:baseline;max-width:22ch} /* Le rythme vertical change d'une section à l'autre : une page qui respire partout au même intervalle se lit comme un tableau. */ .page-accueil .r-sec--apports{padding-top:calc(var(--r-esp-l) * 1.3); padding-bottom:calc(var(--r-esp-l) * 1.3)} .page-accueil .r-sec--cartes{padding-top:calc(var(--r-esp-l) * 2.4); padding-bottom:calc(var(--r-esp-l) * 2.4)} .page-accueil .r-sec--equipe{padding-top:calc(var(--r-esp-l) * 1.2); padding-bottom:calc(var(--r-esp-l) * 1.2)} @media (max-width:781px){ .page-accueil .r-apport{grid-template-columns:64px 1fr;gap:var(--r-esp-s)} .page-accueil .r-apport__picto{width:56px;height:56px} } /* ── La Méthode, en deux moitiés ────────────────────────────────────────── Yan, 02.10.2026 : « dans la méthode, on a la méthode pour la réflexion, il y a la méthode pour la réalisation. Il faudrait qu'on sépare les deux. » La distinction ne passe pas par deux couleurs décoratives, que la charte écarte, mais par un filet épais et un intitulé de partie. */ .r-sec--partie{border-top:5px solid var(--r-teal-dark); padding-top:calc(var(--r-esp-l) * 1.6)} .r-sec--partie .sb-c-surtitre{color:var(--r-text-dark)} .r-sec--p1{padding-bottom:0} .r-sec--entrees .r-choix-carte p:last-child{margin-bottom:0} /* ── L'AGENDA, ET LE CLIC QUI LE FAIT VENIR ──────────────────────────── */ /* Le raccourci `[r_rendez_vous]` ne rend que du contenu de phrase, parce qu'il vit dans un champ de paragraphe : c'est le CSS qui lui rend sa qualité de bloc. Rien d'autre ne le justifie. */ .r-rdv{display:block} .r-rdv__bouton{display:inline-block;border-radius:999px;padding:14px 26px; font-family:'Kulim Park',Arial,sans-serif;font-weight:700;font-size:var(--r-txt-petit); background:var(--r-teal-dark);color:var(--r-encre-inverse);text-decoration:none; box-shadow:var(--r-neu-btn-plein); transition:transform .14s ease,box-shadow .2s ease} .r-rdv__bouton:hover{box-shadow:var(--r-neu-btn-plein-relief);transform:translateY(-1px)} .r-rdv__bouton:active{box-shadow:var(--r-neu-btn-plein-enfonce);transform:translateY(1px)} .r-rdv__bouton:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px} /* La phrase dit d'où vient l'agenda AVANT le clic : c'est elle qui rend le chargement différé lisible, et pas seulement vrai. */ .r-rdv__note{display:block;margin-top:10px;font-size:var(--r-txt-petit); color:var(--r-text-muted);max-width:52ch} .r-rdv__cadre{display:block;width:100%;border:0;margin-top:var(--r-esp-m); min-height:760px;border-radius:20px;background:var(--r-surface); box-shadow:var(--r-neu-carte-relief);color-scheme:light} .r-rdv__cadre[hidden]{display:none} .r-rdv__repli{display:block;margin-top:var(--r-esp-m);font-size:var(--r-txt-petit); color:var(--r-text-body);max-width:52ch} @media (max-width:700px){ /* Sur un téléphone, 760 px de cadre vide avant le premier créneau font une page qui ne finit pas. L'agenda s'y rend en colonne et demande moins. */ .r-rdv__cadre{min-height:620px} .r-rdv__bouton{display:block;text-align:center} } /* Le refus du cadre ne se voit pas : c'est un rectangle blanc. Cette ligne est posée par le script quand la hauteur n'arrive jamais. */ .r-rdv__refus{display:block;margin-top:12px;font-size:var(--r-txt-petit); color:var(--r-text-body);max-width:52ch} .r-rdv__refus[hidden]{display:none} /* LE CADRE PREND LA LARGEUR DE LA BANDE, PAS CELLE D'UN PARAGRAPHE. Il vit dans un champ de paragraphe, et la bande coupe ses paragraphes à 64ch — par la marge intérieure droite, pas par une largeur (voir plus haut). C'est donc cette marge qu'il faut rendre, et non une largeur qu'il faut forcer : un agenda a besoin de la bande entière. */ /* Trois choses tiennent un paragraphe de bande à 64ch : la largeur maximale, la marge intérieure droite, et les marges automatiques de la mise en page contrainte qui le centrent ensuite. Les trois se rendent, sinon le cadre se retrouve centré sous un titre qui, lui, part du bord — relevé à l'image le 18.10.2026 : titre à x=140, bouton à x=400. */ .r-sec > .wp-block-group > p:has(.r-rdv){max-width:none;padding-right:0; margin-left:0;margin-right:0} .r-sec .r-rdv{display:block;width:100%} /* ── LES FICHES : /service/ ET /partenaire/ ──────────────────────────── */ /* Les quarante et une fiches tombaient hors du dessin du site : ni marge, ni rythme, ni fond. Le gabarit les pose désormais dans une bande, et ces règles-ci ne font qu'habiller ce que la bande ne dit pas. */ .r-sec--fiche{padding-bottom:var(--r-esp-l)} .r-sec--fiche-corps{padding-top:var(--r-esp-l)} .r-sec--fiche-corps p,.r-sec--fiche-corps li{max-width:68ch} .r-sec--fiche-corps h2{margin-top:var(--r-esp-l)} .r-sec--fiche-corps h3{margin-top:var(--r-esp-m)} /* Le logo du partenaire est son identité : il précède son nom, et il est décoratif au sens strict puisque le nom le suit en toutes lettres. */ .r-partenaire__header{margin:0 0 var(--r-esp-m)} .r-partenaire__logo{display:block;max-width:220px;max-height:72px; width:auto;height:auto} .r-partenaire__lien{font-weight:700} .r-partenaire__inner > p:first-of-type{font-size:var(--r-txt-lead); color:var(--r-text-dark);max-width:62ch} /* « ← Revenir à l'accueil » n'est pas un appel à l'action : c'est une sortie. Elle se lit comme un lien, pas comme un bouton de plus à côté de celui de la bande d'appel. */ .r-footer-page__ctas{margin-top:var(--r-esp-l)} .r-footer-page__ctas .r-btn{font-size:var(--r-txt-petit);color:var(--r-text-muted); text-decoration:none} .r-footer-page__ctas .r-btn:hover{color:var(--r-teal-dark);text-decoration:underline} /* ── LA PAGE DES PARTENAIRES, ET SON APERÇU SUR À PROPOS ─────────────── */ /* Yan le 18.10.2026 : la page Partenaires redevient une page à part, et À propos n'en garde qu'un aperçu qui y mène. */ .r-tuiles--partenaires{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--r-esp-m)} .r-tuile__lien{display:flex;flex-direction:column;align-items:center;justify-content:center; gap:10px;width:100%;height:100%;padding:var(--r-esp-m);text-decoration:none; color:var(--r-text-body)} .r-tuile__lien img{max-width:140px;max-height:48px;width:auto;height:auto} .r-tuile__lien:hover{color:var(--r-teal-dark)} .r-tuile__lien:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px;border-radius:18px} /* La lame du carrousel est la même tuile, posée sur un rail qui défile. */ .r-carrousel--partenaires .r-carrousel__piste{display:flex;gap:var(--r-esp-m); overflow-x:auto;overflow-y:clip;scroll-snap-type:x mandatory;scrollbar-width:none} .r-carrousel--partenaires .r-carrousel__piste::-webkit-scrollbar{display:none} .r-tuile--lame{flex:0 0 auto;scroll-snap-align:start;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:10px;width:190px;min-height:120px; padding:var(--r-esp-m);border-radius:18px;background:var(--r-bande-creux); text-decoration:none;color:var(--r-text-body)} .r-tuile--lame img{max-width:128px;max-height:44px;width:auto;height:auto} .r-tuile--lame:hover{color:var(--r-teal-dark);box-shadow:var(--r-ombre-douce)} .r-tuile--lame:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px} @media (max-width:781px){ .r-tuiles--partenaires{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ── LES PERSONNES DE L'ÉQUIPE ───────────────────────────────────────── */ /* Même gabarit pour tous : portrait, nom, rôle, une phrase. Une personne dont le rôle n'est pas encore connu garde sa carte, et le dit. */ .r-personnes{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--r-esp-l);margin:var(--r-esp-l) 0 0;padding:0} .r-personne{margin:0;padding:var(--r-esp-m);border-radius:var(--r-radius); background:var(--r-surface);box-shadow:var(--r-pose)} .r-personne__portrait{display:block;width:112px;height:112px;border-radius:50%; object-fit:cover;margin-bottom:var(--r-esp-m)} .r-personne__portrait--vide{background:var(--r-bande-creux); box-shadow:inset 0 0 0 1px var(--r-bord)} .r-personne__nom{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-h3);color:var(--r-text-dark);margin:0 0 .15em} .r-personne__role{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-txt-petit);letter-spacing:.06em;text-transform:uppercase; color:var(--r-teal-dark);margin:0 0 .6em} .r-personne__mot{margin:0;font-size:var(--r-txt)} /* Ce qui attend une information de Yan se lit comme en attente, pas comme une affirmation : le rôle n'est pas inventé, il manque. */ .r-personne__role--attente,.r-personne__mot--attente{color:var(--r-text-muted); font-style:italic;text-transform:none;letter-spacing:0} @media (max-width:900px){ .r-personnes{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .r-personnes{grid-template-columns:minmax(0,1fr)} } /* ── LE CATALOGUE EST UN INDEX, PAS UNE GRILLE DE RÉSUMÉS ───────────── */ /* Vingt-huit cartes avec chacune vingt-huit mots d'extrait font un mur qu'on ne lit pas : on y cherche un métier, on ne le parcourt pas. L'index donne les familles, et chaque ligne mène à sa fiche. */ .r-index{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--r-esp-l) var(--r-esp-l);margin-top:var(--r-esp-l)} .r-index__famille{margin:0;break-inside:avoid} .r-index__titre{font-family:'Kulim Park',Arial,sans-serif;font-weight:700; font-size:var(--r-txt-micro);letter-spacing:.11em;text-transform:uppercase; color:var(--r-teal-dark);margin:0 0 .7em;padding-bottom:.5em; border-bottom:1px solid var(--r-bord)} .r-index__liste{list-style:none;margin:0;padding:0} .r-index__liste li{margin:0 0 .35em} .r-index__liste a{color:var(--r-text-body);text-decoration:none} .r-index__liste a:hover{color:var(--r-teal-dark);text-decoration:underline} @media (max-width:900px){ .r-index{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:560px){ .r-index{grid-template-columns:minmax(0,1fr)} } /* ── L'AVIS EN TÊTE D'UNE PAGE JURIDIQUE ────────────────────────────── */ /* Un texte de droit en cours de révision doit le dire avant sa première clause, et se voir : sinon le visiteur le lit comme un engagement. */ .r-legal__avis{border-left:4px solid var(--r-orange); background:var(--r-surface);border-radius:0 14px 14px 0; padding:var(--r-esp-m);margin:0 0 var(--r-esp-l);max-width:68ch} /* ── LE CORPS D'UNE PAGE JURIDIQUE ──────────────────────────────────── */ /* Il vit dans un bloc HTML du contenu, et non dans un champ du prototype : `data-sb-type="html"` aplatit tout en un paragraphe, ce que le contrat du prototype dit lui-même. Un texte de droit a des titres, des listes et des liens, et il les garde. */ .r-legal__corps{max-width:72ch} .r-legal__corps h2{font-size:var(--r-h3);margin:var(--r-esp-l) 0 .5em} .r-legal__corps h2:first-child{margin-top:0} .r-legal__corps p,.r-legal__corps li{font-size:var(--r-txt);margin:0 0 .9em} .r-legal__corps ul{margin:0 0 1em;padding-left:1.3em} .r-legal__corps li{margin-bottom:.35em} .r-legal__corps code{font-size:.92em;background:var(--r-bande-creux); border-radius:5px;padding:1px 5px} /* ── LE BOUTON D'ACHAT, QUAND IL Y EN A UN ──────────────────────────── */ /* Il est second : l'échange reste le chemin principal, l'achat direct celui de qui a déjà décidé. Il se lit donc comme un lien appuyé, pas comme un bouton plein qui rivaliserait avec « Réserver un échange ». */ .r-acheter{display:inline-block;margin-top:10px;font-family:'Kulim Park',Arial,sans-serif; font-weight:700;font-size:var(--r-txt-petit);color:var(--r-teal-dark); text-decoration:underline;text-underline-offset:3px} .r-acheter:hover{color:var(--r-orange-dark)} .r-acheter:focus-visible{outline:3px solid var(--r-teal);outline-offset:3px} /* La sortie de secours se lit comme un lien, pas comme un second bouton : elle ne rivalise pas avec « Ouvrir l'agenda », elle double la route. */ .r-rdv__onglet{display:block;margin-top:10px;font-size:var(--r-txt-petit)} .r-rdv__onglet a{color:var(--r-teal-dark)}