/* ============================================================ grammaire.css — la grammaire visuelle commune au site public et à l'application (2 octobre 2026). Source UNIQUE des primitives : chaque règle partagée est écrite sous deux sélecteurs, .site-x pour la vitrine (dont le balisage ne change pas) et .g-x pour l'application. Jetons : tokens2.css, plus les --site-* ci-dessous (déplacés depuis site.css). Chargée par layout_site.php (avant site.css) et par layout.php (après ui.css, avant motion.css). Dans l'application, seules les vues réécrites emploient .g-* ; rien de global ne change. Voir docs/ui-interieur-cadrage-2026-10-02.md. Règle du thème de cohorte : --orange n'est posé que sur des titres ou des aplats, jamais sur du petit texte (le thème réécrit --orange-fonce, qui reste la couleur des actions et des liens). ============================================================ */ :root { --site-kicker: #B04A18; --site-texte-3: #736861 /* même correction que --texte-3 : 3,69:1 sur la crème de la vitrine → 4,85 */; --site-bord: #EEE7DC; --site-filet: #F1EAE0; --site-champ-fond: #F6F1EA; --site-champ-bord: #ECE4D9; --site-carte-fond: #FEFCF8; --site-alerte-bord: #F6E3C6; --site-alerte-texte: #7A4B00; --site-ombre-carte: 0 10px 26px -18px rgba(79,50,49,.30); --site-ombre-elevee: 0 24px 60px -24px rgba(79,50,49,.30), 0 0 0 1px rgba(79,50,49,.07); --site-ombre-bouton: 0 8px 20px -8px rgba(247,90,0,.55); } /* ---- 1 · Primitives partagées (déplacées de site.css, à l'identique, dans le même ordre) ---- */ .site-btn, .g-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--orange-fonce); color: #fff; font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--site-ombre-bouton); transition: filter .12s ease, background .12s ease; } .site-btn:hover, .g-btn:hover { color: #fff; filter: brightness(1.06); } .site-btn--2, .g-btn--2 { background: var(--sable); color: var(--encre); box-shadow: none; padding: 0 22px; } .site-btn--2:hover, .g-btn--2:hover { color: var(--encre); background: #ECE3D5; filter: none; } .site-btn--large, .g-btn--large { width: 100%; } .site-actions, .g-actions { display: flex; flex-wrap: wrap; gap: 10px; } .site-actions--centre, .g-actions--centre { justify-content: center; } .site-kicker, .g-kicker { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--site-kicker); } .site-accent, .g-accent { color: var(--orange); } .site-sous, .g-sous { margin: 0; font-size: 20px; line-height: 1.45; color: var(--texte-2); text-wrap: pretty; } .site-texte, .g-texte { margin: 0; font-size: 17px; line-height: 1.6; text-wrap: pretty; } .site-texte strong, .g-texte strong { color: var(--encre); } .site-carte, .g-carte { position: relative; max-width: 470px; display: flex; flex-direction: column; gap: 16px; padding: 30px 32px; border-radius: 20px; background: rgba(255,255,255,.86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } .site-carte--large, .g-carte--large { max-width: 560px; } .site-chips, .g-chips { display: flex; flex-wrap: wrap; gap: 8px; } .site-chip, .g-chip { padding: 6px 12px; border-radius: 20px; background: var(--orange-clair); color: var(--orange-fonce); font-size: 13px; font-weight: 700; } .site-trait, .g-trait { margin: 0; font-size: 13px; font-weight: 700; color: var(--site-texte-3); } .site-av2d, .g-av2d { position: absolute; top: 50%; transform: translateY(-50%); width: clamp(220px, 30vw, 420px); pointer-events: none; transition: opacity .22s ease; } .site-av2d--droite, .g-av2d--droite { right: clamp(20px, 6vw, 96px); } .site-av2d--gauche, .g-av2d--gauche { left: clamp(20px, 6vw, 96px); } .site-av2d-med, .g-av2d-med { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: 50%; background: var(--sable); padding: 0; } .site-av2d-med svg, .g-av2d-med svg { width: 78%; height: auto; display: block; } .site-av2d--rangee, .g-av2d--rangee { position: static; transform: none; width: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .site-av2d--rangee .site-av2d-med, .g-av2d--rangee .g-av2d-med { width: clamp(72px, 26vh, 250px); } .site-av2d--centre, .g-av2d--centre { position: static; transform: none; margin: 0 auto 18px; width: min(46vw, 220px); } .site-av2d--pile, .g-av2d--pile { position: relative; top: auto; transform: none; width: min(100%, 440px); height: min(52vh, 440px); margin: 0 0 12px; } .site-av2d--pile .site-av2d-med, .g-av2d--pile .g-av2d-med { position: absolute; inset: 0; margin: auto; width: min(100%, 400px); height: min(100%, 400px); opacity: 0; animation: site-pile 20s linear infinite; animation-delay: calc(var(--i, 0) * 4s - .8s); } @keyframes site-pile { 0% { opacity: 0; } 4% { opacity: 1; } 20% { opacity: 1; } 24% { opacity: 0; } 100% { opacity: 0; } } html.site-3d-on .site-av2d, html.g-3d-on .g-av2d { opacity: 0; } .site-seg, .g-seg { display: flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sable); } .site-seg a, .g-seg a { flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 9px; font-size: 14px; font-weight: 700; color: var(--site-texte-3); } .site-seg a:hover, .g-seg a:hover { color: var(--encre); } .site-seg a[aria-current="page"], .g-seg a[aria-current="page"] { background: #fff; color: var(--encre); box-shadow: 0 1px 3px rgba(79,50,49,.12); } .site-grille, .g-grille { display: grid; gap: 14px; } .site-grille--4, .g-grille--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .site-grille--3, .g-grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); } .site-tuile, .g-tuile { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--site-carte-fond); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); color: var(--texte-2); transition: border-color .12s ease, transform .22s var(--ease, ease); } .site-tuile:hover, .g-tuile:hover { border-color: var(--orange); color: var(--texte-2); transform: translateY(-2px); } .site-tuile-titre, .g-tuile-titre { font-weight: 900; color: var(--encre); font-size: 16px; line-height: 1.3; } .site-tuile-texte, .g-tuile-texte { font-size: 13.5px; line-height: 1.5; flex: 1; } .site-tuile-lien, .g-tuile-lien { font-size: 13px; font-weight: 700; color: var(--orange-fonce); margin-top: 4px; } /* ============================================================ 2 · APPLICATION — la grammaire posée sur les écrans réécrits (accueil, Rédiger). Préfixe .g-. Les jetons viennent de tokens2.css (thème de cohorte compris) ; --site-* pour les ombres et bords. ============================================================ */ /* ---- En-tête de page : kicker, titre 900, une phrase, le compagnon en médaillon ---- */ .g-tete { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px 32px; margin: 0 0 var(--sp-6); } .g-tete-texte { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .g-tete h1, .g-h1 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 900; line-height: 1.05; letter-spacing: -.025em; color: var(--encre); text-wrap: balance; } .g-tete .g-kicker { margin: 0; } .g-lead { margin: 4px 0 0; font-size: 16px; line-height: 1.5; color: var(--texte-2); text-wrap: pretty; max-width: 640px; } .g-tete--centre { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 14px; } .g-tete--centre .g-tete-texte { align-items: center; } .g-tete--centre .g-lead { max-width: 560px; } /* ---- Le compagnon de la personne en médaillon : disque sable, SVG à sa couleur. .c-avatar en plus : avatar.js y pose data-etat (repos · ecoute · pense · parle), motion.css anime. ---- */ .g-med { width: 120px; height: 120px; border-radius: 50%; background: var(--sable); display: inline-flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .g-med > svg, .g-med > img { width: 74%; height: auto; display: block; border-radius: 0; } .g-med--petit { width: 72px; height: 72px; } .g-med--mini { width: 44px; height: 44px; } .c-avatar.g-med { background: var(--sable); } .g-tete--centre .g-med { width: 136px; height: 136px; } /* ---- Sections ---- */ .g-section { margin-top: var(--sp-8); } .g-section-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 var(--sp-4); } .g-section-tete h2 { margin: 0; font-size: 22px; font-weight: 900; letter-spacing: -.015em; color: var(--encre); line-height: 1.15; } .g-section-tete .g-kicker { margin: 0 0 4px; } /* ---- Tuile avec pictogramme (raccourcis de l'accueil) ---- */ .g-tuile-ico { display: inline-flex; width: 40px; height: 40px; border-radius: 12px; background: var(--orange-clair); color: var(--orange-fonce); align-items: center; justify-content: center; margin-bottom: 6px; } .g-tuile-ico svg { width: 20px; height: 20px; } .g-tuile--compact { padding: 16px 18px; gap: 4px; } /* ---- Attente en place (jamais de voile plein écran) : les points de motion.css + un mot ---- */ .g-attente { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; color: var(--texte-2); } /* ============================================================ 2a · ACCUEIL connecté ============================================================ */ .g-accueil .g-tete { margin-bottom: var(--sp-4); } .g-point { max-width: 100%; width: 100%; align-self: stretch; gap: 8px; padding: 24px 28px; border-radius: 20px 20px 20px 6px; } .g-point .g-kicker { margin: 6px 0 0; } .g-point .g-kicker:first-child { margin-top: 0; } .g-point-ligne { margin: 0; color: var(--texte-2); font-size: 15.5px; line-height: 1.5; } .g-point-ligne strong { color: var(--encre); } .g-point .acc-jauge { margin: 4px 0 2px; } .g-point-question { margin: 10px 0 0; font-size: 18px; font-weight: 900; color: var(--encre); letter-spacing: -.01em; } .g-point-actions { margin-top: 10px; align-items: center; } .g-raccourcis .g-grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } @media (max-width: 640px) { .g-point { padding: 20px 18px; } } /* ============================================================ 2b · RÉDIGER (atelier CŒUR) ============================================================ */ .g-rediger .g-tete { margin-bottom: var(--sp-4); } .g-aide { margin: 0 0 var(--sp-5); } .g-aide > summary { color: var(--muted); } .g-aide > summary::after { content: "▸"; margin-left: 8px; display: inline-block; transition: transform .18s; } .g-aide[open] > summary::after { transform: rotate(90deg); } .g-aide .ccm-cols { margin-top: 8px; } /* Les deux étapes : un segmenté (la base .tab-bar de ui.css est reprise propriété par propriété). */ .tab-bar.g-onglets { display: inline-flex; gap: 2px; padding: 4px; border-radius: 12px; background: var(--sable); margin: 0 0 var(--sp-5); } .g-onglets label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 9px; background: none; box-shadow: none; font-size: 14px; font-weight: 700; color: var(--site-texte-3); cursor: pointer; } .g-onglets label:hover { color: var(--encre); } .g-onglets label.verrouille { opacity: .45; cursor: not-allowed; } .g-onglets .et-num { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--carte); color: var(--encre); font-size: 12px; font-weight: 900; align-items: center; justify-content: center; } #onglet-rediger:checked ~ .g-onglets label[for=onglet-rediger], #onglet-comparer:checked ~ .g-onglets label[for=onglet-comparer] { background: var(--carte); color: var(--encre); box-shadow: 0 1px 3px rgba(79,50,49,.12); } #onglet-rediger:checked ~ .g-onglets label[for=onglet-rediger] .et-num, #onglet-comparer:checked ~ .g-onglets label[for=onglet-comparer] .et-num { background: var(--orange-fonce); color: #fff; } /* Mode rapide : une phrase, le compagnon structure. */ .g-rapide { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; margin: 0 0 var(--sp-4); border-radius: 16px; background: var(--creme); border: 1px solid var(--site-bord); } .g-rapide > label { margin: 0; font-size: 15px; } .g-rapide-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .g-rapide-ligne .audio-wrap, .g-rapide-ligne > input { flex: 1 1 320px; min-width: 0; } .g-rapide-ligne .audio-wrap input { width: 100%; padding-right: 2.75rem; } .g-rapide .conv-statut { margin: 0; } /* Une brique CŒUR = une carte : lettre, nom, une ligne, le champ qui grandit avec le texte. */ .coeur-form.g-briques { padding: 0; background: none; box-shadow: none; display: flex; flex-direction: column; gap: 12px; } .g-brique { position: relative; padding: 18px 20px 16px; border-radius: 16px; background: var(--carte); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); transition: border-color .12s ease; } .g-brique:focus-within { border-color: var(--orange); } .g-brique > label { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; font-size: 16px; font-weight: 900; color: var(--encre); } .g-brique .lettre { display: inline-flex; width: 28px; height: 28px; border-radius: 8px; background: var(--orange-fonce); color: #fff; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; flex-shrink: 0; } .g-brique .aide-brique { margin: 0 0 10px; font-size: 14px; color: var(--texte-2); } .g-brique textarea { min-height: 76px; resize: none; overflow: hidden; line-height: 1.5; } .g-brique .champ-integre { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--site-filet); } .g-brique .champ-integre label { margin: 0 0 6px; font-size: 13px; } .g-brique .champ-integre .aide-contexte { margin: 6px 0 0; font-size: 12.5px; } .g-brique .suggestion { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--alerte-fond); border: 1px solid var(--site-alerte-bord); font-size: 14px; color: var(--encre); } .g-brique .suggestion .appliquer { display: block; margin: 6px 0 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--orange-fonce); text-decoration: underline; cursor: pointer; } .g-briques .erreurs { margin: 0; } .g-briques .g-actions { margin-top: 4px; } /* Colonne de droite : score, retour, aperçu replié, sauvegarde. */ .coeur-panneau.g-panneau { gap: 12px; } .g-score { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 16px; background: var(--sable); color: var(--encre); } .g-score .humeur { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--carte); display: flex; align-items: center; justify-content: center; box-shadow: var(--site-ombre-carte); } .g-score .humeur svg { display: block; } .g-score .gros { font-size: 34px; font-weight: 900; line-height: 1; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; } .g-score .gros small { font-size: 14px; font-weight: 700; color: var(--muted); margin-left: 2px; } .g-score .bandeau-txt { min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--texte-2); } .g-score .bandeau-txt strong { color: var(--encre); } .g-score.humeur-triste { background: var(--erreur-fond); } .g-score.humeur-triste .gros { color: var(--erreur); } .g-score.humeur-neutre { background: var(--alerte-fond); } .g-score.humeur-neutre .gros { color: var(--site-alerte-texte); } .g-score.humeur-heureux { background: var(--succes-fond); } .g-score.humeur-heureux .gros { color: var(--succes); } @keyframes gScore { 0% { transform: scale(.97); } 45% { transform: scale(1.015); } 100% { transform: scale(1); } } .g-score.anim-score { animation: gScore .55s ease; } .g-notes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .g-notes .note { background: var(--carte); border: 1px solid var(--site-bord); border-radius: 12px; padding: 10px 6px; text-align: center; } .g-notes .note .pilier { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--site-texte-3); } .g-notes .note b { display: block; font-size: 22px; font-weight: 900; color: var(--encre); line-height: 1.1; } .g-notes .note small { font-size: 11px; } .g-retour { padding: 16px 18px; border-radius: 16px; background: var(--carte); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } .g-retour p { margin: 0 0 8px; font-size: 14.5px; line-height: 1.5; } .g-retour p strong { color: var(--encre); } .g-retour .cameleon { margin: 10px 0 0; padding: 12px 14px; border-radius: 12px 12px 12px 4px; background: var(--creme); color: var(--encre); font-style: italic; } .g-retour .cameleon:empty { display: none; } .g-retour .audio-lire { margin-top: 6px; } .g-apercu { border-radius: 16px; background: var(--carte); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } .g-apercu > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; font-weight: 800; color: var(--encre); font-size: 14.5px; } .g-apercu > summary::-webkit-details-marker { display: none; } .g-apercu > summary .chev { margin-left: auto; color: var(--muted); transition: transform .18s ease; } .g-apercu[open] > summary .chev { transform: rotate(90deg); } .g-apercu-corps { padding: 0 18px 16px; } .g-apercu pre { margin: 0; font-family: inherit; white-space: pre-wrap; font-size: 13px; line-height: 1.5; background: var(--creme); border-radius: 12px; padding: 12px 14px; max-height: 320px; overflow: auto; } .g-apercu-actions { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; } .g-apercu-actions label { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--texte-2); cursor: pointer; } .g-sauver { padding: 16px 18px; border-radius: 16px; background: var(--carte); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } .g-sauver label { margin: 0 0 8px; font-size: 14px; } .g-sauver-ligne { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .g-sauver-ligne input { flex: 1 1 180px; min-width: 0; } .g-sauver .g-ok { font-size: 13.5px; font-weight: 700; color: var(--succes); } .g-sauver .g-erreur { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; color: var(--erreur); } .g-sauver .g-partage { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--site-filet); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .g-sauver .g-partage .muted { font-size: 12.5px; margin: 0; } .g-lien { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--orange-fonce); text-decoration: none; cursor: pointer; } .g-lien:hover { color: var(--encre); } .g-lien svg { width: 16px; height: 16px; } /* Étape 2 : la comparaison se lance sur un bouton, jamais sur un clic d'onglet. */ .g-comparer { max-width: none; margin-bottom: var(--sp-4); } .g-comparer h2 { margin: 0; font-size: 22px; font-weight: 900; color: var(--encre); letter-spacing: -.015em; } .g-comparer p { margin: 0; } #comparaison { display: flex; flex-direction: column; gap: 14px; } .compagnon-conseil { display: flex; gap: 14px; align-items: flex-start; background: var(--creme); border: 1px solid var(--site-bord); border-radius: 16px; padding: 16px 18px; } .cc-avatar { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; background: var(--sable); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; } .cc-corps { min-width: 0; } .cc-nom { display: block; color: var(--encre); font-weight: 900; } .cc-reco { margin: 6px 0 2px; display: inline-flex; align-items: center; gap: 4px; background: var(--carte); border: 1px solid var(--orange); border-radius: 99px; padding: 4px 12px; font-size: 13.5px; color: var(--encre); } .cc-reco-nom { color: var(--orange-fonce); } .cc-texte { margin: 6px 0 8px; } .cc-lien { text-decoration: none; } .avis-blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .avis-bloc { background: var(--carte); border: 1px solid var(--site-bord); border-radius: 14px; padding: 12px 16px; } .ab-par { color: var(--orange-fonce); font-size: 14px; } .ab-txt { margin: 4px 0 0; font-style: italic; color: var(--encre); font-size: 13.5px; line-height: 1.5; } .apercu-titre { margin: 6px 0 -4px; font-size: 16px; font-weight: 900; color: var(--encre); } .ia-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; } .ia-carte { border: 1px solid var(--site-bord); border-radius: 16px; padding: 16px; background: var(--carte); box-shadow: var(--site-ombre-carte); display: flex; flex-direction: column; } .ia-carte.reco { border: 1.5px solid var(--orange); } .ia-tete { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } .ia-nom { font-weight: 900; font-size: 15px; color: var(--encre); } .ia-carte .badge { background: var(--orange-fonce); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; } .ia-rep { white-space: pre-wrap; font-size: 13px; line-height: 1.5; background: var(--creme); border-radius: 12px; padding: 10px 12px; max-height: 320px; overflow: auto; flex: 1; } .ia-rep.muted { background: none; } .ia-pied { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .ia-carte .continuer { background: none; border: 1px solid var(--orange-fonce); color: var(--orange-fonce); padding: 8px 14px; border-radius: 10px; cursor: pointer; margin: 0; font: inherit; font-size: 13.5px; font-weight: 700; box-shadow: none; } .ia-carte .continuer:hover { background: var(--orange-fonce); color: #fff; } .ia-copier { background: none; border: 1px solid var(--site-champ-bord); color: var(--encre); padding: 8px 12px; border-radius: 10px; cursor: pointer; margin: 0; font: inherit; font-size: 13px; font-weight: 700; box-shadow: none; } .ia-copier:hover { border-color: var(--orange); } .ia-copie-ok { font-size: 13px; } /* ---- Corrections vues à la capture du 3 octobre 2026 ---- */ /* Un display posé par une classe bat l'attribut hidden : on le rend explicite pour les blocs de la grammaire. */ .g-score[hidden], .g-notes[hidden], .g-retour[hidden], .g-attente[hidden], .g-partage[hidden], .g-ok[hidden], .g-erreur[hidden], .g-aide[hidden], .g-sauver[hidden], .g-tuile[hidden] { display: none; } /* Les tuiles sont des liens : l'application souligne ses liens, pas la grammaire. */ .g-tuile, .g-tuile:hover, .g-btn, .g-btn:hover, .g-lien { text-decoration: none; } /* Le compagnon remplit mieux son disque (le dessin laisse de la marge dans sa boîte). */ .g-med > svg { width: 84%; } /* Neuf raccourcis : trois colonnes pleines plutôt que quatre et un orphelin. */ .g-raccourcis .g-grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } /* Les onglets de Rédiger : legacy.css les dessinait en colonne avec un trait de liaison ; on reprend la main. */ .tab-bar.g-onglets label { flex: 0 0 auto; flex-direction: row; position: static; white-space: nowrap; } .tab-bar.g-onglets label::before, .tab-bar.g-onglets label::after { display: none; content: none; } .tab-bar.g-onglets label .et-num { width: 22px; height: 22px; background: var(--carte); color: var(--encre); font-size: 12px; } .tab-bar.g-onglets label:not(.verrouille):hover { color: var(--encre); } .tab-bar.g-onglets label:not(.verrouille):hover .et-num { background: var(--carte); color: var(--encre); } /* Avant le premier retour : la colonne de droite dit ce qui va s'y passer. */ .g-retour--vide { display: flex; gap: 12px; align-items: flex-start; background: var(--creme); border-style: dashed; box-shadow: none; } .g-retour--vide p { margin: 0; color: var(--texte-2); } .g-retour--vide .g-med--mini { background: var(--carte); } .g-retour--vide .g-med--mini > svg { width: 80%; } @media (max-width: 640px) { .g-tete { gap: 12px 16px; } .g-tete .g-med { width: 88px; height: 88px; } .g-tete--centre .g-med { width: 112px; height: 112px; } .g-tete h1, .g-h1 { font-size: 26px; } } /* legacy.css habille tout
hors topbar (dégradé pêche, filet, marges) : l'en-tête de page de la grammaire s'en défait. */ header.g-tete { background: none; border: 0; box-shadow: none; padding: 0; border-radius: 0; } .g-btn[hidden], .g-btn--2[hidden], .g-lien[hidden], .g-actions[hidden] { display: none; } /* ---- Le compagnon en 3D dans son médaillon (app-avatar3d.js) : le canvas est rogné au disque, le SVG s'efface dessous ---- */ .g-med-3d { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; pointer-events: none; } .g-med-3d canvas { display: block; width: 100% !important; height: 100% !important; } .g-med > svg { transition: opacity .22s ease; } .g-med--3d > svg { opacity: 0; } /* ═══════════════════════════════════════════════════════════════════════════ SOCLE — les primitives héritées adoptent la matière du site (4 octobre 2026) grammaire.css est chargée APRÈS ui.css et legacy.css (layout.php:404) : à spécificité égale, la dernière règle gagne. Ces quelques lignes changent donc le ton de 99 vues sans qu'aucune vue soit modifiée. Ce qu'on partage ici, ce sont les JETONS de surface, pas les règles. .g-carte est la carte FLOTTANTE de la vitrine (translucide, 470 px, en colonne, posée sur un fond animé) ; .carte est la carte de CONTENU de l'application, dans une grille. Deux composants distincts, une même matière : même rayon, même bord, même ombre. Les aliaser l'une sur l'autre casserait les 48 grilles de l'app. ═══════════════════════════════════════════════════════════════════════════ */ /* La carte de contenu — 330 occurrences dans 99 vues, la primitive la plus posée. Pas de translucidité ici : --fond (#FDFBF7) et --carte (#FFFFFF) ne diffèrent que de deux points, la carte ne se détache que par son bord et son ombre. Et un backdrop-filter sur 330 cartes, ce serait une couche de composition par carte, pour aucun gain : le fond de l'application est plat. Le bord est l'apport principal — ui.css:1015 l'avait retiré, on le rend. */ .carte, .tableau-enveloppe { border-radius: 20px; background: var(--site-carte-fond); border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } .carte { padding: 24px 26px; } /* La famille de boutons. ui.css les a déjà unifiés (inline-flex, 40 ou 44 px) ; la grammaire les porte à 48 px et au rayon 12. Par ordre d'usage réel : .btn-2 (123 poses, 36 vues), .bouton-plein (44), .btn (29). .bouton-mini et .bouton-mini-clair restent à 40 px : ce sont des boutons délibérément petits, les porter à 48 les dénaturerait — et ils gardent leurs 44 px de cible tactile par le padding. */ .btn, button.btn, .btn-2, button.btn-2, .bouton-plein, button.bouton-plein { min-height: 48px; border-radius: 12px; } /* Le sur-titre. .pilier (legacy.css:143) EST déjà le kicker de la grammaire : même teinte (#B04A18), même graisse, mêmes majuscules, même interlettrage. Seule la taille diffère. Il porte l'orange que le h1 abandonne — et il est présent devant 47 des titres de l'application. */ .pilier { font-size: 12px; } /* Le pliable — 12 poses, 7 vues. .volet est structurellement le jumeau de .g-apercu (même motif summary, même chevron) ; seule la matière différait. On aligne la matière, PAS la géométrie : son summary garde ses 52 px. Le porter aux 48 px de .g-apercu déplacerait douze pliables sans rien gagner. */ .volet { border: 1px solid var(--site-bord); box-shadow: var(--site-ombre-carte); } /* Un bouton posé sur un lien ne doit pas être souligné. .bouton-mini le neutralise (legacy.css:165), .bouton-mini-clair ne l'a jamais fait : les douze de huit vues (classement, sécurité, images, vidéos, admin, quelle_ia) s'affichaient soulignés. Même raison pour .btn-2 et .btn, qu'on trouve aussi bien sur un que sur un