/* Theme Name: Carrière Tremplin Theme URI: https://www.carrieretremplin.ca/ Author: Imbrick Web Service Author URI: https://web.imbrick.com/ Description: Thème de blocs de Carrière Tremplin : accueil en huit sections, pages Parcours (et les quatre profils), Comment ça marche, À propos et FAQ. Sans constructeur de pages : tout se modifie dans l’éditeur de site. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 7.4 Version: 1.12.2 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: carriere-tremplin Tags: full-site-editing, block-patterns, custom-colors, custom-logo, editor-style */ /* ═══════════════════════════════════════════════════════════════════════════ SOMMAIRE 1. Tokens rayons, ombres, mouvement, icônes, accents 2. Contextes clair / gris / nuit / bleu — chaque contexte fournit ses couleurs, et tous les composants les lisent 3. Base 4. Typographie partagée 5. Composants carte, pastille, disque, listes, icône 6. En-tête 7. Sections d’accueil 8. Pages intérieures 9. Pied de page 10. Mouvement réduit 11. Tracés d’icônes RÈGLE DU THÈME : aucune couleur en dur hors du § 1. Tout composant lit --ct-surface, --ct-bord, --ct-titre, --ct-texte, --ct-texte-2, --ct-lien et fonctionne donc sur fond clair comme sur fond sombre, sans variante. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════ 1. Tokens ═══════════ */ :root { /* Rayons — 5 valeurs, pas une de plus. */ --ct-r-xs: 3px; /* filets : liseré de focus, rail de frise */ --ct-r-sm: 10px; /* pastilles carrées, champs, vidéo */ --ct-r-md: 16px; /* toutes les cartes */ --ct-r-lg: 24px; /* grands blocs : offre, carte héros */ --ct-r-pill: 999px; /* pastilles arrondies */ /* Ombres — les trois présets de theme.json, repris ici pour lisibilité. */ --ct-ombre-sm: var(--wp--preset--shadow--sm); --ct-ombre-md: var(--wp--preset--shadow--md); --ct-ombre-lg: var(--wp--preset--shadow--lg); /* Mouvement — une durée, une courbe. */ --ct-duree: .25s; --ct-courbe: cubic-bezier(.2, .7, .3, 1); /* Hauteur de l’en-tête collant : origine de tout ce qui colle — la scène, le plateau de la méthode, les ancres. Elle dépend du logo, qui est fluide, donc aucune valeur fixe n’est juste partout : site.js la mesure et la réécrit. Ces deux valeurs sont le repli sans JavaScript. */ --ct-entete-h: 80px; /* Décalage imposé par la barre d’administration de WordPress. 0 par défaut : personne n’est connecté, et l’éditeur n’en a pas. */ --ct-barre-admin: 0px; /* Enveloppe des sections : la largeur déclarée par tous les motifs. */ --ct-enveloppe: 1360px; /* Accent par défaut : le bleu d’action. */ --ct-accent: var(--wp--preset--color--bleu); --ct-accent-sur: var(--wp--preset--color--blanc); /* Seul dégradé de texte du thème : le nom de la méthode dans le héros. Le bleu d’action glisse vers la sarcelle, la couleur du volet Créer. */ --ct-degrade-methode: linear-gradient(95deg, var(--wp--preset--color--bleu) 0%, var(--wp--preset--color--sarcelle) 100%); /* La scène — trois couches de voile sur la photo, déclarées ici parce que ce sont des couleurs littérales : le fond qui se dissout vers la section suivante, un souffle d’accent en haut à droite, puis le voile principal, opaque sous le texte et transparent sur la photo. La variante compacte sert sous 1024 px, où le texte passe au centre de l’image. */ --ct-scene-voile: linear-gradient(to bottom, rgba(255, 255, 255, 0) 58%, rgba(255, 255, 255, .94) 100%), radial-gradient(72% 62% at 84% 6%, rgba(0, 102, 204, .11) 0%, rgba(0, 102, 204, 0) 70%), linear-gradient(100deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 38%, rgba(244, 247, 250, .62) 74%, rgba(244, 247, 250, .40) 100%); --ct-scene-voile-compact: linear-gradient(to bottom, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, .94) 100%), linear-gradient(180deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .92) 100%); /* Arête claire en haut des surfaces translucides — la lumière qui accroche. */ --ct-scene-arete: inset 0 1px 0 rgba(255, 255, 255, .92); /* La pose de la carte — une seule ligne à changer pour la redresser : plus douce : perspective(1600px) rotateY(-14deg) rotateX(8deg) scale(1.08) à plat : none */ --ct-scene-carte-pose: perspective(1000px) rotateY(-30deg) rotateX(35deg) scale(1.5); /* Bleu LinkedIn — couleur de marque, pas couleur du thème : elle désigne la plateforme dans l’aperçu et ne sert à rien d’autre. 5,5:1 sur blanc. */ --ct-marque-linkedin: #0A66C2; /* La carte d’offre spéciale — les seules couleurs hors des 18 rôles de la palette. Elles viennent de la carte publiée sur carrieretremplin.ca et ne servent qu’à ce bloc. Le blanc sur ce dégradé tient à 7:1, l’or à 4,5:1 (il n’habille que du texte d’affichage). */ --ct-promo-degrade: linear-gradient(120deg, #5D1F9B 0%, #7B2AAE 48%, #A233C2 100%); --ct-promo-or: #F5CE5B; --ct-promo-badge: #D6336C; --ct-promo-halo: rgba(255, 255, 255, .07); /* L’ambre de la palette est lumineuse : elle a sa nuance pour le texte. */ --ct-ambre-texte: #996000; } /* La barre d’administration est en position fixe au-dessus de 600 px : tout ce que le thème colle en haut de fenêtre doit descendre d’autant. Sous 600 px, WordPress la repasse en position absolue — elle défile alors avec la page, et le décalage doit retomber à zéro. WordPress déclare lui-même --wp-admin--admin-bar--height sur html (32 px, 46 px sous 782 px) ; la valeur de repli couvre le cas où sa feuille n’est pas chargée. */ body.admin-bar { --ct-barre-admin: var(--wp-admin--admin-bar--height, 32px); } @media screen and (max-width: 600px) { body.admin-bar { --ct-barre-admin: 0px; } } /* Les deux mesures de la scène sont déclarées sur body, pas sur :root. Une propriété personnalisée substitue ses var() là où elle est déclarée, et --ct-barre-admin ne vaut sa vraie hauteur que sur body.admin-bar : posées sur :root, ces deux mesures figeraient la barre d’administration à zéro et la scène passerait sous elle. svh plutôt que vh pour que la barre d’adresse mobile ne décale rien. */ body { --ct-scene-haut: calc(var(--ct-barre-admin) + var(--ct-entete-h)); --ct-scene-h: calc(100svh - var(--ct-entete-h) - var(--ct-barre-admin)); /* Gouttiere laterale des sections ecrites en HTML natif, qui ne passent pas par la mise en page « constrained » du coeur et n'heritent donc pas du retrait de theme.json. Elle se resserre sous 400 px. */ --ct-gouttiere: var(--wp--preset--spacing--65); } /* Les dérivés d’un accent, calculés une fois pour toutes : — texte : l’accent rendu lisible en texte sur fond clair, — clair : fond de pastille sur fond clair, — vif : l’accent rendu lisible sur fond sombre, — contexte: celui des trois que le fond courant réclame. Ils sont déclarés sur les éléments QUI PORTENT un accent. Une propriété personnalisée est substituée là où elle est déclarée : déclarée sur la section, --ct-accent-vif lirait l’accent de la section, et les quatre parcours sortiraient tous de la même couleur. */ :root, .ct-profil, .ct-parcours-carte, .ct-profil-page, .ct-etape-detail, .ct-scene__panneau, .ct-carte-espace__etat { --ct-accent-texte: var(--ct-accent); --ct-accent-clair: color-mix(in srgb, var(--ct-accent) 12%, #fff); --ct-accent-vif: color-mix(in srgb, var(--ct-accent) 55%, #fff); --ct-accent-contexte: var(--ct-accent-texte); } /* ═══════════ 2. Contextes ═══════════ */ /* Contexte clair — la valeur par défaut du site. */ :root, .ct-clair, .ct-gris, .ct-brume { --ct-titre: var(--wp--preset--color--marine); --ct-texte: var(--wp--preset--color--gris-900); --ct-texte-2: var(--wp--preset--color--gris-600); --ct-surface: var(--wp--preset--color--blanc); --ct-surface-2: var(--wp--preset--color--gris-50); --ct-bord: var(--wp--preset--color--gris-200); --ct-lien: var(--wp--preset--color--bleu); --ct-lien-survol: var(--wp--preset--color--bleu-fonce); --ct-focus: var(--wp--preset--color--bleu); --ct-ombre: var(--ct-ombre-md); --ct-erreur: var(--wp--preset--color--framboise); /* 5,7:1 sur blanc */ } /* Contexte sombre — cartes en surface marine, pas d’ombre (elle ne se voit pas). */ .ct-nuit, .ct-nuit-2 { --ct-titre: var(--wp--preset--color--blanc); --ct-texte: var(--wp--preset--color--clair); --ct-texte-2: #8FA3BD; --ct-surface: var(--wp--preset--color--nuit-carte); --ct-surface-2: rgba(255, 255, 255, .05); --ct-bord: var(--wp--preset--color--nuit-bord); --ct-lien: var(--wp--preset--color--bleu-clair); --ct-lien-survol: var(--wp--preset--color--blanc); --ct-focus: var(--wp--preset--color--bleu-clair); --ct-ombre: none; --ct-accent-contexte: var(--ct-accent-vif); /* La framboise ramenée vers le blanc, comme un accent vif : 6,9:1 sur nuit. */ --ct-erreur: color-mix(in srgb, var(--wp--preset--color--framboise) 55%, #fff); } /* Sur fond sombre, un porteur d’accent bascule sur sa version vive. */ :where(.ct-nuit, .ct-nuit-2) :is(.ct-profil, .ct-parcours-carte, .ct-profil-page, .ct-etape-detail) { --ct-accent-contexte: var(--ct-accent-vif); } /* Contexte bleu — une seule bande pleine sur tout le site : l’appel gratuit. */ .ct-bleu, .ct-offre { --ct-titre: var(--wp--preset--color--blanc); --ct-texte: var(--wp--preset--color--blanc); --ct-texte-2: #E3EFFC; --ct-surface: var(--wp--preset--color--blanc); --ct-surface-2: rgba(255, 255, 255, .10); --ct-bord: rgba(255, 255, 255, .28); --ct-lien: var(--wp--preset--color--blanc); --ct-lien-survol: var(--wp--preset--color--blanc); --ct-focus: var(--wp--preset--color--blanc); --ct-ombre: none; --ct-accent-contexte: var(--wp--preset--color--blanc); --ct-erreur: var(--wp--preset--color--blanc); } /* Fonds. */ .ct-clair { background: var(--wp--preset--color--blanc); } .ct-gris, .ct-brume { background: var(--wp--preset--color--gris-50); } .ct-nuit { background: var(--wp--preset--color--nuit); } .ct-nuit-2 { background: var(--wp--preset--color--nuit-2); } .ct-bleu { background: var(--wp--preset--color--bleu); } /* Couleurs héritées du contexte. */ .ct-nuit, .ct-nuit-2, .ct-bleu { color: var(--ct-texte); } .ct-nuit :where(h1, h2, h3, h4, h5, h6), .ct-nuit-2 :where(h1, h2, h3, h4, h5, h6), .ct-bleu :where(h1, h2, h3, h4, h5, h6), .ct-offre :where(h1, h2, h3, h4, h5, h6) { color: var(--ct-titre); } .ct-nuit :where(a):not(.wp-block-button__link), .ct-nuit-2 :where(a):not(.wp-block-button__link), .ct-bleu :where(a):not(.wp-block-button__link) { color: var(--ct-lien); } .ct-nuit :where(a):not(.wp-block-button__link):hover, .ct-nuit-2 :where(a):not(.wp-block-button__link):hover, .ct-bleu :where(a):not(.wp-block-button__link):hover { color: var(--ct-lien-survol); } /* ═══════════ 3. Base ═══════════ */ html { scroll-behavior: smooth; } :where([id]) { scroll-margin-top: calc(var(--ct-barre-admin) + var(--ct-entete-h) + 1rem); } body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .wp-site-blocks > * + * { margin-block-start: 0; } .ct-principal > * { margin-block: 0; } img { max-width: 100%; height: auto; } .ct-section { padding-block: var(--wp--preset--spacing--90); } /* Seul le premier enfant perd sa marge haute : la remettre à zéro partout supprimait aussi le blockGap entre un titre et son chapô. */ .ct-section > :first-child { margin-block-start: 0; } :focus-visible { outline: 3px solid var(--ct-focus); outline-offset: 3px; border-radius: var(--ct-r-xs); } /* Césure des titres et des chapôs : les navigateurs équilibrent les lignes plutôt que de laisser un mot seul en fin de bloc. */ :where(h1, h2, h3) { text-wrap: balance; } :where(p, li) { text-wrap: pretty; } /* Boutons — le dessin vient de theme.json ; ici, le seul mouvement. */ :where(.wp-block-button__link) { transition: transform var(--ct-duree) var(--ct-courbe), background-color var(--ct-duree), border-color var(--ct-duree), color var(--ct-duree), box-shadow var(--ct-duree); } .wp-block-button__link:hover { transform: translateY(-2px); } /* Le retour part de l’appui, pas du relâchement : c’est là que se joue l’impression de directivité. Placé après le survol, à spécificité égale, pour l’emporter pendant que les deux états sont vrais. */ .wp-block-button__link:active { transform: translateY(0) scale(.98); transition-duration: 90ms; } .wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--wp--preset--color--bleu); color: var(--wp--preset--color--blanc); } /* Bouton clair : sur fond sombre ou bleu, l’inverse du bouton plein. */ .ct-nuit .is-style-outline > .wp-block-button__link, .ct-nuit-2 .is-style-outline > .wp-block-button__link, .ct-bleu .is-style-outline > .wp-block-button__link, .is-style-clair > .wp-block-button__link { background: transparent; border: 2px solid var(--ct-bord); color: var(--ct-titre); box-shadow: none; } .ct-nuit .is-style-outline > .wp-block-button__link:hover, .ct-nuit-2 .is-style-outline > .wp-block-button__link:hover, .ct-bleu .is-style-outline > .wp-block-button__link:hover, .is-style-clair > .wp-block-button__link:hover { background: rgba(255, 255, 255, .1); border-color: var(--ct-titre); color: var(--ct-titre); } .has-inline-color { background: transparent; } /* ═══════════ 4. Typographie partagée ═══════════ */ /* Surtitre : la seule capitale du thème. Les h1/h2 ne sont plus en majuscules. */ .ct-surtitre { margin: 0 0 var(--wp--preset--spacing--30) !important; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--petit); letter-spacing: .12em; text-transform: uppercase; color: var(--ct-accent-contexte); } .ct-titre-section { margin-block: 0 var(--wp--preset--spacing--40); } .ct-titre-section--gauche, .ct-titre-section--gauche2 { margin-block: 0 var(--wp--preset--spacing--40); } .ct-lede { font-size: var(--wp--preset--font-size--moyen); line-height: 1.55; color: var(--ct-texte); max-width: 46rem; } .ct-lede--clair { color: var(--ct-texte); max-width: min(46rem, var(--ct-enveloppe)); margin-inline: max(0px, (100% - var(--ct-enveloppe)) / 2) auto !important; } .ct-lede--centre { text-align: center; max-width: 48rem; margin-inline: auto !important; } .ct-texte-clair { color: var(--ct-texte); } .ct-note, .ct-note-clair { font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-meta { font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-lien-section { text-align: center; margin-top: var(--wp--preset--spacing--60) !important; } .ct-lien-section--gauche { text-align: left; } .ct-lien-section a, .ct-lien-section--gauche a { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--texte); text-decoration: none; color: var(--ct-lien); } .ct-lien-section a:hover { text-decoration: underline; text-underline-offset: 4px; } .ct-fleche { display: inline-block; transition: transform var(--ct-duree) var(--ct-courbe); } a:hover .ct-fleche { transform: translateX(4px); } /* ═══════════ 5. Composants ═══════════ */ /* 5.1 La carte — une seule recette pour tout le site. */ .ct-carte, .ct-profil, .ct-parcours-carte, .ct-bulle, .ct-tarif__carte, .ct-offre__carte, .ct-compteur, .ct-temo, .ct-cta__carte, .ct-etape--liste, .ct-etape-detail, .ct-fait, .ct-oui, .ct-non, .ct-faq__item, .ct-video__carte, .ct-question, .ct-sondage__avis { box-sizing: border-box; background: var(--ct-surface); border: 1px solid var(--ct-bord); border-radius: var(--ct-r-md); box-shadow: var(--ct-ombre); } .ct-profil > *, .ct-parcours-carte > *, .ct-bulle > *, .ct-tarif__carte > *, .ct-offre__carte > *, .ct-compteur > *, .ct-cta__carte > *, .ct-etape--liste > *, .ct-etape-detail > *, .ct-fait > *, .ct-oui > *, .ct-non > * { margin-block: 0 !important; } /* Cartes qui réagissent au survol : une seule règle, une seule distance. */ .ct-profil, .ct-parcours-carte, .ct-compteur, .ct-temo, .ct-faq__item { transition: transform var(--ct-duree) var(--ct-courbe), border-color var(--ct-duree), box-shadow var(--ct-duree); } .ct-profil:hover, .ct-parcours-carte:hover, .ct-compteur:hover, .ct-temo:hover { transform: translateY(-4px); border-color: var(--ct-accent-contexte); } /* 5.2 Le disque — lettre de volet, numéro d’étape. Deux tailles. */ .ct-etape__num, .ct-etape-detail__num { --ct-disque: 56px; flex: none; box-sizing: border-box; display: grid; place-items: center; width: var(--ct-disque); height: var(--ct-disque); margin: 0; border-radius: 50%; background: var(--ct-accent); color: var(--ct-accent-sur); font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: 1.25rem; line-height: 1; transition: background var(--ct-duree), color var(--ct-duree), box-shadow var(--ct-duree); } .ct-etape__num, .ct-etape-detail__num { --ct-disque: 48px; font-size: 1.125rem; } /* 5.3 La pastille — étiquette arrondie. */ .ct-pastille, .ct-tag, .ct-puce-volet, .ct-puces li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; padding: .375rem .875rem; border: 1px solid var(--ct-bord); border-radius: var(--ct-r-pill); background: var(--ct-surface-2); color: var(--ct-texte); font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--petit); line-height: 1.35; text-decoration: none; } .ct-tag { margin-left: .5rem; vertical-align: middle; } .ct-puce-volet { margin: .5rem 0 !important; } .ct-pastille--verte { border-color: transparent; background: var(--wp--preset--color--vert); color: var(--wp--preset--color--blanc); } /* 5.4 Listes marquées — coches, croix, puces. */ .ct-coches, .ct-croix { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; } .ct-coches li, .ct-croix li { position: relative; padding-left: 2.125rem; font-size: var(--wp--preset--font-size--texte); line-height: 1.5; color: var(--ct-texte); } .ct-puces { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; } /* 5.5 Icônes masquées — un seul tracé par icône, une seule règle de masque. */ .ct-ico::after, .ct-coches li::before, .ct-croix li::before, .ct-puces li::before, .ct-notice::before, .ct-pastille--tel::before, .ct-scene__ico::before, .ct-rapporte__ico::before, .ct-tarif__ico::before, .ct-promo__atouts li::before { content: ""; -webkit-mask: var(--ct-i) center / contain no-repeat; mask: var(--ct-i) center / contain no-repeat; background: var(--ct-i-couleur, currentColor); } .ct-coches li::before, .ct-croix li::before { position: absolute; left: 0; top: .15em; width: 1.5rem; height: 1.5rem; } .ct-coches li::before { --ct-i: var(--ct-i-coche); --ct-i-couleur: var(--wp--preset--color--vert); } .ct-croix li::before { --ct-i: var(--ct-i-croix); --ct-i-couleur: var(--wp--preset--color--framboise); } .ct-nuit .ct-coches li::before, .ct-nuit-2 .ct-coches li::before, .ct-coches--clair li::before, .ct-bleu .ct-coches li::before { --ct-i-couleur: color-mix(in srgb, var(--wp--preset--color--vert) 45%, #fff); } .ct-puces li::before { --ct-i: var(--ct-i-coche); --ct-i-couleur: currentColor; width: 1rem; height: 1rem; flex: none; } .ct-pastille--tel::before { --ct-i: var(--ct-i-tel); width: 1rem; height: 1rem; flex: none; } /* Bloc à pastille d’icône : piliers, règles, aperçu de l’espace client. */ .ct-ico { position: relative; padding-left: 4rem; } .ct-ico::before { content: ""; position: absolute; left: 0; top: 0; width: 2.75rem; height: 2.75rem; border-radius: var(--ct-r-sm); background: var(--ct-accent-clair); } .ct-nuit .ct-ico::before, .ct-nuit-2 .ct-ico::before { background: var(--ct-surface-2); } .ct-ico::after { position: absolute; left: .625rem; top: .625rem; width: 1.5rem; height: 1.5rem; --ct-i-couleur: var(--ct-accent-contexte); } /* Avis encadré. */ .ct-notice { display: flex; gap: .875rem; margin-top: var(--wp--preset--spacing--60) !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); border: 1px solid color-mix(in srgb, var(--wp--preset--color--ambre) 40%, #fff); border-left: 4px solid var(--wp--preset--color--ambre); border-radius: var(--ct-r-sm); background: color-mix(in srgb, var(--wp--preset--color--ambre) 8%, #fff); } .ct-notice::before { --ct-i: var(--ct-i-info); --ct-i-couleur: #8A5800; flex: none; width: 1.375rem; height: 1.375rem; margin-top: .125rem; } .ct-notice__texte { margin: 0 !important; font-size: var(--wp--preset--font-size--normal); color: #6B4400; } /* Masquage visuel : le texte reste lu par les lecteurs d’écran. */ .ct-hors-ecran { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Séparateur. */ .ct-sep { width: 100%; max-width: none !important; margin: 0 auto var(--wp--preset--spacing--70) !important; border-top-color: var(--ct-bord) !important; opacity: 1; } /* ═══════════ 6. En-tête ═══════════ */ header.wp-block-template-part { position: sticky; top: var(--ct-barre-admin); z-index: 60; } /* L’en-tête est clair : il hérite donc du contexte par défaut (§ 2) et n’a aucune couleur à déclarer — seulement son fond et son filet. */ .ct-entete { background: var(--wp--preset--color--blanc); border-bottom: 1px solid var(--ct-bord); padding-block: var(--wp--preset--spacing--30); } .ct-entete__barre { gap: var(--wp--preset--spacing--50); } .ct-entete__droite { gap: var(--wp--preset--spacing--50); align-items: center; } @media (min-width: 1100px) { :root { --ct-entete-h: 95px; } .ct-entete__barre, .ct-entete__droite { flex-wrap: nowrap !important; } } /* Le logo : une seule largeur fluide, bornée par la place disponible. Le rapport est celui du fichier (800 × 261), pour ne rien faire sauter pendant le chargement. */ .ct-logo { margin: 0; } .ct-logo img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 261; margin-bottom: -10px; } .ct-entete .ct-logo, .ct-pied .ct-logo { width: clamp(9rem, 16vw, 11.875rem); } .ct-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--50); } .ct-nav a { text-decoration: none; position: relative; padding-block: .25rem; } .ct-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: var(--ct-r-xs); background: var(--wp--preset--color--bleu); transform: scaleX(0); transform-origin: left; transition: transform var(--ct-duree) var(--ct-courbe); } .ct-nav a:hover::after, .ct-nav .current-menu-item > a::after { transform: scaleX(1); } .ct-entete__connexion { margin: 0; font-family: var(--wp--preset--font-family--lexend); font-weight: 500; font-size: var(--wp--preset--font-size--normal); } .ct-entete__connexion a { color: var(--ct-titre); text-decoration: none; } .ct-entete__connexion a:hover { color: var(--ct-lien); } .ct-entete__action { margin: 0; } .ct-entete__action .wp-block-button__link { padding: .6875rem 1.25rem; font-size: var(--wp--preset--font-size--normal); white-space: nowrap; } /* ─── 6.1 Menu plein écran (sous 600 px) ───────────────────────────────── WordPress fournit déjà un voile en position fixe sur toute la fenêtre. Ce qui suit le centre, agrandit les liens à la taille d’un titre de section, et laisse le logo de l’en-tête au-dessus du voile pour qu’il reste visible et cliquable. */ .wp-block-navigation__responsive-container.is-menu-open { top: var(--ct-barre-admin); padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { flex: 1; display: flex; } /* Les liens commencent sous l’en-tête, pas au centre de la fenêtre : le logo et le menu forment un même bloc en haut d’écran. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-top: calc(var(--ct-entete-h) - var(--wp--preset--spacing--40)); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { flex: 0 0 auto; width: 100%; justify-content: center; align-items: center; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { flex-direction: column; justify-content: center; align-items: center !important; gap: var(--wp--preset--spacing--50); width: 100%; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { justify-content: center; align-items: center !important; width: 100%; } /* Les liens prennent la fonte et la taille d’un titre de section. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--titre); line-height: 1.15; letter-spacing: -.02em; text-align: center; color: var(--ct-titre); padding-block: .125rem; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { color: var(--ct-lien); } /* Le soulignement du menu de bureau n’a pas de sens sur un lien centré. */ .wp-block-navigation__responsive-container.is-menu-open a::after { display: none; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close { top: .0rem; right: 5px; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--ct-r-sm); color: var(--ct-titre); transition: background var(--ct-duree); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover { background: var(--ct-surface-2); } /* Menu ouvert : l’en-tête passe au-dessus du voile pour que le logo reste visible, et ses deux actions descendent au pied du menu. */ .ct-entete:has(.is-menu-open) { background: transparent; border-bottom-color: transparent; } header.wp-block-template-part:has(.is-menu-open) { z-index: 100001; } /* La cible tactile passe de 24 a 44 px : c'est la commande principale du site sur telephone. La marge negative compense l'elargissement pour que l'icone reste optiquement alignee sur le bord de l'en-tete. Surtout pas de `display` ici : le coeur pose deja `display: flex` sur ce bouton et le masque au-dessus de 600 px. Le redeclarer — a plus forte raison en !important — fait reapparaitre le hamburger sur grand ecran, a cote du menu. On ne touche donc qu'au centrage et aux dimensions. */ .wp-block-navigation__responsive-container-open { align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -.625rem; } .ct-entete:has(.is-menu-open) .wp-block-navigation__responsive-container-open { display: none; } .ct-entete:has(.is-menu-open) .ct-logo { position: relative; z-index: 100001; } .ct-entete:has(.is-menu-open) .ct-entete__action, .ct-entete:has(.is-menu-open) .ct-entete__connexion { position: fixed; left: 50%; transform: translateX(-50%); z-index: 100001; text-align: center; } /* « Se connecter » se pose en bas ; le bouton s’empile juste au-dessus — 3,5 rem, la hauteur d’un bouton plus la gouttière. */ .ct-entete:has(.is-menu-open) .ct-entete__connexion { display: block; bottom: var(--wp--preset--spacing--70); font-size: var(--wp--preset--font-size--texte); } .ct-entete:has(.is-menu-open) .ct-entete__droite .ct-entete__action { display: block; bottom: calc(var(--wp--preset--spacing--70) + 3.5rem); width: min(20rem, calc(100% - 3rem)); } .ct-entete:has(.is-menu-open) .ct-entete__action .wp-block-button, .ct-entete:has(.is-menu-open) .ct-entete__action .wp-block-button__link { width: 100%; } .ct-entete:has(.is-menu-open) .ct-entete__action .wp-block-button__link { padding: .9375rem 1.5rem; font-size: var(--wp--preset--font-size--texte); } /* « Se connecter » sort plus tot que le reste : entre 782 et 960 px c'est lui qui faisait passer la barre a la ligne. Le lien reste accessible depuis « Commencer », et depuis le menu plein ecran en dessous. */ @media (max-width: 900px) { .ct-entete__connexion { display: none; } } /* Le bloc de navigation du coeur bascule en menu plein ecran a 600 px. Trop bas ici : entre 601 et 959 px le menu ne tenait pas sur la ligne du logo et la barre doublait de hauteur (121 px au lieu de 61). On avance donc la bascule a 782 px en reprenant les deux regles que le coeur applique au-dessus de 600 px — masquer le menu en ligne, montrer le bouton. La croix de fermeture n'est pas concernee : le coeur ne la masque que sur le conteneur qui n'est pas ouvert. */ @media (min-width: 600px) and (max-width: 781px) { .ct-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; } .ct-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } } @media (max-width: 600px) { .ct-entete__barre { gap: .625rem; flex-wrap: nowrap; } .ct-entete__droite { gap: .5rem; flex-wrap: nowrap; } /* La barre ne porte que le logo et le bouton d’ouverture : « Commencer » attend dans le menu plein écran. Trois classes, pour passer devant .wp-block-buttons.is-layout-flex du cœur. */ .ct-entete .ct-entete__droite .ct-entete__action { display: none; } } /* ═══════════ 7. Sections d’accueil ═══════════ */ /* 7.1 La scène — cinq panneaux à gauche, une carte fixe à droite. Trois couches empilées dans une seule cellule de grille : couche 0 .ct-scene__fonds collante, pleine largeur, fondu croisé couche 1 .ct-scene__grille le contenu, borné à l’enveloppe ├ .ct-scene__panneaux 5 × la hauteur libre, ce qui donne │ sa hauteur à toute la section └ .ct-scene__visuel collante : la carte ne bouge pas La hauteur de la section vient donc des panneaux ; les deux couches collantes tiennent dessus toute la durée du défilement. Sans JavaScript : aucune classe ne bouge, le premier fond et le premier état de la carte restent affichés, et les cinq panneaux se lisent à la suite. Le contenu est entier, seul l’enchaînement manque. */ .ct-scene { position: relative; display: grid; grid-template-columns: 1fr; /* clip, surtout pas hidden : hidden ferait de la section un conteneur de défilement, et les deux couches collantes cesseraient de coller. */ overflow: clip; background: var(--wp--preset--color--blanc); } .ct-scene > * { grid-column: 1; grid-row: 1; min-width: 0; } /* ─ Couche 0 : les fonds ─ */ .ct-scene__fonds { align-self: start; position: sticky; top: var(--ct-scene-haut); height: var(--ct-scene-h); z-index: 0; } .ct-scene__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s var(--ct-courbe); } .ct-scene__fond.is-actif { opacity: 1; } .ct-scene__voile { position: absolute; inset: 0; pointer-events: none; background: var(--ct-scene-voile); } /* ─ Couche 1 : le contenu ─ */ .ct-scene__grille { z-index: 1; display: grid; grid-template-columns: minmax(0, 56fr) minmax(0, 44fr); column-gap: var(--wp--preset--spacing--80); align-items: start; width: 100%; max-width: var(--ct-enveloppe); margin-inline: auto; padding-inline: var(--ct-gouttiere); box-sizing: border-box; } /* 7.1.1 Les panneaux. scroll-margin-top décale le point d’arrêt de la hauteur de l’en-tête collant : sans lui, le haut du panneau se cale sous la barre. */ .ct-scene__panneau { display: grid; align-content: center; /* start, pas la valeur par defaut stretch : un enfant etire sur la hauteur de sa rangee, s'il est lui-meme un conteneur flex qui passe a la ligne, etire chacune de ses lignes a cette hauteur et sa seconde ligne deborde. C'est ce qui superposait les deux boutons et la note sous 515 px. */ align-items: start; min-height: var(--ct-scene-h); scroll-margin-top: var(--ct-scene-haut); } /* 7.1.2 Le panneau d’ouverture. */ /* L’interlettrage se resserre quand le corps grandit : à 52 px les lettres se lisent trop espacées avec la valeur de theme.json. */ /* L’icône du panneau — nue : ni cadre, ni fond, ni ombre. Le tracé vient du registre du § 11 par une classe ct-ico--*, et sa couleur suit l’accent du panneau, donc celui du parcours. */ .ct-scene__ico { display: grid; justify-self: start; width: 5.5rem; height: 5.5rem; margin-bottom: var(--wp--preset--spacing--40); } .ct-scene__ico::before { width: 100%; height: 100%; --ct-i-couleur: var(--ct-accent-contexte); } /* Les titres de la scène sont en capitales — posées par le CSS, le texte source restant en casse de phrase, comme pour ct-surtitre. */ .ct-scene__titre { /* Un mot long en capitales a 34 px depasse la colonne d'un telephone de 320 px et rien ne le coupe. `anywhere` plutot que `break-word` : seul `anywhere` entre dans le calcul de la largeur min-content, donc seul lui laisse la colonne se comprimer au lieu de grandir. La cesure passe d'abord, la coupure franche ne sert que de dernier recours. */ overflow-wrap: anywhere; hyphens: auto; margin-block: 0 var(--wp--preset--spacing--50) !important; font-size: var(--wp--preset--font-size--heros); line-height: 1.04; letter-spacing: -0.03em; text-transform: uppercase; color: var(--ct-titre); } /* 50 px dès que la scène est active — elle ne l’est qu’à partir de 1025 px, et la borne haute du clamp y est déjà atteinte. En dessous, le titre redescend plutôt que d’écraser la colonne. L’interlettrage se resserre avec le corps, comme pour le h1. */ .ct-scene__titre--situation { font-size: clamp(2.25rem, 4.1vw + 0.5rem, 3.125rem); line-height: 1.06; letter-spacing: -0.025em; } /* Le nom de la méthode occupe sa propre ligne, en capitales : le texte source reste en casse normale, c’est le CSS qui les met — comme pour ct-surtitre. La couleur est le repli ; le dégradé ne prend la main que si le navigateur sait découper un fond sur du texte. */ .ct-scene__methode { display: block; margin-top: .06em; color: var(--wp--preset--color--bleu); background: transparent; text-transform: uppercase; letter-spacing: -0.015em; } @supports (background-clip: text) or (-webkit-background-clip: text) { .ct-scene__methode { background-image: var(--ct-degrade-methode); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* Contrastes forcés : le dégradé disparaît, le texte reprend sa couleur. */ @media (forced-colors: active) { .ct-scene__methode { background-image: none; -webkit-text-fill-color: currentColor; } } .ct-scene__panneau .ct-lede { max-width: 34rem; margin-block: 0 !important; } .ct-scene__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--30); margin: var(--wp--preset--spacing--60) 0 0 !important; } .ct-scene__lien { margin: var(--wp--preset--spacing--50) 0 0 !important; } .ct-scene__lien a { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--texte); text-decoration: none; color: var(--ct-accent-contexte); } .ct-scene__lien a:hover { text-decoration: underline; text-underline-offset: 4px; } /* 7.1.3 La colonne collante : la carte, puis le rail de repérage. */ .ct-scene__visuel { position: sticky; top: var(--ct-scene-haut); height: var(--ct-scene-h); /* La carte est une illustration : rien n'y est cliquable, et la bande ne doit jamais capter un clic destine au texte. Sans cela, sur telephone, le bouton du heros devenait inatteignable — la bande le recouvre, et `visibility: hidden` ne suffit pas : l'etat actif de la carte redeclare `visibility: visible` et se ressuscite, invisible mais tangible. */ pointer-events: none; /* La carte est seule dans la colonne depuis que le rail a sa propre couche : une grille à une cellule, centrée dans les deux sens, suffit. */ display: grid; place-items: center; padding-block: var(--wp--preset--spacing--70); box-sizing: border-box; } /* La carte. Les cinq états occupent la même cellule : sa hauteur est celle du plus grand, elle ne saute donc jamais d’un panneau à l’autre. */ .ct-carte-espace { display: grid; align-self: center; box-sizing: border-box; width: min(100%, 25rem); padding: var(--wp--preset--spacing--60); border: 1px solid color-mix(in srgb, var(--wp--preset--color--gris-200) 70%, transparent); border-radius: var(--ct-r-lg); background: color-mix(in srgb, var(--wp--preset--color--blanc) 84%, transparent); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: var(--ct-ombre-lg), var(--ct-scene-arete); font-size: var(--wp--preset--font-size--normal); line-height: 1.45; color: var(--wp--preset--color--gris-900); transform: var(--ct-scene-carte-pose); transform-origin: center; } .ct-carte-espace__etat { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--ct-duree) var(--ct-courbe), visibility var(--ct-duree); } .ct-carte-espace__etat.is-actif { opacity: 1; visibility: visible; } /* Le contenu de la carte est l’aperçu de l’espace client du héros v1, repris tel quel : en-tête à fanion, liste d’étapes à trois marqueurs, barre de progression, légende. Seuls les noms de classes ont changé — les huit classes sans préfixe de la maquette (hero-card, card-header, optimization- item…) étaient la dernière entorse au nommage du thème. */ .ct-carte-espace__entete { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin-bottom: var(--wp--preset--spacing--50); } .ct-carte-espace__fanion { width: 26px; height: 26px; flex: none; fill: var(--ct-accent-contexte); } /* Le logo de marque : pavé bleu, glyphe blanc. Le fill du svg teinte tout le tracé ; seul le pavé reprend la main, par une règle directe qui l’emporte sur l’héritage. */ .ct-carte-espace__fanion--linkedin { fill: var(--wp--preset--color--blanc); } .ct-carte-espace__pave { fill: var(--ct-marque-linkedin); } /* La barre de progression de cet état s’accorde au logo plutôt qu’au bleu d’action — c’est le seul état qui parle d’une plateforme tierce. */ .ct-carte-espace--linkedin { --ct-accent: var(--ct-marque-linkedin); } .ct-carte-espace__titre { margin: 0; font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--texte); font-weight: 700; color: var(--wp--preset--color--marine); } .ct-carte-espace__etapes { list-style: none; margin: 0; padding: 0; } .ct-carte-espace__etapes li { display: flex; align-items: center; gap: .625rem; padding: .375rem 0; line-height: 1.35; } /* Les trois marqueurs d’état gardent leur hiérarchie visuelle (fait, en cours, à venir) ; le plus pâle reste au-dessus de 3:1, le seuil des objets graphiques. La carte entière est en aria-hidden — elle redit ce que le panneau de gauche énonce — donc ces glyphes ne portent aucune information à eux seuls. */ .ct-carte-espace__marque { width: 1em; flex: none; text-align: center; font-weight: 700; color: color-mix(in srgb, var(--wp--preset--color--gris-600) 70%, #fff); } .ct-carte-espace__etapes li.is-encours .ct-carte-espace__marque { color: var(--ct-ambre-texte); } .ct-carte-espace__etapes li.is-faite .ct-carte-espace__marque { color: var(--wp--preset--color--vert); } .ct-carte-espace__barre { height: 6px; border-radius: var(--ct-r-pill); background: var(--wp--preset--color--gris-200); overflow: hidden; margin: var(--wp--preset--spacing--50) 0 var(--wp--preset--spacing--30); } .ct-carte-espace__barre span { display: block; width: var(--ct-carte-progres, 33%); height: 100%; border-radius: inherit; background: var(--ct-accent-contexte); transform-origin: left; } .ct-carte-espace__progres { margin: 0; font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--petit); } /* Le rail : sa propre couche collante, centrée sur la largeur de la page et posée en bas de la fenêtre. Cinq ancres réelles — sans JavaScript elles mènent quand même au bon panneau, c’est du repérage, pas un ornement. La couche couvre toute la fenêtre : elle laisse passer les clics, seules les puces les reçoivent. */ .ct-scene__rail { align-self: start; position: sticky; top: var(--ct-scene-haut); height: var(--ct-scene-h); z-index: 2; display: flex; align-items: flex-end; justify-content: center; gap: .5rem; padding-bottom: var(--wp--preset--spacing--70); box-sizing: border-box; pointer-events: none; } .ct-scene__rail a { pointer-events: auto; display: block; width: 2.25rem; height: 4px; border-radius: var(--ct-r-pill); background: color-mix(in srgb, var(--wp--preset--color--marine) 24%, transparent); transition: background var(--ct-duree) var(--ct-courbe), width var(--ct-duree) var(--ct-courbe); } .ct-scene__rail a:hover { background: color-mix(in srgb, var(--wp--preset--color--marine) 45%, transparent); } .ct-scene__rail a.is-actif { width: 3.25rem; background: var(--wp--preset--color--bleu); } /* 7.1.4 Transparence réduite — le matériau devient opaque, le flou disparaît. */ @media (prefers-reduced-transparency: reduce) { .ct-carte-espace { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--wp--preset--color--blanc); } } /* 7.1.5 Sous 1024 px — ni collage, ni accrochage. Les cinq panneaux se lisent à la suite sur un fond unique. La carte est illustrative (aria-hidden) : la masquer ne retire aucun contenu. */ /* Sous 380 px, « CORRESPONDENT » ne tient pas a 34 px et se faisait couper en deux. Reduire le corps vaut mieux que briser le mot : le titre reste un mot entier par ligne. */ /* Sous 400 px, la gouttiere de 40 px voulue pour les grands ecrans mange le quart d'un telephone de 320 px : 80 px de marge pour 225 px de texte. Elle retombe a 24 px, ce qui rend 32 px a chaque section du site. La variable est celle que WordPress genere depuis theme.json ; la redefinir sur body suffit, toutes les sections alignees la lisent. */ @media (max-width: 400px) { body { --wp--style--root--padding-left: var(--wp--preset--spacing--50); --wp--style--root--padding-right: var(--wp--preset--spacing--50); } body { --ct-gouttiere: var(--wp--preset--spacing--50); } } /* Sous 400 px la carte enfle : chaque etape passe sur deux lignes et elle depassait sa bande de 53 px sur un 360x740. Elle se resserre. */ @media (max-width: 400px) { .ct-carte-espace { padding: var(--wp--preset--spacing--40); } .ct-carte-espace__etapes li { padding: 0; line-height: 1.2; } .ct-carte-espace__fanion { width: 22px; height: 22px; } } @media (max-width: 380px) { /* Mesure : « CORRESPONDENT », le mot le plus long du titre, fait 255 px a 28 px. Avec la gouttiere ramenee a 24 px il reste 257 px de colonne ; a 26 px le mot tombe a 237 px et garde 20 px de marge. */ .ct-scene__titre { font-size: 1.625rem; } } /* Sous 1024 px, la scene garde son principe — une illustration qui ne bouge pas pendant que le texte defile — mais transposee a la verticale : la carte se cale en haut de l'ecran, les panneaux passent dessous. Rien a changer au script : il pose deja is-actif sur les fonds, les etats de carte et les puces sans rien savoir de la mise en page, et son avance automatique est deja reservee au-dessus de 1025 px. Tout tient donc ici. */ @media (max-width: 1024px) { .ct-scene { /* --ct-scene-carte-h : la bande basse que la carte occupe. Le reste de la fenetre revient au texte, qui se lit en premier. */ /* Bornee des deux cotes : 42svh seul donnait 311 px sur un 360x740, trop court pour la carte qui y fait 350 px. Le plancher garantit qu'elle tient, le plafond qu'elle ne mange pas le texte sur grand ecran. */ --ct-scene-carte-h: clamp(22rem, 42svh, 23rem); } .ct-scene__voile { background: var(--ct-scene-voile-compact); } /* Une seule colonne, mais les deux couches restent superposees dans la meme cellule : c'est ce qui donne a la carte collante sa course. */ .ct-scene__grille { grid-template-columns: 1fr; padding-inline: var(--ct-gouttiere); } .ct-scene__grille > * { grid-column: 1; grid-row: 1; min-width: 0; } .ct-scene__panneau, .ct-scene__panneau > * { min-width: 0; } /* La carte se cale en bas de fenetre, le texte occupe le haut : sur telephone c'est le titre et l'appel a l'action qui doivent se lire en premier, l'illustration accompagne. */ .ct-scene__visuel { z-index: 2; align-self: end; top: auto; bottom: 0; height: var(--ct-scene-carte-h); padding-block: 0 var(--wp--preset--spacing--50); place-items: center; } /* Le texte qui descend passerait derriere la carte et resterait lisible dans les marges : ce voile l'efface progressivement, de bas en haut. */ .ct-scene__visuel::before { content: ""; position: absolute; inset: 0 calc(var(--ct-gouttiere) * -1) 0; background: linear-gradient(to top, var(--wp--preset--color--blanc) 0 86%, color-mix(in srgb, var(--wp--preset--color--blanc) 70%, transparent) 94%, transparent 100%); pointer-events: none; z-index: -1; } /* A plat : la pose en perspective, calculee pour une colonne de 44 %, deborderait largement un telephone. */ .ct-carte-espace { transform: none; width: 100%; padding: var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--petit); } .ct-carte-espace__titre { font-size: var(--wp--preset--font-size--normal); } .ct-carte-espace__entete { margin-bottom: var(--wp--preset--spacing--30); } .ct-carte-espace__etapes li { padding: .1875rem 0; } .ct-carte-espace__barre { margin: var(--wp--preset--spacing--30) 0 .25rem; } /* Le texte ne defile plus : il se fige et se croise en fondu, comme la carte. Le panneau devient un pilote — il garde sa hauteur, donc la distance de defilement et l'observation, mais on ne le voit pas. */ .ct-scene__panneaux { padding-bottom: 0; } .ct-scene__panneau { align-content: start; min-height: 0; height: var(--ct-scene-h); padding-block: 0; scroll-margin-top: var(--ct-scene-haut); } .ct-scene__contenu { position: sticky; top: calc(var(--ct-scene-haut) + var(--wp--preset--spacing--60)); } /* Masque seulement si le script est la pour rallumer le bon panneau. */ .ct-scene.is-pilotee .ct-scene__contenu { opacity: 0; visibility: hidden; transition: opacity .45s var(--ct-courbe), visibility .45s; } .ct-scene.is-pilotee .ct-scene__panneau.is-actif .ct-scene__contenu { opacity: 1; visibility: visible; } /* Le contenu reste fixe pendant que la boite de son panneau s'en va : le panneau suivant passe alors par-dessus et interceptait les clics sur le lien du parcours. Toute la pile devient intangible, et seul le contenu du panneau actif — celui qu'on voit — reprend les clics. */ .ct-scene.is-pilotee .ct-scene__panneaux, .ct-scene.is-pilotee .ct-scene__panneau { pointer-events: none; } .ct-scene.is-pilotee .ct-scene__panneau.is-actif .ct-scene__contenu { pointer-events: auto; } /* Le panneau d'ouverture garde toute la fenetre : son titre, son chapo et ses deux boutons ne tiennent pas dans la place qui reste sous la carte, et ce sont eux qui portent l'appel a l'action. La carte s'efface tant qu'il est actif, puis reparait des la premiere situation. */ .ct-scene__panneau:first-child { height: var(--ct-scene-h); } .ct-scene__visuel:has([data-ct-scene-etat="0"].is-actif) { opacity: 0; visibility: hidden; transition: opacity .35s var(--ct-courbe), visibility .35s; } .ct-scene__ico { width: 2.75rem; height: 2.75rem; } .ct-scene__rail { display: none; } /* Sous 560 px la carte ne tient pas sous le heros, mais la place qui reste ne doit pas se lire comme un trou : le contenu se centre. */ .ct-scene__panneau:first-child { align-content: center; } } /* A partir de 500 px le texte du heros se resserre assez pour laisser la carte s'afficher sous lui. En dessous elle resterait cachee, et le contenu se centre pour que la place libre ne se lise pas comme un trou. */ @media (min-width: 500px) and (max-width: 1024px) { .ct-scene__visuel:has([data-ct-scene-etat="0"].is-actif) { opacity: 1; visibility: visible; } .ct-scene__panneau:first-child { align-content: start; } } /* Fenetre trop basse pour empiler carte et texte — telephone couche, surtout. On revient a la lecture a la suite : carte masquee, panneaux enchaines. */ @media (max-width: 1024px) and (max-height: 620px) { .ct-scene { overflow: visible; } .ct-scene__fonds { position: absolute; inset: 0; height: 100%; align-self: stretch; } .ct-scene__fond { display: none; transition: none; } .ct-scene__fond:first-child { display: block; opacity: 1; } .ct-scene__grille > * { grid-row: auto; } .ct-scene__visuel { display: none; } .ct-scene__panneaux { padding-top: 0; } .ct-scene__panneau { min-height: 0; padding-block: var(--wp--preset--spacing--80); } .ct-scene__panneau + .ct-scene__panneau { border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--marine) 12%, transparent); } .ct-scene__panneau--tq .ct-surtitre, .ct-scene__panneau--cc .ct-surtitre, .ct-scene__panneau--int .ct-surtitre { display: none; } } /* 7.2 Vous reconnaissez-vous — deux cartes égales, deux listes symétriques : les mêmes puces, un marqueur croix d’un côté, coche de l’autre. */ .ct-bulles { margin-top: var(--wp--preset--spacing--70) !important; } .ct-bulle { padding: var(--wp--preset--spacing--70); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); } .ct-bulle--defis { border-top: 4px solid var(--wp--preset--color--framboise); } .ct-bulle--solution { border-top: 4px solid var(--wp--preset--color--vert); } .ct-bulle__titre { font-size: var(--wp--preset--font-size--grand); color: var(--ct-titre); } @media (max-width: 900px) { .ct-bulle { padding: var(--wp--preset--spacing--60); } } /* 7.3 Quatre situations, quatre parcours. */ /* Sur /parcours/, la grille de cartes n’a pas de fond à elle : elle reste sur le blanc de la page. Le contexte suit — ct-clair et non ct-nuit — sinon les titres, blancs, disparaîtraient. Sa marge haute est supprimée : le chapeau de page la précède immédiatement et leurs marges s’additionnaient. */ .ct-parcours-liste { padding-top: 0; } .ct-profils, .ct-profils--hub { margin-top: var(--wp--preset--spacing--70) !important; } .ct-profil, .ct-parcours-carte { position: relative; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--60); border-top: 4px solid var(--ct-accent); } .ct-profil::before { content: ""; display: block; width: 2.75rem; height: 2.75rem; border-radius: var(--ct-r-sm); background: var(--ct-surface-2); } .ct-profil::after { content: ""; position: absolute; top: calc(var(--wp--preset--spacing--60) + .625rem); left: calc(var(--wp--preset--spacing--60) + .625rem); width: 1.5rem; height: 1.5rem; -webkit-mask: var(--ct-i) center / contain no-repeat; mask: var(--ct-i) center / contain no-repeat; background: var(--ct-accent-contexte); } /* Sur /parcours/, l’icône est présentée en grand et nue : la pastille disparaît, et le tracé masqué — qui était positionné par-dessus elle — revient dans le flux pour devenir le premier élément de la carte. À cette taille l’épaisseur du trait passe à 9 px : c’est le tracé d’origine qui grandit, aucun second dessin n’est nécessaire. */ /* Sur /parcours/, la zone d’icône reprend la composition des cases numérotées des pages de parcours (§ 8.3) : même carré, même disque décentré, même jeu de trois teintes dérivées de l’accent — avec l’icône à la place du chiffre. Deux pseudo-éléments seulement sont disponibles pour trois plans, alors le disque est peint en dégradé radial à arrêt net dans le fond du carré. Il est donc découpé par la boîte et son rayon sans avoir besoin d’overflow : hidden. L’icône est un pseudo-élément : impossible d’envelopper le reste de la carte dans une colonne sans toucher au balisage des quatre cartes. La case est donc positionnée en absolu, et sa place réservée par un retrait à gauche. */ .ct-parcours-carte { /* Meme raison qu'au § 8.3 : la zone d'icone reserve 128 px de marge interne, et sous 320 px la colonne de texte devient assez etroite pour qu'un mot long la depasse. `anywhere` seul entre dans le calcul de min-content. */ overflow-wrap: anywhere; hyphens: auto; background: transparent; /* Le liseré d’accent de 4 px du § 7.3 retombe au filet ordinaire de la recette de carte : la couleur du parcours est déjà portée par la case d’icône et par le lien. */ border-top: 1px solid var(--ct-bord); padding-left: calc(var(--wp--preset--spacing--60) + 7rem + var(--wp--preset--spacing--50)); } .ct-parcours-carte::before { content: ""; display: block; position: absolute; /* Pas de hauteur fixe : la case s’étire du haut au bas de la carte. Les cartes d’une même rangée étant égalées par la grille, la zone remplit exactement l’espace, quelle que soit la longueur du texte à côté. */ top: var(--wp--preset--spacing--60); bottom: var(--wp--preset--spacing--60); left: var(--wp--preset--spacing--60); width: 7rem; /* La recette de base fixe height: 2.75rem. Sans cette remise à auto, la hauteur l’emporte sur bottom et la case reste haute de 44 px. */ height: auto; border-radius: var(--ct-r-md); background: radial-gradient(circle 3.6rem at 65% 70%, color-mix(in srgb, var(--ct-accent) 45%, #fff) 0 100%, transparent 100%), var(--ct-accent-clair); } .ct-parcours-carte::after { /* Centrée sur le disque, qui est à 65 % / 70 % de la case. En vertical, le pourcentage se résout sur la carte et non sur la case : celle-ci est en retrait de 2 rem en haut comme en bas, d’où la correction de 0,8 rem (70 % × 2 rem − 2 rem). */ top: calc(70% - .8rem); transform: translateY(-50%); left: calc(var(--wp--preset--spacing--60) + 3.05rem); width: 3rem; height: 3rem; background: color-mix(in srgb, var(--ct-accent) 8%, #fff); } @media (max-width: 600px) { .ct-parcours-carte { padding-left: calc(var(--wp--preset--spacing--60) + 5rem + var(--wp--preset--spacing--40)); } .ct-parcours-carte::before { width: 5rem; height: auto; background: radial-gradient(circle 2.6rem at 65% 70%, color-mix(in srgb, var(--ct-accent) 45%, #fff) 0 100%, transparent 100%), var(--ct-accent-clair); } .ct-parcours-carte::after { left: calc(var(--wp--preset--spacing--60) + 2.15rem); width: 2.2rem; height: 2.2rem; } } /* Sous 400 px la zone d'icone a gauche ne laissait plus que 65 px de colonne : la cesure devenait le mecanisme principal et decoupait « Chercheur d'emploi » en quatre morceaux. La case passe donc au-dessus, en carre, et le texte reprend toute la largeur de la carte. */ @media (max-width: 400px) { .ct-parcours-carte { padding-left: var(--wp--preset--spacing--60); padding-top: calc(var(--wp--preset--spacing--60) + 5rem + var(--wp--preset--spacing--40)); } .ct-parcours-carte::before { top: var(--wp--preset--spacing--60); bottom: auto; width: 5rem; height: 5rem; } .ct-parcours-carte::after { /* Le disque est a 65 % / 70 % d'une case de 5 rem : 3,25 rem et 3,5 rem. */ top: calc(var(--wp--preset--spacing--60) + 3.5rem); left: calc(var(--wp--preset--spacing--60) + 3.25rem); transform: translate(-50%, -50%); width: 2.2rem; height: 2.2rem; } } /* Les cartes reprennent les icônes de la scène d’accueil : une même situation doit se reconnaître d’une page à l’autre. L’override est scopé à la carte, pour ne pas déborder sur les autres porteurs d’accent, qui partagent --ct-i avec elle. */ .ct-parcours-carte.ct-profil--che { --ct-i: var(--ct-i-send); } .ct-parcours-carte.ct-profil--tq { --ct-i: var(--ct-i-certificate); } .ct-parcours-carte.ct-profil--cc { --ct-i: var(--ct-i-route); } .ct-parcours-carte.ct-profil--int { --ct-i: var(--ct-i-presentation); } /* Le seul endroit où les quatre accents sont déclarés. Chacun porte sa couleur, son texte lisible par-dessus, et son icône. */ .ct-profil--che, .ct-scene__panneau--che, .ct-carte-espace--che, .ct-profil-page--che { --ct-accent: var(--wp--preset--color--sarcelle); --ct-accent-sur: var(--wp--preset--color--blanc); --ct-i: var(--ct-i-work); } .ct-profil--tq, .ct-scene__panneau--tq, .ct-carte-espace--tq, .ct-profil-page--tq { --ct-accent: var(--wp--preset--color--vert); --ct-accent-sur: var(--wp--preset--color--blanc); --ct-i: var(--ct-i-globe); } .ct-profil--cc, .ct-scene__panneau--cc, .ct-carte-espace--cc, .ct-profil-page--cc { --ct-accent: var(--wp--preset--color--framboise); --ct-accent-sur: var(--wp--preset--color--blanc); --ct-i: var(--ct-i-sign); } .ct-profil--int, .ct-scene__panneau--int, .ct-carte-espace--int, .ct-profil-page--int { --ct-accent: var(--wp--preset--color--ambre); --ct-accent-sur: var(--wp--preset--color--nuit); --ct-accent-texte: var(--ct-ambre-texte); --ct-i: var(--ct-i-users); } .ct-profil__titre, .ct-parcours-carte__titre { font-size: var(--wp--preset--font-size--moyen); line-height: 1.3; color: var(--ct-titre); } .ct-profil__texte, .ct-parcours-carte__pour { font-size: var(--wp--preset--font-size--texte); color: var(--ct-texte-2); flex: 1; } .ct-profil__lien a { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--normal); text-decoration: none; color: var(--ct-accent-contexte) !important; } .ct-profil__lien a:hover { text-decoration: underline; text-underline-offset: 4px; } /* 7.4 La méthode — une scène pleine fenêtre. Même architecture que le § 7.1 : un plateau collant et les pilotes de défilement empilés dans une seule cellule de grille. Deux volets ici — la vidéo et l’offre — qui se remplacent par une bascule d’échelle. La hauteur de la section vient des pilotes (deux fois la hauteur libre) ; le plateau tient dessus pendant tout le défilement. Sans JavaScript : aucune classe ne bouge, la vidéo reste affichée. */ .ct-methode { position: relative; box-sizing: border-box; display: grid; grid-template-columns: 1fr; /* clip, surtout pas hidden : hidden ferait de la section un conteneur de défilement et le plateau cesserait de coller. */ overflow: clip; padding-block: 0; } .ct-methode > * { grid-column: 1; grid-row: 1; min-width: 0; } .ct-methode__plateau { z-index: 1; align-self: start; position: sticky; top: var(--ct-scene-haut); box-sizing: border-box; display: grid; grid-template-rows: auto auto minmax(0, 1fr); /* Le row-gap vaut pour les deux intervalles ; celui qui précède les volets est repris plus bas, il a besoin de plus d’air que titre→chapô. */ gap: var(--wp--preset--spacing--40); width: 100%; /* hauteur ferme, pas min-height : c’est ce qui rend la rangée des volets définie, donc ce qui permet à la vidéo de se brider sur max-height: 100%. Avec min-height, la vidéo faisait au contraire grandir la rangée et débordait sous le pli. */ height: var(--ct-scene-h); max-width: 62rem; margin-inline: auto; /* ~150 px de respiration au-dessus du titre et sous les volets. La valeur est bornée par la hauteur de fenêtre : le plateau est collé et doit tenir dans un écran, donc 150 px seulement quand il y a la place pour. */ /* 250 px pleins dès 1250 px de haut, puis décroissance : le plateau est collé et doit tenir dans un écran, donc la respiration cède le pas aux volets quand la fenêtre est basse. La pente vaut 250 px à 1250, 170 px à 1080 et 85 px à 900 ; en dessous, le plancher de 40 px prend le relais. */ --ct-methode-air: clamp(2.5rem, calc(47.1svh - 339px), 15.625rem); padding-block: var(--ct-methode-air); padding-inline: var(--wp--preset--spacing--65); } /* Les marges verticales des enfants doubleraient le gap de la grille. */ .ct-methode__plateau > * { margin-block: 0 !important; } /* 50 px dès que la scène est active — elle ne l’est qu’à partir de 1025 px, où la borne haute du clamp est déjà atteinte. En dessous, le titre redescend au lieu d’occuper quatre lignes. */ .ct-methode .ct-titre-section { text-align: center; font-size: clamp(2.25rem, 4.1vw + 0.5rem, 3.125rem); line-height: 1.06; text-transform: uppercase; letter-spacing: -0.015em; } /* Chapô justifié sur toute la mesure. La césure est indispensable ici : sans elle, justifier 62 rem creuse des rivières entre les mots. text-wrap revient à wrap parce que pretty, posé sur tous les p au § 3, contrarie la justification. */ .ct-methode__chapo { max-width: none; text-align: justify; text-wrap: wrap; hyphens: auto; } /* Les deux volets occupent la même cellule : la pile ne change pas de hauteur quand ils permutent. L’un s’efface en rétrécissant pendant que l’autre grandit — d’où la même échelle de départ pour les deux. */ /* Les volets s’étirent sur toute la rangée — c’est ce qui leur donne une hauteur définie, et donc ce qui rend le max-height de la vidéo calculable. Le centrage se fait un cran plus bas, dans le volet lui-même. */ .ct-methode__pile { display: grid; min-height: 0; align-items: stretch; margin-top: var(--wp--preset--spacing--70); } /* align-content: start et non center : quand la carte est plus haute que la rangée — fenêtre basse ou étroite — le débordement part vers le bas au lieu de remonter par-dessus le chapô. */ .ct-methode__volet { grid-area: 1 / 1; display: grid; align-content: start; justify-items: center; width: 100%; min-height: 0; opacity: 0; visibility: hidden; transform: scale(.92); transition: opacity .55s var(--ct-courbe), transform .55s var(--ct-courbe), visibility .55s; } .ct-methode__volet.is-actif { opacity: 1; visibility: visible; transform: none; } /* Le volet vidéo étire sa rangée au lieu de la centrer : sans cela, la rangée se dimensionne sur son contenu et le height: 100% de la carte n’a plus de référence. Le volet d’offre, lui, garde le centrage : sa carte a sa propre hauteur. */ .ct-methode__volet--video { align-content: stretch; } .ct-methode__volet > * { margin: 0 !important; } /* Les pilotes : deux blocs vides d’une hauteur de fenêtre. Ils ne portent aucun contenu, seulement la distance de défilement dont l’observateur a besoin pour basculer d’un volet à l’autre. */ .ct-methode__course { z-index: 0; pointer-events: none; } .ct-methode__pilote { height: var(--ct-scene-h); } /* Dans une scène pleine fenêtre, c’est la hauteur qui est rare, pas la largeur. La vidéo prend donc toute la largeur du plateau ; c’est son rapport 16/9 porté par la carte, avec max-height, qui l’empêche de déborder en bas — la hauteur bride la largeur, et non l’inverse. La carte d’offre, elle, réduit son corps et ses marges avec la fenêtre. */ .ct-video__carte { box-sizing: border-box; aspect-ratio: 16 / 9; /* La largeur se déduit de la hauteur réellement disponible : la fenêtre, moins l’en-tête collé (5.5rem), moins les deux respirations, moins l’en-tête de section (titre + chapô + leurs écarts, 14rem). Un pourcentage ne suffisait pas : la rangée se dimensionne sur son contenu, donc la référence n’existe pas. */ width: 100%; height: auto; max-width: min(100%, calc((100svh - 5.5rem - 2 * var(--ct-methode-air) - 14rem) * 16 / 9)); padding: .75rem; } .ct-methode .ct-promo { padding: clamp(1.25rem, 3.2svh, 2.25rem); } .ct-methode .ct-promo__titre { font-size: clamp(1.5rem, 4.4svh, 3rem); } .ct-methode .ct-promo__prix { font-size: clamp(1.75rem, 4.4svh, 3.25rem); } .ct-methode .ct-promo__carte { padding: clamp(1rem, 2.6svh, 1.75rem); } .ct-video__cadre { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--ct-r-sm); } /* La carte d’offre ne tient pleine qu’au-dessus de 1000 px de haut. En dessous, son paragraphe s’efface : il redit ce que dit déjà « ce qui vous attend » dans la colonne de droite, et c’est lui qui poussait la fin de la carte sous le pli — où le plateau collé la rendait inatteignable. Le texte complet reste sur la bande « appel gratuit ». */ /* Il a existe ici une regle qui masquait une partie du corps de la carte sur les fenetres basses, faute de place dans le plateau colle. Le message a ete raccourci et les pastilles reduites : tout tient desormais des 880 px de hauteur utile, plus rien n'est masque. Mesure a l'appui — carte 360 px pour une pile de 459 px. */ /* Fenêtre basse mais large — portable 1280×720 et compagnie. Le plateau est collé : s’il dépasse la hauteur de fenêtre, son bas devient inatteignable. On reprend donc de la place sur l’en-tête de section, qui est du texte, pour la laisser aux volets, qui sont le sujet. */ @media (min-width: 1025px) and (max-height: 820px) { .ct-methode .ct-titre-section { font-size: var(--wp--preset--font-size--titre); } .ct-methode__chapo { font-size: var(--wp--preset--font-size--texte); } } /* Sous 1024 px — ni plateau collant, ni bascule : la vidéo et l’offre se lisent l’une après l’autre, et la section retrouve une hauteur normale. */ @media (max-width: 1024px) { .ct-methode { display: block; overflow: visible; padding-block: var(--wp--preset--spacing--90); } .ct-methode__plateau { position: static; height: auto; /* Gouttieres laterales : sans elles le chapo, la video et la carte promo touchaient les deux bords de l'ecran. Le padding vertical reste a zero, il est porte par la section. */ padding: 0 var(--ct-gouttiere); } .ct-video__carte { max-width: 100%; } .ct-methode__pile { gap: var(--wp--preset--spacing--60); } .ct-methode__volet { grid-area: auto; opacity: 1; visibility: visible; transform: none; transition: none; } .ct-methode__course { display: none; } /* Justifier une colonne de 35 caracteres creuse des blancs entre les mots, et la cesure ne les rattrape pas. Le chapo revient au fer a gauche. */ .ct-methode__chapo { text-align: left; } .ct-video__carte { height: auto; width: 100%; } .ct-methode .ct-promo { padding: var(--wp--preset--spacing--60); } .ct-methode .ct-promo__titre, .ct-methode .ct-promo__prix { font-size: var(--wp--preset--font-size--heros); } .ct-methode .ct-promo__carte { padding: var(--wp--preset--spacing--60); } } /* 7.4.1 La carte d’offre spéciale. Nommée ct-promo et non ct-offre : .ct-offre est déjà le bloc tarif du § 7.6, avec ses propres __carte, __titre, __prix et __badge — les deux blocs se seraient écrasés l’un l’autre. Le nom ne dit pas son contenu, pour que celui-ci puisse changer sans renommer la recette. Le seul bloc du thème dont le fond sort de la palette : son dégradé et son or sont déclarés au § 1. Le reste lit les rôles habituels — le bouton, le vert de l’économie et le bleu du prix viennent des 18 couleurs. */ .ct-promo { position: relative; overflow: hidden; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--wp--preset--spacing--70); padding: var(--wp--preset--spacing--80); border-radius: var(--ct-r-lg); background: var(--ct-promo-degrade); color: var(--wp--preset--color--blanc); } /* Les deux disques translucides du fond : ils donnent la profondeur sans image. Décoratifs, donc hors du flux et sans texte alternatif. */ .ct-promo::before, .ct-promo::after { content: ""; position: absolute; border-radius: 50%; background: var(--ct-promo-halo); pointer-events: none; } .ct-promo::before { width: 22rem; height: 22rem; top: -9rem; right: 18%; } .ct-promo::after { width: 15rem; height: 15rem; bottom: -7rem; left: -4rem; } .ct-promo > * { position: relative; z-index: 1; } .ct-promo__badge { display: inline-flex; align-items: center; margin: 0 0 var(--wp--preset--spacing--40) !important; padding: .375rem .875rem; border-radius: var(--ct-r-pill); background: var(--ct-promo-badge); font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--petit); letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--blanc); } .ct-promo__titre { margin: 0 0 var(--wp--preset--spacing--40) !important; font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--geant); font-weight: 800; line-height: .98; letter-spacing: -0.02em; text-transform: uppercase; color: var(--wp--preset--color--blanc); } .ct-promo__or { color: var(--ct-promo-or); } .ct-promo__texte { margin: 0 0 var(--wp--preset--spacing--50) !important; max-width: 34rem; color: color-mix(in srgb, var(--wp--preset--color--blanc) 88%, transparent); } /* Les trois atouts : mêmes pastilles translucides que le reste du thème, marquées par la coche du registre d’icônes du § 11. */ .ct-promo__atouts { display: flex; flex-wrap: wrap; gap: .4375rem; margin: 0 !important; padding: 0; list-style: none; } .ct-promo__atouts li { display: flex; align-items: center; gap: .4375rem; padding: .3125rem .6875rem; border: 1px solid color-mix(in srgb, var(--wp--preset--color--blanc) 26%, transparent); border-radius: var(--ct-r-pill); background: color-mix(in srgb, var(--wp--preset--color--blanc) 12%, transparent); font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--petit); color: var(--wp--preset--color--blanc); } .ct-promo__atouts li::before { --ct-i: var(--ct-i-coche); --ct-i-couleur: color-mix(in srgb, var(--wp--preset--color--vert) 55%, #fff); width: 1rem; height: 1rem; flex: none; } /* La carte de prix — surface blanche pleine, posée sur le dégradé. */ .ct-promo__carte { box-sizing: border-box; padding: var(--wp--preset--spacing--60); border-radius: var(--ct-r-md); background: var(--wp--preset--color--blanc); box-shadow: var(--ct-ombre-lg); text-align: center; color: var(--wp--preset--color--gris-900); } .ct-promo__prix { margin: 0 0 var(--wp--preset--spacing--40) !important; font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--heros); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; color: var(--wp--preset--color--bleu); } .ct-promo__economie { display: block; margin: 0 0 var(--wp--preset--spacing--50) !important; padding: .5rem .875rem; border-radius: var(--ct-r-sm); background: var(--wp--preset--color--vert); font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--normal); color: var(--wp--preset--color--blanc); } .ct-promo__sur { margin: 0 0 .25rem !important; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--normal); color: var(--wp--preset--color--marine); } .ct-promo__detail { margin: 0 0 var(--wp--preset--spacing--50) !important; font-size: var(--wp--preset--font-size--normal); line-height: 1.45; color: var(--wp--preset--color--gris-600); } .ct-promo__detail strong { color: var(--wp--preset--color--gris-900); } .ct-promo__action { margin: 0 !important; } .ct-promo__action .wp-block-button__link { display: block; width: 100%; box-sizing: border-box; } @media (max-width: 900px) { .ct-promo { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--60); padding: var(--wp--preset--spacing--60); } .ct-promo::before { right: -6rem; } } /* 7.5 Comment ça marche. */ /* Capitales posées par le CSS, texte source en casse de phrase — comme pour le titre de la section méthode, et avec le même resserrement : à ce corps, la valeur de theme.json laisse les capitales trop aérées. */ .ct-demarrage .ct-titre-section--gauche { text-transform: uppercase; letter-spacing: -0.015em; } .ct-etapes { margin-top: var(--wp--preset--spacing--70) !important; } .ct-etape { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30); } .ct-etape > * { margin: 0 !important; } .ct-etape__num { --ct-accent: var(--wp--preset--color--bleu); --ct-accent-sur: var(--wp--preset--color--blanc); } .ct-etape__titre { font-size: var(--wp--preset--font-size--moyen); color: var(--ct-titre); } .ct-etape__texte { font-size: var(--wp--preset--font-size--texte); color: var(--ct-texte-2); } .ct-etape--liste { padding: var(--wp--preset--spacing--60); gap: var(--wp--preset--spacing--40); } .ct-flow { margin-top: var(--wp--preset--spacing--70) !important; } /* 7.6 Tarif. */ .ct-tarif__colonnes { gap: var(--wp--preset--spacing--70); } /* Capitales posées par le CSS, texte source en casse de phrase — comme les titres des sections méthode et « comment ça marche ». */ .ct-tarif__titre { margin-bottom: var(--wp--preset--spacing--40); text-transform: uppercase; letter-spacing: -0.015em; } /* L’icône de section, nue : le tracé vient du registre du § 11 par une classe ct-ico--*, sa couleur suit l’accent lisible sur ce fond sombre. */ .ct-tarif__ico { display: grid; width: 5rem; height: 5rem; margin-bottom: var(--wp--preset--spacing--40); } .ct-tarif__ico::before { width: 100%; height: 100%; --ct-i-couleur: var(--ct-accent-contexte); } .ct-tarif__carte { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--70); } .ct-prix { font-family: var(--wp--preset--font-family--lexend); color: var(--ct-titre); display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .ct-prix__montant { font-size: var(--wp--preset--font-size--geant); font-weight: 800; line-height: 1; letter-spacing: -.03em; } .ct-prix__unite { font-size: var(--wp--preset--font-size--moyen); font-weight: 500; color: var(--ct-texte-2); } /* 7.7 Appel gratuit — la seule bande de couleur pleine du site. */ .ct-offre { position: relative; overflow: hidden; padding: clamp(2rem, 5vw, 4rem); border-radius: var(--ct-r-lg); background: var(--wp--preset--color--bleu); color: var(--ct-texte); } .ct-offre::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 90% at 88% 6%, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 70%); } .ct-offre > * { position: relative; z-index: 1; } .ct-offre__colonnes { gap: var(--wp--preset--spacing--70); } .ct-offre__colonnes > .wp-block-column:first-child > * { margin-block: 0 var(--wp--preset--spacing--40); } .ct-offre__titre { font-size: var(--wp--preset--font-size--titre); line-height: 1.15; } .ct-offre__titre mark { color: var(--wp--preset--color--blanc); background: transparent; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; } .ct-offre__sous { font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--moyen); } .ct-offre__sous mark { color: var(--wp--preset--color--blanc) !important; background: transparent; font-weight: 800; } .ct-offre__texte { color: var(--ct-texte-2); max-width: 38rem; } .ct-offre .ct-pastille:not(.ct-pastille--verte) { border-color: rgba(255, 255, 255, .38); background: rgba(255, 255, 255, .10); color: var(--wp--preset--color--blanc); } .ct-offre__carte { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--60); border-color: transparent; box-shadow: var(--ct-ombre-lg); color: var(--wp--preset--color--gris-900); font-size: var(--wp--preset--font-size--texte); } .ct-offre__carte :where(h1, h2, h3) { color: var(--wp--preset--color--marine); } .ct-offre__carte .ct-note { color: var(--wp--preset--color--gris-600); } .ct-barre { font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--moyen); text-decoration: line-through; text-align: center; color: var(--wp--preset--color--gris-600); } .ct-duree { gap: .375rem; } .ct-duree > * { margin: 0; font-family: var(--wp--preset--font-family--lexend); font-weight: 800; line-height: 1; color: var(--wp--preset--color--bleu); } .ct-duree__nombre { font-size: var(--wp--preset--font-size--geant); letter-spacing: -.03em; } .ct-duree__unite { font-size: var(--wp--preset--font-size--moyen); padding-bottom: .35rem; } .ct-offre__carte .ct-pastille--verte { align-self: center; } .ct-offre__carte-titre { font-family: var(--wp--preset--font-family--lexend); font-size: var(--wp--preset--font-size--moyen); } /* 7.8 Ce que des participants ont rapporté — bande bleue. Les chiffres sont présentés comme des expériences rapportées, jamais comme un engagement de résultat. La mention de variabilité est collée au titre : ne la relegue pas visuellement, c’est elle qui tient le cadre. */ /* La section est écrite en HTML natif : WordPress ne lui pose donc pas has-global-padding, et .ct-section ne gère que le rythme vertical. Sans cette ligne, les tuiles touchent les bords de la fenêtre. */ .ct-rapporte { padding-inline: var(--wp--preset--spacing--65); } .ct-rapporte__tete { max-width: 46rem; margin-inline: auto; text-align: center; } .ct-rapporte__ico { display: grid; width: 5rem; height: 5rem; margin: 0 auto var(--wp--preset--spacing--40); } .ct-rapporte__ico::before { width: 100%; height: 100%; --ct-i-couleur: var(--ct-titre); } .ct-rapporte .ct-titre-section { text-transform: uppercase; letter-spacing: -0.015em; color: var(--ct-titre); } .ct-rapporte__avis { font-size: var(--wp--preset--font-size--normal) !important; color: var(--ct-texte-2); } .ct-compteurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: var(--wp--preset--spacing--50); max-width: var(--ct-enveloppe); margin: var(--wp--preset--spacing--70) auto 0 !important; padding: 0; list-style: none; } /* Tuiles translucides plutôt que blanches : sur la bande bleue, le blanc plein est réservé aux cartes de témoignage, qui portent du texte long. */ .ct-compteur { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: var(--wp--preset--spacing--50); background: var(--ct-surface-2); border-color: transparent; } .ct-compteur > * { text-align: center; margin: 0; } .ct-compteur__nombre { font-family: var(--wp--preset--font-family--lexend); font-weight: 800; font-size: var(--wp--preset--font-size--heros); line-height: 1; letter-spacing: -.03em; color: var(--ct-titre); } .ct-compteur__libelle { font-size: var(--wp--preset--font-size--normal); line-height: 1.45; color: var(--ct-texte-2); } /* 7.9 Témoignages — même bande bleue, séparée par un filet. Les cartes sont blanches sur fond bleu : elles redéclarent donc les variables de contexte clair, plutôt que de poser une couleur par élément. */ .ct-temoignages { position: relative; } .ct-temoignages::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(100% - 2 * var(--wp--preset--spacing--65), var(--ct-enveloppe)); height: 1px; background: var(--ct-bord); } .ct-temoignages .ct-titre-section { text-transform: uppercase; letter-spacing: -0.015em; } .ct-temos { margin-top: var(--wp--preset--spacing--70) !important; } /* Les cartes sont blanches sur fond bleu : elles redéclarent les variables de contexte clair, plutôt que de poser une couleur par élément. overflow: hidden parce que le grand guillemet déborde volontairement en bas à droite et doit être coupé par l’angle arrondi. */ .ct-temo { --ct-titre: var(--wp--preset--color--marine); --ct-texte: var(--wp--preset--color--gris-900); --ct-texte-2: var(--wp--preset--color--gris-600); --ct-bord: var(--wp--preset--color--gris-200); position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--65); border-color: transparent; box-shadow: var(--ct-ombre-lg); } /* Les cinq étoiles : des glyphes géométriques, pas des émojis — et leur équivalent textuel est à côté, hors écran. */ .ct-temo__note { margin: 0 !important; font-size: var(--wp--preset--font-size--moyen); line-height: 1; letter-spacing: .12em; /* Le jaune de la note en production est #F0AD4E : l’ambre de la palette, éclairci, tombe dessus à quelques unités près. */ color: color-mix(in srgb, var(--wp--preset--color--ambre) 72%, #fff); } /* Le guillemet fermant, en gros et en pâle, ancré en bas à droite — il sort du cadre et l’angle arrondi le recoupe. Purement décoratif : il est en ::after, donc absent de l’arbre d’accessibilité. */ .ct-temo::after { content: "”"; position: absolute; z-index: 0; right: -.5rem; bottom: -12.5rem; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: 20rem; line-height: 1; /* #EEF4FA en production ; obtenu ici depuis la palette, à deux unités près. */ color: color-mix(in srgb, var(--wp--preset--color--gris-200) 45%, #fff); pointer-events: none; } .ct-temo > * { position: relative; z-index: 1; } /* Justifié comme la maquette ; la césure est indispensable sur une colonne étroite, sans elle la justification creuse des rivières. */ .ct-temo p { margin: 0; font-size: var(--wp--preset--font-size--texte); line-height: 1.6; color: var(--ct-texte); text-align: justify; text-wrap: wrap; hyphens: auto; } .ct-temo__note { text-align: left; } .ct-temo cite { margin-top: auto; font-style: normal; font-family: var(--wp--preset--font-family--lexend); font-weight: 900; font-size: var(--wp--preset--font-size--moyen); color: var(--ct-titre); } /* 7.10 Qui vous accompagne. */ .ct-accompagne__colonnes, .ct-bio__colonnes { gap: var(--wp--preset--spacing--70); } .ct-portrait { margin: 0; } /* Sur l’accueil, le portrait se ferme sur le bas de la section : elle supprime son padding bas, et la colonne de texte le reprend pour elle seule — sinon « En savoir plus » toucherait lui aussi le bord. Le fond derrière la découpe disparaît ; la page À propos garde le sien. */ .ct-accompagne { padding-bottom: 0; } .ct-accompagne .ct-portrait__col { align-self: flex-end; } .ct-accompagne .ct-accompagne__colonnes > :not(.ct-portrait__col) { padding-bottom: var(--wp--preset--spacing--90); } .ct-accompagne .ct-portrait img { background: none; border-radius: var(--ct-r-md) var(--ct-r-md) 0 0; } .ct-portrait img { display: block; width: 100%; height: auto; border-radius: var(--ct-r-md); background: var(--wp--preset--color--nuit-carte); } .ct-accompagne__titre { margin-bottom: var(--wp--preset--spacing--40); } .ct-signature__nom { margin-top: var(--wp--preset--spacing--50) !important; margin-bottom: .125rem !important; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; color: var(--ct-titre); } .ct-signature__ordre { margin-top: 0 !important; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-signature__nom--sombre { color: var(--wp--preset--color--marine); } .ct-signature__ordre--sombre { color: var(--wp--preset--color--gris-600); } /* 7.11 Appel à l’action — contexte clair, titre aligné à droite face à la carte. Les deux lignes du titre ont le même corps : c’est la graisse qui les sépare, fine puis noire. Lexend est une police variable de 100 à 900, le 300 est donc un vrai dessin, pas une approximation. */ .ct-cta__colonnes { gap: var(--wp--preset--spacing--80); } .ct-cta__colonnes > :first-child { text-align: right; } .ct-cta__pre, .ct-cta__titre { margin: 0 !important; font-family: var(--wp--preset--font-family--lexend); /* 70 px dès 1025 px de large ; en dessous le titre redescend au lieu d’occuper six lignes. Le plancher est à 40 px. */ font-size: clamp(2.5rem, 5.8vw + 0.65rem, 4.375rem); line-height: 1.06; letter-spacing: -0.02em; text-transform: uppercase; color: var(--ct-titre); } /* « Prêt à » en bleu clair, le titre en blanc — les deux couleurs que le contexte nuit fournit déjà : --ct-lien-clair n’existe pas, mais bleu-clair est le rôle « lien sur sombre » de la palette, et --ct-titre vaut blanc. */ .ct-cta__pre { font-weight: 300; color: var(--wp--preset--color--bleu-clair); } .ct-cta__titre { font-weight: 800; } .ct-cta__carte { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--70); } /* Justifié comme la maquette ; la césure évite les rivières sur cette mesure. */ .ct-cta__texte { margin: 0 !important; text-align: justify; text-wrap: wrap; hyphens: auto; color: var(--ct-texte); } /* Le second bouton reprend le dessin « outline » du contexte clair. */ /* Le second bouton lit son contexte : bordure et texte suivent le fond, donc il reste juste si la section rebascule en clair un jour. */ .ct-cta__second .wp-block-button__link { background: transparent; border: 2px solid var(--ct-bord); color: var(--ct-titre); box-shadow: none; } .ct-cta__second .wp-block-button__link:hover { background: color-mix(in srgb, var(--ct-titre) 12%, transparent); border-color: var(--ct-titre); color: var(--ct-titre); } @media (max-width: 900px) { .ct-cta__colonnes > :first-child { text-align: left; } } /* ═══════════ 8. Pages intérieures ═══════════ */ .ct-page-hero { padding-block: clamp(2.5rem, 6vw, 4rem); } .ct-page { padding-block: var(--wp--preset--spacing--90); } .ct-page__titre { color: var(--ct-titre); } .ct-ariane { margin: 0 0 var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-ariane a { color: var(--ct-texte-2); text-decoration: none; } .ct-ariane a:hover { color: var(--ct-titre); text-decoration: underline; } /* 8.1 Piliers. */ .ct-piliers { margin-top: var(--wp--preset--spacing--70) !important; } .ct-pilier { padding-block: var(--wp--preset--spacing--30); padding-right: var(--wp--preset--spacing--50); } .ct-pilier > * { margin: 0 !important; } .ct-pilier__titre { margin-bottom: .375rem !important; font-size: var(--wp--preset--font-size--moyen); color: var(--ct-titre); } .ct-pilier__texte { font-size: var(--wp--preset--font-size--texte); color: var(--ct-texte-2); } /* 8.2 Étapes d’un parcours. */ .ct-etapes-detail { display: grid; gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--70) !important; } .ct-etape-detail { display: flex; gap: var(--wp--preset--spacing--50); padding: var(--wp--preset--spacing--60); align-items: flex-start !important; } /* Le numéro occupe une case carrée, en trois plans : le fond l’accent du parcours très atténué (--ct-accent-clair) le disque le même accent à mi-chemin du blanc, décentré, débordant le chiffre quasi blanc, posé dessus, recoupé par le bas Le disque et le chiffre sortent tous deux du carré : c’est overflow: hidden qui les recoupe, et c’est ce débordement qui fait la composition. Sans lui, les deux passeraient sur le texte. Le chiffre n’est pas décoratif — c’est le seul porteur du numéro d’étape, il reste donc dans l’arbre d’accessibilité. */ .ct-etape-detail__case { position: relative; overflow: hidden; flex: none; width: 8.5rem; aspect-ratio: 1; border-radius: var(--ct-r-md); background: var(--ct-accent-clair); } .ct-etape-detail__case::before { content: ""; position: absolute; left: 1.25rem; top: 1.25rem; width: 8.75rem; height: 8.75rem; border-radius: 50%; background: color-mix(in srgb, var(--ct-accent) 45%, #fff); } .ct-etape-detail__geant { position: absolute; right: .65rem; bottom: -1.75rem; font-family: var(--wp--preset--font-family--lexend); font-weight: 800; font-size: 8.5rem; line-height: 1; letter-spacing: -.06em; color: color-mix(in srgb, var(--ct-accent) 8%, #fff); pointer-events: none; user-select: none; } @media (max-width: 600px) { .ct-etape-detail__case { width: 6rem; } .ct-etape-detail__case::before { left: .875rem; top: .875rem; width: 6.25rem; height: 6.25rem; } .ct-etape-detail__geant { font-size: 6rem; right: .45rem; bottom: -1.25rem; } } @media (max-width: 400px) { /* Empilees : cote a cote, la colonne de texte tombait sous 120 px et le titre se coupait au milieu d'un mot. */ .ct-etape-detail { flex-direction: column; } } @media (max-width: 480px) { .ct-etape-detail { gap: var(--wp--preset--spacing--40); padding: var(--wp--preset--spacing--50); } .ct-etape-detail__case { width: 4.75rem; } .ct-etape-detail__case::before { left: .625rem; top: .625rem; width: 5rem; height: 5rem; } .ct-etape-detail__geant { font-size: 4.75rem; right: .35rem; bottom: -1rem; } } /* min-width: 0 — sans lui un element flex refuse de descendre sous la largeur de son mot le plus long. La carte poussait alors la page : +38 px a 390 px, +107 px a 320 px. La cesure prend le relais quand la colonne devient etroite. */ .ct-etape-detail__corps { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .ct-etape-detail__corps > * { margin: 0; } .ct-etape-detail__titre { font-size: var(--wp--preset--font-size--moyen); color: var(--ct-titre); } .ct-etape-detail__texte { font-size: var(--wp--preset--font-size--texte); color: var(--ct-texte); } .ct-etape-detail__meta { margin-top: .625rem !important; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--40); font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } /* 8.3 À propos — faits. */ .ct-faits { margin-top: var(--wp--preset--spacing--70) !important; } .ct-fait { padding: var(--wp--preset--spacing--50); background: var(--ct-surface-2); box-shadow: none; } .ct-fait__titre { font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--texte); color: var(--ct-titre); } .ct-fait__texte { margin-top: .375rem !important; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } /* 8.4 Ce que la démarche est / n’est pas. */ .ct-oui-non { gap: var(--wp--preset--spacing--50); margin-top: var(--wp--preset--spacing--70) !important; } .ct-oui, .ct-non { padding: var(--wp--preset--spacing--60); height: 100%; } .ct-oui { border-top: 4px solid var(--wp--preset--color--vert); } .ct-non { border-top: 4px solid var(--wp--preset--color--framboise); } .ct-oui__titre, .ct-non__titre { margin-bottom: var(--wp--preset--spacing--40) !important; font-size: var(--wp--preset--font-size--moyen); color: var(--ct-titre); } /* 8.5 Questions fréquentes. */ .ct-faq { display: grid; gap: var(--wp--preset--spacing--70); } .ct-faq__groupe > * { margin: 0 !important; } .ct-faq__groupe-titre { margin-bottom: var(--wp--preset--spacing--40) !important; font-size: var(--wp--preset--font-size--grand); } .ct-faq__item { margin-bottom: .625rem !important; padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); box-shadow: none; } .ct-faq__item:hover { border-color: var(--wp--preset--color--bleu); } .ct-faq__item summary { position: relative; list-style: none; padding-right: 2rem; font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--texte); cursor: pointer; color: var(--ct-titre); } .ct-faq__item summary::-webkit-details-marker { display: none; } .ct-faq__item summary::after { content: ""; position: absolute; right: .25rem; top: .4em; width: .55em; height: .55em; border-right: 2px solid var(--wp--preset--color--bleu); border-bottom: 2px solid var(--wp--preset--color--bleu); transform: rotate(45deg); transition: transform var(--ct-duree) var(--ct-courbe); } .ct-faq__item[open] summary::after { transform: rotate(-135deg); } .ct-faq__item[open] summary { margin-bottom: .625rem; } .ct-faq__item p { margin: 0; font-size: var(--wp--preset--font-size--texte); color: var(--ct-texte); } /* 8.6 Page 404. */ .ct-404__code { margin: 0 0 var(--wp--preset--spacing--30); font-family: var(--wp--preset--font-family--lexend); font-weight: 800; font-size: var(--wp--preset--font-size--geant); line-height: 1; letter-spacing: -.03em; color: var(--wp--preset--color--gris-200); } /* 8.7 Sondage — un formulaire, une carte par question (la carte du § 5.1). Les champs lisent leur contexte. Leur bordure prend --ct-texte-2 et non --ct-bord : à 1,3:1, --ct-bord ne délimite pas un champ, et WCAG 1.4.11 demande 3:1 (--ct-texte-2 tient 5,5:1 sur blanc). L’erreur est toujours dite en toutes lettres : la couleur ne la porte jamais seule. */ .ct-sondage__formulaire > * { margin-block: 0; } .ct-sondage__formulaire > * + * { margin-top: var(--wp--preset--spacing--70); } .ct-sondage__consigne { font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-sondage__section > .ct-surtitre { margin-bottom: .25rem !important; } .ct-sondage__titre { margin: 0 0 var(--wp--preset--spacing--50); font-size: var(--wp--preset--font-size--grand); } .ct-question { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); } .ct-question + .ct-question { margin-top: var(--wp--preset--spacing--40); } .ct-question.is-erreur { border-color: var(--ct-erreur); border-left-width: 4px; } .ct-question__groupe { min-width: 0; margin: 0; padding: 0; border: 0; } .ct-question__titre { display: block; padding: 0; font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--texte); line-height: 1.4; color: var(--ct-titre); } .ct-question__num { color: var(--ct-accent-contexte); } .ct-question__requis { color: var(--ct-erreur); } .ct-question__facultatif { font-weight: 400; color: var(--ct-texte-2); } .ct-question__aide { margin: .375rem 0 0; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-question__erreur { margin: .5rem 0 0; font-weight: 700; font-size: var(--wp--preset--font-size--normal); color: var(--ct-erreur); } /* Choix : toute la ligne est cliquable, et au moins 44 px de haut. */ .ct-choix { display: grid; gap: .125rem; margin-top: var(--wp--preset--spacing--30); } .ct-choix__item { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; } .ct-choix__option { flex: 1 1 auto; display: flex; align-items: flex-start; gap: .75rem; box-sizing: border-box; min-height: 2.75rem; margin-inline: -.625rem; padding: .625rem; border-radius: var(--ct-r-sm); font-size: var(--wp--preset--font-size--texte); line-height: 1.4; color: var(--ct-texte); cursor: pointer; transition: background-color var(--ct-duree); } .ct-choix__option:hover { background: var(--ct-surface-2); } .ct-choix__item--autre > .ct-choix__option { flex: none; margin-inline-end: 0; } .ct-choix__option:has(input:disabled) { color: var(--ct-texte-2); cursor: not-allowed; } .ct-choix__option:has(input:disabled):hover { background: transparent; } .ct-choix__option input, .ct-grille__option input { flex: none; width: 1.25rem; height: 1.25rem; margin: .0625rem 0 0; accent-color: var(--ct-lien); cursor: inherit; } .ct-choix__compte { margin: .5rem 0 0; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-choix__compte:empty { margin: 0; } /* Champs de saisie — 17 px : sous 16 px, iOS zoome à la saisie. */ .ct-champ { box-sizing: border-box; display: block; width: 100%; min-height: 2.75rem; margin-top: var(--wp--preset--spacing--30); padding: .625rem .875rem; border: 1px solid var(--ct-texte-2); border-radius: var(--ct-r-sm); background: var(--ct-surface); color: var(--ct-texte); font-family: inherit; font-size: var(--wp--preset--font-size--texte); line-height: 1.5; } .ct-champ:hover { border-color: var(--ct-texte); } .ct-champ[aria-invalid="true"] { border: 2px solid var(--ct-erreur); } select.ct-champ { max-width: 26rem; } textarea.ct-champ { min-height: 8rem; resize: vertical; } .ct-choix__precision { flex: 1 1 12rem; width: auto; margin-top: 0; } /* Grille : le thème à gauche, cinq colonnes d’échelle. Sous 560 px, le thème passe au-dessus et chaque bouton affiche son chiffre. */ .ct-grille__legende { display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; margin: var(--wp--preset--spacing--30) 0 0; padding: 0; list-style: none; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-grille__legende-num { font-family: var(--wp--preset--font-family--lexend); font-weight: 700; color: var(--ct-titre); } .ct-grille { margin-top: var(--wp--preset--spacing--40); } .ct-grille__entete, .ct-grille__ligne { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, 2.75rem); column-gap: .25rem; align-items: center; } .ct-grille__entete { padding-bottom: .5rem; border-bottom: 1px solid var(--ct-bord); font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--petit); text-align: center; color: var(--ct-texte-2); } .ct-grille__ligne { padding-block: .5rem; border-bottom: 1px solid var(--ct-bord); } .ct-grille__theme { margin: 0; padding-right: var(--wp--preset--spacing--40); } .ct-grille__nom { font-weight: 700; color: var(--ct-titre); } .ct-grille__desc { display: block; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-grille__manque { margin-left: .5rem; font-size: var(--wp--preset--font-size--petit); font-weight: 700; color: var(--ct-erreur); } .ct-grille__option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 2.75rem; border-radius: var(--ct-r-sm); cursor: pointer; transition: background-color var(--ct-duree); } .ct-grille__option:hover { background: var(--ct-surface-2); } .ct-grille__option input { margin: 0; } .ct-grille__num { display: none; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--petit); color: var(--ct-texte-2); } @media (max-width: 560px) { .ct-grille__entete { display: none; } .ct-grille__ligne { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: .5rem; padding-block: .875rem; } .ct-grille__theme { grid-column: 1 / -1; padding-right: 0; } .ct-grille__num { display: block; } } @media (max-width: 480px) { .ct-question { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40); } } /* Résumé des erreurs, en tête de formulaire. */ .ct-sondage__erreurs { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); border: 2px solid var(--ct-erreur); border-radius: var(--ct-r-md); background: var(--ct-surface); } .ct-sondage__erreurs-titre { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--moyen); } .ct-sondage__erreurs p { margin: 0 0 var(--wp--preset--spacing--30); } .ct-sondage__erreurs ul { display: grid; gap: .375rem; margin: 0; padding-left: 1.25rem; } .ct-sondage__erreurs a { font-weight: 700; color: var(--ct-erreur); text-underline-offset: 3px; } /* Envoi, confirmation, fermeture. */ .ct-sondage__envoi .wp-block-button__link { cursor: pointer; } .ct-sondage__envoi .wp-block-button__link:disabled { cursor: progress; } .ct-sondage__avis { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); text-align: center; } .ct-sondage__avis--merci { border-top: 4px solid var(--wp--preset--color--vert); } .ct-sondage__avis--ferme { border-top: 4px solid var(--ct-texte-2); } .ct-sondage__avis > * { margin: 0 auto; max-width: 36rem; } .ct-sondage__avis-titre { margin-bottom: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--grand); } .ct-sondage__signature { margin-top: var(--wp--preset--spacing--40); font-family: var(--wp--preset--font-family--lexend); font-weight: 600; font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } /* Piège à robots : hors de l’écran, hors de la tabulation, hors de l’arbre d’accessibilité. Un humain ne le voit ni ne l’entend. */ .ct-sondage__piege { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; } /* ═══════════ 9. Pied de page ═══════════ */ .ct-pied { background: var(--wp--preset--color--nuit-carte); color: var(--ct-texte); padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--50); --ct-titre: var(--wp--preset--color--blanc); --ct-texte: var(--wp--preset--color--clair); --ct-texte-2: #8FA3BD; --ct-bord: var(--wp--preset--color--nuit-bord); --ct-focus: var(--wp--preset--color--bleu-clair); } .ct-pied__colonnes { align-items: start; } .ct-pied__marque > * { margin: 0 0 var(--wp--preset--spacing--40) !important; } .ct-pied__texte { font-size: var(--wp--preset--font-size--normal); color: var(--ct-texte-2); } .ct-pied__titre { margin: 0 0 var(--wp--preset--spacing--40) !important; font-family: var(--wp--preset--font-family--lexend); font-weight: 700; font-size: var(--wp--preset--font-size--petit); letter-spacing: .1em; text-transform: uppercase; color: var(--ct-texte-2); } .ct-pied__liste { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; font-size: var(--wp--preset--font-size--normal); } .ct-pied__liste a, .ct-pied__liens-bas a { color: var(--ct-texte); text-decoration: none; } .ct-pied__liste a:hover, .ct-pied__liens-bas a:hover { color: var(--wp--preset--color--blanc); text-decoration: underline; text-underline-offset: 3px; } /* La ligne légale s’alignait sur le bord de la fenêtre : ses marges latérales étaient forcées à zéro, donc la mise en page « constrained » du cœur ne la centrait plus. Elle reprend le calage de ct-lede--clair : bord gauche sur l’enveloppe, mesure de lecture conservée à 62 rem. */ .ct-pied__legal { max-width: 62rem; margin-block: var(--wp--preset--spacing--70) 0 !important; margin-inline: max(0px, (100% - var(--ct-enveloppe)) / 2) auto !important; font-size: var(--wp--preset--font-size--petit); line-height: 1.6; color: var(--ct-texte-2); } .ct-pied__bas { margin-top: var(--wp--preset--spacing--50) !important; padding-top: var(--wp--preset--spacing--40); border-top: 1px solid var(--ct-bord); gap: var(--wp--preset--spacing--40); } .ct-pied__copyright, .ct-pied__liens-bas { margin: 0 !important; font-size: var(--wp--preset--font-size--petit); color: var(--ct-texte-2); } .ct-pied__liens-bas a { margin-left: var(--wp--preset--spacing--50); } @media (max-width: 600px) { .ct-pied__liens-bas a { display: block; margin: .375rem 0 0; } } /* ═══════════ 10. Mouvement réduit ═══════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } .wp-block-button__link:hover, .ct-profil:hover, .ct-parcours-carte:hover, .ct-compteur:hover, .ct-temo:hover { transform: none !important; } .wp-block-button__link:active { transform: none !important; } /* L’entrée du héros : le * ci-dessus coupe déjà l’animation, donc son remplissage « both » ne s’applique plus et les blocs reviennent à leur état normal. On le réaffirme quand même : un contenu invisible serait la pire des régressions. */ /* L’avance automatique de la scène est un mouvement imposé : le script la désactive de lui-même, il n’y a rien à neutraliser ici. */ /* Le fondu des fonds devient une bascule nette. */ .ct-scene__fond, .ct-carte-espace__etat { transition: none !important; } } /* ═══════════ 11. Tracés d’icônes ═══════════ */ /* Chaque tracé n’est écrit qu’une fois ; le masque est appliqué au § 5.5. */ :root { --ct-i-work: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='7'%20width='18'%20height='13'%20rx='2'/%3E%3Cpath%20d='M9%207V5a2%202%200%200%201%202-2h2a2%202%200%200%201%202%202v2'/%3E%3Cpath%20d='M3%2013h18'/%3E%3C/svg%3E"); --ct-i-globe: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M3%2012h18'/%3E%3Cpath%20d='M12%203a14%2014%200%200%201%200%2018a14%2014%200%200%201%200-18z'/%3E%3C/svg%3E"); --ct-i-sign: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203v18'/%3E%3Cpath%20d='M5%206h11l3%203-3%203H5z'/%3E%3Cpath%20d='M9%2021h6'/%3E%3C/svg%3E"); --ct-i-users: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M2.5%2020a6.5%206.5%200%200%201%2013%200'/%3E%3Cpath%20d='M16%204.6a3.5%203.5%200%200%201%200%206.8'/%3E%3Cpath%20d='M18%2014a6.5%206.5%200%200%201%203.5%206'/%3E%3C/svg%3E"); --ct-i-file: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M14%203H7a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h10a2%202%200%200%200%202-2V8z'/%3E%3Cpath%20d='M14%203v5h5'/%3E%3Cpath%20d='M9%2013h6M9%2017h6'/%3E%3C/svg%3E"); --ct-i-trend: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2017l6-6%204%204%208-8'/%3E%3Cpath%20d='M15%207h6v6'/%3E%3C/svg%3E"); --ct-i-cart: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='9'%20cy='20'%20r='1.5'/%3E%3Ccircle%20cx='18'%20cy='20'%20r='1.5'/%3E%3Cpath%20d='M2%203h3l2.5%2012h12l2-8H6'/%3E%3C/svg%3E"); --ct-i-calendar: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3C/svg%3E"); --ct-i-target: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='5'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1'/%3E%3C/svg%3E"); --ct-i-message: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012a8%208%200%200%201-11.6%207.1L4%2020l1-4.6A8%208%200%201%201%2021%2012z'/%3E%3C/svg%3E"); --ct-i-save: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%203h11l3%203v13a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z'/%3E%3Cpath%20d='M8%203v5h7V3'/%3E%3Crect%20x='7'%20y='13'%20width='10'%20height='6'%20rx='1'/%3E%3C/svg%3E"); --ct-i-book: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205a2%202%200%200%201%202-2h13v16H6a2%202%200%200%200-2%202z'/%3E%3Cpath%20d='M4%2019V5'/%3E%3Cpath%20d='M9%207h6'/%3E%3C/svg%3E"); --ct-i-coche: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M8%2012.5l2.5%202.5L16%209.5'/%3E%3C/svg%3E"); --ct-i-croix: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M15%209l-6%206M9%209l6%206'/%3E%3C/svg%3E"); --ct-i-info: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%2011v5'/%3E%3Cpath%20d='M12%207.5h.01'/%3E%3C/svg%3E"); /* Quatre tracés de Tabler Icons (MIT) — même grammaire que les autres : 24×24, stroke 2, extrémités arrondies. Ils ne servent qu’à la scène. */ --ct-i-target-arrow: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M11%2012a1%201%200%201%200%202%200a1%201%200%200%201%20-2%200'%20/%3E%3Cpath%20d='M12%207a5%205%200%201%200%205%205'%20/%3E%3Cpath%20d='M13%203.055a9%209%200%201%200%207.941%207.945'%20/%3E%3Cpath%20d='M15%206v3h3l3%20-3h-3v-3z'%20/%3E%3Cpath%20d='M15%209l-3%203'%20/%3E%3C/svg%3E"); --ct-i-stack-check: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%204l-8%204l8%204l8%20-4l-8%20-4'%20/%3E%3Cpath%20d='M4%2012l8%204l2.5%20-1.25'%20/%3E%3Cpath%20d='M4%2016l8%204l1%20-.5'%20/%3E%3Cpath%20d='M15%2019l2%202l4%20-4'%20/%3E%3C/svg%3E"); --ct-i-send: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M10%2014l11%20-11'%20/%3E%3Cpath%20d='M21%203l-6.5%2018a.55%20.55%200%200%201%20-1%200l-3.5%20-7l-7%20-3.5a.55%20.55%200%200%201%200%20-1l18%20-6.5'%20/%3E%3C/svg%3E"); --ct-i-certificate: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M15%2015m-3%200a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200'%20/%3E%3Cpath%20d='M13%2017.5v4.5l2%20-1.5l2%201.5v-4.5'%20/%3E%3Cpath%20d='M10%2019h-5a2%202%200%200%201%20-2%20-2v-10c0%20-1.1%20.9%20-2%202%20-2h14a2%202%200%200%201%202%202v10a2%202%200%200%201%20-1%201.73'%20/%3E%3Cpath%20d='M6%209l12%200'%20/%3E%3Cpath%20d='M6%2012l3%200'%20/%3E%3Cpath%20d='M6%2015l2%200'%20/%3E%3C/svg%3E"); --ct-i-route: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2019m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200'%20/%3E%3Cpath%20d='M19%205m-2%200a2%202%200%201%200%204%200a2%202%200%201%200%20-4%200'%20/%3E%3Cpath%20d='M11%2019h5.5a3.5%203.5%200%200%200%200%20-7h-8a3.5%203.5%200%200%201%200%20-7h4.5'%20/%3E%3C/svg%3E"); --ct-i-presentation: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%204l18%200'%20/%3E%3Cpath%20d='M4%204v10a1%201%200%200%200%201%201h14a1%201%200%200%200%201%20-1v-10'%20/%3E%3Cpath%20d='M12%2015v4'%20/%3E%3Cpath%20d='M9%2019l6%200'%20/%3E%3Cpath%20d='M8%2011l2%20-2l2%202l3%20-3'%20/%3E%3C/svg%3E"); --ct-i-tel: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%204h4l2%205-2.5%201.5a11%2011%200%200%200%205%205L15%2013l5%202v4a2%202%200%200%201-2%202A16%2016%200%200%201%203%206a2%202%200%200%201%202-2z'/%3E%3C/svg%3E"); } .ct-ico--work { --ct-i: var(--ct-i-work); } .ct-ico--globe { --ct-i: var(--ct-i-globe); } .ct-ico--sign { --ct-i: var(--ct-i-sign); } .ct-ico--users { --ct-i: var(--ct-i-users); } .ct-ico--file { --ct-i: var(--ct-i-file); } .ct-ico--trend { --ct-i: var(--ct-i-trend); } .ct-ico--cart { --ct-i: var(--ct-i-cart); } .ct-ico--calendar { --ct-i: var(--ct-i-calendar); } .ct-ico--target { --ct-i: var(--ct-i-target); } .ct-ico--message { --ct-i: var(--ct-i-message); } .ct-ico--save { --ct-i: var(--ct-i-save); } .ct-ico--book { --ct-i: var(--ct-i-book); } .ct-ico--send { --ct-i: var(--ct-i-send); } .ct-ico--certificate { --ct-i: var(--ct-i-certificate); } .ct-ico--route { --ct-i: var(--ct-i-route); } .ct-ico--presentation { --ct-i: var(--ct-i-presentation); } .ct-ico--stack-check { --ct-i: var(--ct-i-stack-check); } .ct-ico--target-arrow { --ct-i: var(--ct-i-target-arrow); }