/* faf-article.css — article de blog (single post) façon « Le carnet de Marie » (boho). Scopé sous .faf-art. Mêmes tokens que les pages services / le listing. */ .faf-art{ background:var(--paper); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.8; -webkit-font-smoothing:antialiased; display:block; } .faf-art h1,.faf-art h2,.faf-art h3{ margin:0; font-weight:400; color:var(--clay-deep); line-height:1.15; } .faf-art a{ color:inherit; text-decoration:none; } .faf-art .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border-radius:100px; padding:14px 28px; transition:.25s; border:1.5px solid transparent; } .faf-art .btn--primary{ background:var(--teal); color:#fff !important; box-shadow:0 10px 28px -10px rgba(88,172,159,.7); } .faf-art .btn--primary:hover{ background:var(--teal-dark); transform:translateY(-2px); } /* Barre de progression */ #faf-progress{ position:fixed; top:0; left:0; height:3px; width:0; background:linear-gradient(90deg,var(--teal),var(--clay)); z-index:60; transition:width .1s; } /* Hero article */ .faf-art .art-hero{ background:radial-gradient(120% 100% at 82% 0%, var(--nude), var(--sand) 60%, var(--paper)); } .faf-art .art-hero-in{ max-width:var(--wrap); margin:0 auto; padding:24px 26px 0; display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center; } /* Visuel au format paysage (les articles repris de Facebook le sont) : l'arche verticale le recadrait sévèrement et écrasait le sujet. Cadre élargi et aplati. */ .faf-art .art-hero-in--wide{ grid-template-columns:1fr 1.15fr; gap:38px; } .faf-art .bc{ font-size:13px; color:var(--ink-muted); margin-bottom:26px; } .faf-art .bc a:hover{ color:var(--teal); } .faf-art .bc .sep{ margin:0 6px; } .faf-art .art-eyebrow{ font-family:var(--script); font-style:italic; font-weight:500; font-size:27px; color:var(--sienna); line-height:1; margin-bottom:6px; } .faf-art .art-h1{ font-family:var(--display); font-weight:600; font-size:clamp(30px,3.6vw,46px); color:var(--clay-deep); line-height:1.08; margin-bottom:20px; } /* Date et temps de lecture en pastilles, icône teal — même langage que les pages services. */ .faf-art .art-meta{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .faf-art .art-meta-pill{ display:inline-flex; align-items:center; gap:8px; font-family:var(--sans); font-size:13px; color:var(--ink-soft); background:var(--cream); border:1px solid var(--nude-deep); border-radius:100px; padding:7px 15px; } .faf-art .art-meta-pill svg{ width:15px; height:15px; flex:none; fill:none; stroke:var(--teal); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .faf-art .art-tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:40px; } .faf-art .tag{ font-size:12px; color:var(--clay-deep); background:var(--cream); border:1px solid var(--nude-deep); border-radius:100px; padding:5px 13px; text-decoration:none; transition:background .2s, border-color .2s, color .2s; } /* Devenues cliquables : il faut que ça se voie au survol, sinon on ne les essaie pas. */ .faf-art a.tag:hover{ background:var(--sand); border-color:var(--clay); color:var(--clay-deep); } .faf-art a.tag:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; } .faf-art .art-visual{ border-radius:200px 200px 26px 26px; overflow:hidden; border:7px solid #fff; box-shadow:0 40px 84px -44px rgba(120,80,45,.7); aspect-ratio:3/3.5; align-self:end; margin-bottom:-60px; } .faf-art .art-visual--wide{ border-radius:26px; aspect-ratio:6/5; border-width:6px; margin-bottom:-36px; } .faf-art .art-visual img{ width:100%; height:100%; object-fit:cover; display:block; } /* Hero variante Témoignage (citation centrée) */ .faf-art .art-hero--tm{ text-align:center; } .faf-art .tm-hero-in{ max-width:820px; margin:0 auto; padding:44px 26px 66px; } .faf-art .art-hero--tm .bc{ margin-bottom:22px; } .faf-art .tm-mark{ font-family:var(--display); font-weight:600; font-size:120px; line-height:.5; color:var(--gold); opacity:.5; } .faf-art .tm-quote{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(28px,4vw,44px); color:var(--clay-deep); line-height:1.3; margin:8px 0 26px; padding:0; border:none; } /* Témoignage : mêmes pastilles que les articles, centrées sous la citation. */ .faf-art .tm-attr{ justify-content:center; margin-bottom:0; } .faf-art .tm-type{ color:#95633A; font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:12px; } .faf-art .sb-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; } .faf-art .sb-tags .tag{ font-size:11px; color:var(--ink-soft); background:rgba(192,133,90,.14); padding:2px 9px; border-radius:20px; } .faf-art .rel-card .im{ position:relative; } .faf-art .rel-ini{ position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:50px; background:#95633A; color:#fff; font-family:var(--display,Georgia),serif; font-weight:600; font-size:16px; box-shadow:0 6px 16px rgba(0,0,0,.22); } .faf-art .rel-ini--anon{ height:26px; padding:0 12px; font-family:var(--sans),sans-serif; font-size:11px; font-weight:600; letter-spacing:.03em; } .faf-art .tm-attr-sep{ opacity:.45; } /* Corps + sidebar */ .faf-art .art-wrap{ max-width:var(--wrap); margin:0 auto; padding:100px 26px 40px; } .faf-art .art-grid{ display:grid; grid-template-columns:1fr 280px; gap:64px; align-items:start; } /* 16px/1.8 : exactement l'échelle de lecture des pages services (.faf-native-text). */ .faf-art .art-body{ font-size:16px; color:var(--text); line-height:1.8; } .faf-art .art-body>p:first-of-type{ color:var(--ink); } .faf-art .art-body h2{ font-family:var(--display); font-weight:600; font-size:clamp(26px,2.8vw,31px); color:var(--clay-deep); margin:44px 0 14px; scroll-margin-top:112px; } .faf-art .art-body h3{ font-family:var(--sans); font-weight:600; font-size:17px; color:var(--ink); margin:28px 0 8px; } .faf-art .art-body p{ margin:0 0 20px; } /* PAS `var(--ink)` ICI, ET C'EST VOLONTAIRE. nav.css redéfinit `--ink` à #2C2A26 sur `:root`, écrasant le #3E362D de faf-tokens.css — le gras sortait donc en quasi-noir, une couleur que la charte n'emploie nulle part ailleurs. La valeur est écrite en clair le temps que la collision de jetons soit tranchée : deux fichiers ne devraient pas définir le même jeton. */ .faf-art .art-body strong{ color:#3E362D; } /* LES LIENS ÉTAIENT INVISIBLES. Aucune règle ne les visait : ils héritaient de la couleur du texte (#5E5347), sans soulignement. Un lien interne qu'on ne distingue pas du texte n'est pas cliqué, et ne sert donc ni le lecteur ni le maillage. Clay et souligné : reconnaissable sans crier. */ .faf-art .art-body p a, .faf-art .art-body li a{ color:var(--clay-deep,#95633A); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; transition:color .18s ease; } .faf-art .art-body p a:hover, .faf-art .art-body li a:hover{ color:var(--sienna,#C0855A); } .faf-art .art-body ul{ list-style:none; padding:0; margin:20px 0; } .faf-art .art-body li{ position:relative; padding-left:30px; margin-bottom:12px; } .faf-art .art-body li::before{ content:""; position:absolute; left:4px; top:10px; width:11px; height:11px; border-radius:50% 50% 50% 0; transform:rotate(45deg); background:rgba(88,172,159,.12); border:1.5px solid var(--teal); } .faf-art .art-body blockquote{ margin:30px 0; padding:6px 0 6px 28px; border-left:2px solid var(--sienna); font-family:var(--display); font-style:italic; font-size:24px; color:var(--clay-deep); line-height:1.5; } .faf-art .art-body img{ max-width:100%; height:auto; border-radius:18px; margin:12px 0; } /* Sidebar */ .faf-art .sb{ position:sticky; top:112px; display:flex; flex-direction:column; gap:22px; } .faf-art .sb-card{ background:var(--cream); border:1px solid var(--nude-deep); border-radius:20px; padding:24px; } .faf-art .sb-label{ font-family:var(--script); font-style:italic; font-weight:500; font-size:21px; color:var(--sienna); margin-bottom:12px; } .faf-art .toc-list{ display:flex; flex-direction:column; gap:2px; } .faf-art .toc-list a{ font-size:13.5px; color:var(--ink-soft); padding:7px 0 7px 14px; border-left:1.5px solid var(--nude-deep); transition:.15s; } .faf-art .toc-list a:hover,.faf-art .toc-list a.on{ color:var(--clay-deep); border-left-color:var(--teal); } .faf-art .sb-author{ display:flex; gap:14px; align-items:flex-start; } .faf-art .sb-ava{ width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,var(--teal),var(--clay)); color:#fff; font-family:var(--display); font-size:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } .faf-art .sb-ava--anon{ width:auto; height:auto; min-height:0; border-radius:100px; padding:10px 18px; font-family:var(--sans); font-size:14px; font-weight:600; } .faf-art .sb-name{ font-family:var(--display); font-weight:600; font-size:19px; color:var(--clay-deep); } .faf-art .sb-role{ font-size:12.5px; color:var(--teal); font-weight:600; margin-bottom:6px; } .faf-art .sb-bio{ font-size:13px; color:var(--ink-soft); line-height:1.55; } /* Auteur inline + prev/next + CTA */ .faf-art .author-inline{ display:block; background:var(--blush); border:1px solid var(--nude-deep); border-radius:20px; padding:22px 26px; margin:44px 0; } /* Identité sur une ligne (pastille + « L'auteure » + nom · rôle), mission en dessous sur toute la largeur : elle se lit d'un trait au lieu d'être coincée en colonne. */ .faf-art .author-inline .ai-head{ display:flex; gap:16px; align-items:center; } .faf-art .author-inline .ai-id{ min-width:0; } .faf-art .author-inline .ai-label{ font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 3px; } .faf-art .author-inline .sb-name{ margin:0; line-height:1.25; } .faf-art .author-inline .ai-sep{ color:var(--nude-deep); margin:0 8px; } .faf-art .author-inline .sb-role{ display:inline; margin:0; } .faf-art .author-inline .sb-bio{ margin:14px 0 0; width:100%; font-size:14px; line-height:1.65; } @media(max-width:600px){ .faf-art .author-inline .sb-name{ font-size:17px; } .faf-art .author-inline .ai-sep{ display:block; height:0; margin:0; overflow:hidden; } } .faf-art .author-inline .sb-ava{ width:56px; height:56px; font-size:26px; } .faf-art .prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:30px 0; } .faf-art .pn{ background:var(--cream); border:1px solid var(--nude-deep); border-radius:16px; padding:18px 20px; } .faf-art .pn-dir{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--sienna); font-weight:600; margin-bottom:6px; } .faf-art .pn-title{ font-family:var(--display); font-weight:600; font-size:18px; color:var(--clay-deep); line-height:1.2; } .faf-art .pn--right{ text-align:right; } .faf-art .art-cta{ position:relative; overflow:hidden; border-radius:26px; background:linear-gradient(135deg,#6E5A47,#8A6E53); color:#fff; text-align:center; padding:52px 30px; margin:40px 0; } .faf-art .art-cta .ey{ font-family:var(--script); font-style:italic; font-weight:500; font-size:28px; color:#EAD6BE; margin-bottom:6px; } .faf-art .art-cta h3{ font-family:var(--display); font-weight:500; font-size:32px; color:#fff; margin-bottom:12px; } .faf-art .art-cta p{ color:rgba(255,255,255,.85); max-width:46ch; margin:0 auto 24px; } /* Articles liés */ .faf-art .rel{ background:var(--sand); border-top:1px solid var(--line-soft); } .faf-art .rel-in{ max-width:var(--wrap); margin:0 auto; padding:64px 26px; } .faf-art .rel-in h2{ font-family:var(--display); font-weight:500; font-size:32px; color:var(--clay-deep); text-align:center; margin-bottom:36px; } .faf-art .rel-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .faf-art .rel-card{ background:var(--cream); border:1px solid var(--nude-deep); border-radius:20px; overflow:hidden; box-shadow:0 20px 44px -40px rgba(120,80,45,.5); transition:.3s; } .faf-art .rel-card:hover{ transform:translateY(-4px); } .faf-art .rel-card .im{ aspect-ratio:6/5; background-size:cover; background-position:center; } .faf-art .rel-card .bd{ padding:20px 22px 24px; } .faf-art .rel-card .ct{ font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--teal); font-weight:600; margin-bottom:8px; } .faf-art .rel-card h3{ font-family:var(--display); font-weight:600; font-size:20px; color:var(--clay-deep); line-height:1.2; } @media(max-width:900px){ .faf-art .art-grid{ grid-template-columns:1fr; } .faf-art .sb{ position:static; } } @media(max-width:900px){ .faf-art .art-hero-in{ grid-template-columns:1fr; gap:26px; } .faf-art .art-visual{ max-width:320px; margin:0 auto -40px; aspect-ratio:6/5; border-radius:26px; } .faf-art .art-wrap{ padding-top:70px; } } @media(max-width:900px){ .faf-art .rel-grid{ grid-template-columns:1fr; } } @media(max-width:600px){ .faf-art .prevnext{ grid-template-columns:1fr; } } /* Colonne : calendrier de disponibilités compacté. Le shortcode est prévu pour une pleine largeur de page — ici il tient dans ~300px, donc on resserre tout d'un cran et on laisse la légende passer à la ligne. */ .faf-art .sb-avail .faf-avail{ gap:0; margin:0; } .faf-art .sb-avail .faf-avail-month{ flex:1 1 100%; max-width:100%; padding:14px 12px 16px; border:0; box-shadow:none; background:transparent; } .faf-art .sb-avail .faf-avail-h{ font-size:19px; margin-bottom:10px; } .faf-art .sb-avail .faf-avail-wd{ font-size:10px; padding-bottom:4px; } .faf-art .sb-avail .faf-avail-c{ font-size:12.5px; } .faf-art .sb-avail .faf-avail-foot{ gap:10px; margin-top:14px; font-size:12.5px; flex-direction:column; } /* ── Le badge du logo flotte en absolu (x 32→148, y 32→149) au-dessus de la colonne centrée. Tant que la fenêtre est trop étroite pour que cette colonne démarre après lui, le fil d'Ariane passe DERRIÈRE le logo — de 1024 px, où le badge apparaît, jusqu’à 1439 px, où la colonne s’écarte enfin assez. La borne basse suit celle du thème : nav.css repasse au petit logo à max-width 900px. On descend le contenu du héro plutôt que de le décaler à droite : le fil reste ainsi aligné sur le titre qu'il surplombe. ── */ @media (min-width: 901px) and (max-width: 1439px) { .faf-art .art-hero-in { padding-top: 58px; } } /* ── Un seul rapport pour le visuel d'article, à toutes les largeurs ──────── Le cadre valait 4/3 sous 900 px et 16/10 au-dessus : deux paliers, donc deux cadrages du même sujet selon l'appareil. Les unifier en 6/5 aligne l'article sur les cartes du carnet et sur la grille de l'accueil — une seule décision de cadrage vaut alors pour tout le site. Effet de bord recherché : un rapport unique fait du visuel un cadre STABLE, le seul cas où faf-media accepte de le recadrer (voir Images::appliquer). ── */ /* ── Cartes « à lire aussi » : même 6:5 que le reste du site ──────────────── Le cadre valait `height:150px` pour une largeur fluide — son rapport variait donc de 1,5 à 2,5 selon la fenêtre, et les visuels composés (titre en bandeau bas) y perdaient leur texte. Voir le détail dans faf-blog.css. ── */ /* ── Le témoignage ne porte pas de visuel : il ne doit pas en payer la place ── `.art-wrap` réserve 100 px en haut pour laisser passer le visuel du héro, qui déborde volontairement de −36 px sur les articles ordinaires. Un témoignage affiche une citation à la place, sans image : ces 100 px, ajoutés aux 66 px de bas de citation, ouvraient 166 px de vide entre la citation et le texte — assez pour qu'on croie la page coupée en deux. On rend au témoignage un espacement à sa mesure : la citation et le témoignage qu'elle annonce se lisent d'un seul tenant. ── */ .faf-art .art-hero--tm .tm-hero-in{ padding-bottom:40px; } .faf-art .art-hero--tm + .art-wrap{ padding-top:44px; } @media(max-width:900px){ .faf-art .art-hero--tm .tm-hero-in{ padding-bottom:32px; } .faf-art .art-hero--tm + .art-wrap{ padding-top:36px; } } /* Cartes liées d'un témoignage : même bande décorative que la page catégorie. `.rel-ini` — l'initiale de la personne — ne se pose que sur les témoignages : c'est le marqueur qui distingue une photo d'ambiance d'un vrai visuel d'article, lequel garde le 6:5 ci-dessus. */ .faf-art .rel-card:has(.rel-ini) .im{ aspect-ratio:2/1; } /* Bande décorative du témoignage : même rapport et même ancrage que les cartes d'où l'on vient, pour que la page tienne la promesse de la vignette. */ .faf-art .tm-visual{ max-width:620px; margin:30px auto 0; aspect-ratio:16/9; overflow:hidden; border-radius:20px; border:6px solid #fff; box-shadow:0 26px 56px -40px rgba(120,80,45,.6); } .faf-art .tm-visual img{ width:100%; height:100%; object-fit:cover; object-position:center 32%; display:block; } @media(max-width:600px){ .faf-art .tm-visual{ margin-top:22px; border-width:5px; border-radius:16px; } } /* ── L'APPEL AU TEST EN FIN D'ARTICLE ─────────────────────────────────────── Il précède l'appel au rendez-vous et doit s'en distinguer sans lui voler la vedette : fond clair contre le bloc sombre du RDV, filet doré, même géométrie. C'est une proposition gratuite — elle a le droit d'être moins insistante. SANS PORTÉE `.faf-art`. L'encart n'est pas posé par le gabarit du thème mais ajouté au contenu par un filtre, et les articles sont rendus par un gabarit d'Elementor : l'ancêtre `.faf-art` n'existe pas autour de lui. Une règle qui attend un parent absent ne s'applique jamais. */ .faf-art-test, .faf-art-invite{ margin:38px 0 26px; padding:30px 32px; background:linear-gradient(180deg,#FFFDFA,#FBF6EE); border:1px solid rgba(149,99,58,.20); border-left:3px solid var(--gold,#B78D5C); border-radius:18px; } .faf-art-test-ey, .faf-art-invite-ey{ font-family:var(--sans,'Raleway',sans-serif); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--gold,#B78D5C); margin:0 0 10px; } /* CLASSE DOUBLÉE, POUR LE POIDS. `.faf-art .art-body h3` (ligne 63) impose var(--sans) en 17 px et pèse deux classes ; `.faf-art-invite h3` n'en pèse qu'une et perdait, malgré sa place plus bas dans le fichier — le titre de l'encart sortait en Raleway. Doubler la classe égalise le poids, et c'est alors l'ordre qui tranche, en notre faveur. */ .faf-art-test.faf-art-test h3, .faf-art-invite.faf-art-invite h3{ font-family:var(--display,'Cormorant Garamond',Georgia,serif); font-weight:600; font-size:clamp(21px,2.4vw,27px); line-height:1.18; color:var(--clay-deep,#95633A); margin:0 0 8px; } .faf-art-test .faf-art-test-lead, .faf-art-invite .faf-art-invite-lead, .faf-art-test-lead, .faf-art-invite-lead{ font-size:15.5px; line-height:1.6; color:var(--ink-soft,#6B6660); margin:0 0 18px; } .faf-art-test-meta, .faf-art-invite-meta{ font-family:var(--display,'Cormorant Garamond',Georgia,serif); font-style:italic; font-size:13px; color:var(--ink-muted,#8A8279); margin:14px 0 0; } @media(max-width:600px){ .faf-art-test, .faf-art-invite{ padding:24px 22px; } } /* L'action de l'encart. `.faf-btn` du gabarit n'est pas garanti ici — l'encart est ajouté au contenu, hors du balisage du thème : il porte sa propre pilule. */ .faf-art-test-go, .faf-art-invite-go{ margin:0; } .faf-art-test-go a, .faf-art-invite-go a{ display:inline-flex; align-items:center; gap:9px; background:var(--teal,#58AC9F); color:#fff !important; text-decoration:none !important; font-family:var(--sans,'Raleway',sans-serif); font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:14px 28px; border-radius:100px; box-shadow:0 12px 26px -14px rgba(88,172,159,.85); transition:transform .25s ease, background .25s ease; } .faf-art-test-go a:hover, .faf-art-invite-go a:hover{ transform:translateY(-2px); background:var(--teal-dark,#3d8579); } /* ── L'ENCART DE FIN D'ARTICLE, VERSION « SUITE » ────────────────────────── Même boîte que l'encart du test, dont il hérite tout ci-dessus. Il n'en diffère que par le filet : ambre pour un test — on propose un jeu —, argile pour une suite d'accompagnement, qui engage davantage. Les sélecteurs ci-dessus nomment les deux jeux de classes, l'ancien et le partagé : le thème et l'extension des tests ne partent pas dans le même souffle, et un écart de quelques minutes ne doit pas laisser un encart nu. */ /* LE NOM `faf-art-cta` EST PRIS. `template-parts/single-post.php` porte un encart doré ainsi nommé, et son