/*
Theme Name:  French Créa
Theme URI:   https://frenchcrea.belhaimer.com
Description: Thème enfant de Blocksy pour la boutique French Créa (créations textiles brodées personnalisables). Toutes les personnalisations visuelles vivent ici ; le thème parent Blocksy n'est jamais modifié. Slug technique inchangé : frenchcrea-child.
Author:      French Créa
Template:    blocksy
Version:     0.5.25
Text Domain: frenchcrea-child
License:     GPL-2.0-or-later
Version note: 0.5.0 — habillage du chrome Blocksy (en-tête, pied, nav, cartes
produit) à la charte D14 ; override des variables Blocksy porté en :root:root
(gagne sur le :root imprimé en ligne par Blocksy). Bande haute via functions.php.
Version note: 0.5.2 — correctif §12 : les sélecteurs de nav ciblaient des
classes Blocksy inexistantes (.ct-header-navigation, .header-menu-primary) ;
remplacés par le vrai markup (.menu-container / .mobile-menu, liens .ct-menu-link).
Version note: 0.5.3 — polices auto-hébergées : assets/fonts/CormorantGaramond.woff2
(variable, 400-600, sous-ensemble latin — couvre les caractères accentués français)
+ assets/fonts/PinyonScript-Regular.woff2, sourcées depuis Google Fonts (licence
SIL Open Font License, libres de redistribution). Retire la dépendance Google
Fonts distante (functions.php bascule automatiquement dès que les fichiers sont
présents — aucun changement de code nécessaire).
Version note: 0.5.4 — correctif §2 : ajout de `img{max-width:100%;height:auto}`.
Sans lui, les <img> brutes des pages en bloc HTML (ex. grille « Le soin, dans les
détails » de l'accueil) s'affichaient à leur taille intrinsèque (1000×1000px
empilés) au lieu du recadrage en grille — WP core ne contraint que les
<img class="wp-image-*">, absentes de ce contenu.
Version note: 0.5.5 — le correctif 0.5.4 était insuffisant : dans une grille CSS,
max-width:100% ne stretch pas un <img> replaced element plus étroit que sa piste
de grille (comportement standard, pas un bug). Ajout de `.fc-detail-grid img{width:100%}`
ciblé — vérifié en conditions réelles (Chrome + Playwright) que les 3 images
s'affichent bien en grille 1×3 recadrée, plus en pile 1000×1000px.
Version note: 0.5.6 — la grille restait sur 1 colonne malgré 0.5.5 : la div de
contenu porte un style="grid-template-columns:1fr" EN LIGNE, qui bat toujours un
<style> externe/inclus (media query ou non). Même bug sur .fc-atouts-grid
(bandeau « Fait main en France… », jamais passé à 3 colonnes non plus). Les deux
corrigés avec !important, seule façon de regagner la main sur du style en ligne.
Revérifié en Chrome réel : 3 colonnes ≥ 760/720px sur les deux sections.
Version note: 0.5.7 — §14 : style du modèle de fiche produit à sections (D20).
Cible `.fc-sec` / `.fc-sec--<clé>` : rythme vertical, titres display, colonnes
empilées puis en grille ≥ 720px, tableaux (Détails & entretien / Pourquoi nous),
FAQ en <details>, CTA boutons core alignés sur la charte. Rendu par l'extension
custom-plugin/fc-fiche/ (patterns + futur bloc à cases).
Version note: 0.5.8 — §14 : ajout de `.fc-sec .fc-photo-slot` (emplacement photo
en pointillés, pour l'encart classique tant que la vraie image n'est pas posée).
Version note: 0.5.9 — §15 : `.fc-cc-fields` (champs « à qui offrir » de la carte
cadeau D21 sur la fiche produit — extension custom-plugin/fc-cartes-cadeaux/).
Version note: 0.5.10 — §16 : présentation mobile de la fiche produit (< 768px) —
réordonnancement des sections (`order`) + accordéon (`.fc-sec[data-acc]`, piloté
par fc-fiche/assets/fiche-mobile.js). Une seule source de contenu, indexable.
Version note: 0.5.11 — §17 : `.fc-galerie` (grille du bloc « Galerie de
réalisations clientes », D31 — patterns/section-galerie-realisations.php).
Purement additif, 0 règle existante modifiée.
Version note: 0.5.12 — bump technique (pas de nouvelle règle CSS depuis
0.5.11) : les 3 déploiements du chatbot FAQ (T15, D59/D60) ce jour n'avaient
pas changé ce numéro, donc `fc-faq-chat.js`/`style.css` gardaient le même
`?ver=` et restaient servis depuis le cache navigateur (`max-age=43200`) et
potentiellement Cloudflare, malgré les fichiers déjà à jour sur le serveur.
Version note: 0.5.13 — correctif chatbot FAQ (T15, D62) : `.fc-faq-chat__panel[hidden]{display:none}`
ajouté — une règle `display` d'auteur prime toujours sur le style par défaut
de l'attribut `[hidden]`, donc le bouton « Fermer » posait bien `hidden` en
JS sans que le panneau ne se cache visuellement.
Version note: 0.5.14 — chatbot FAQ (T15, D63) : icône du bouton flottant
réduite après 3 s sans interaction (`.fc-faq-chat__toggle--compact`,
transition `padding`/`gap`/`font-size`, ancrée au coin bas-droite), ré-agrandie
au survol/focus/toucher (`fc-faq-chat.js`). `prefers-reduced-motion` respecté.
Version note: 0.5.15 — chatbot FAQ (T15, D64) : icône remplacée par une
mascotte SVG originale « trombone souriant » (pas Clippy — voir
docs/decisions.md), structure en couches (`.fc-faq-chat__mascot*`) pour
séparer apparition/balancement/clignement/pose compacte sur `transform` ;
`min-width: 44px` ajouté à `.fc-faq-chat__toggle` ; `prefers-reduced-motion`
étendu à la mascotte et tous ses descendants. Aucun JS modifié.
Version note: 0.5.16 — chatbot FAQ (T15, D65) : mascotte SVG « trombone
souriant » (D64) remplacée par le vrai Clippy — choix assumé du propriétaire
malgré le risque de contrefaçon/marque exposé deux fois, cf. decisions.md.
Image bitmap fournie par le propriétaire (`assets/img/clippy.png`, pose de
repos rognée depuis son propre sprite). Règles `.fc-faq-chat__mascot-body/
-clip/-face/-eyes/-mouth` et leurs `@keyframes` de balancement/clignement
retirées (sans objet sur une image plate) ; apparition + pose compacte
conservées sur `.fc-faq-chat__mascot` (image). Aucun JS modifié.
Version note: 0.5.17 — chatbot FAQ (T15, D66) : Clippy réellement animé —
`.fc-faq-chat__mascot` devient un conteneur `background-image` (proportions
124×93) au lieu d'une simple `<img>` ; défilement image par image des
bandeaux `clippy-wave.png` (27 images, jouées une fois à l'apparition) et
`clippy-idle.png` (7 images, boucle discrète) fait en JS
(`fc-faq-chat.js`, durées reprises du sprite d'origine). `clippy.png` (pose
seule) reste utilisée à l'arrêt (`--compact`/`prefers-reduced-motion`, ce
dernier vérifié aussi côté JS car `@media` ne peut pas arrêter un
`setTimeout`).
Version note: 0.5.18 — chatbot FAQ (T15, D67) : couche son. Trois sons
d'interface **originaux**, synthétisés pour ce projet (aucun fichier tiers) :
ouverture/fermeture du panneau et choix d'une réponse. Nouveau bouton
`.fc-faq-chat__sound` dans l'en-tête du panneau pour couper/rétablir le son
(réglage mémorisé par visiteur). Aucune image ni animation ajoutée.
Version note: 0.5.19 — chatbot FAQ (T15, D67 suite) : quatrième son
**original** `fc-chat-knock.wav` (toc-toc, modèle physique simplifié :
transitoire de bruit + partiels inharmoniques amortis), joué avec la bulle
d'invite. Aucune modification CSS — bump nécessaire uniquement pour que le
JS mis à jour ne soit pas resservi depuis le cache (leçon D61).
Version note: 0.5.20 — chatbot FAQ (T15, T10) : nouveau personnage Fillet,
planche en grille `assets/img/fc-mascot.webp` (cases 124×93) pilotée en JS
selon le comportement à l'écran (extrait réduit
`assets/js/fc-mascot-animations.json`). Avant le premier geste : pose de
repos légère en SVG inline (aucune requête de la planche). Pose compacte
après 30 s (au lieu de 3 s) : texte visuellement masqué (reste le nom
accessible), fond rose réduit en cercle 64×64 px, Fillet centré, focus
clavier visible. `prefers-reduced-motion` : pas de transition, pose fixe.
Version note: 0.5.21 — T14/T12 : bouton WhatsApp flottant `.fc-whatsapp`
(toujours visible, bas gauche, 56×56 px, icône SVG inline, aucune requête
externe ; messagerie uniquement, pas de `tel:`). Chatbot : repli « pas de
réponse » sur WhatsApp lun-ven 9h-17h heure de Paris, e-mail en dehors ;
horaires affichés sous les puces (`.fc-faq-chat__note`).
Version note: 0.5.22 — T34/D94 : FAQ chatbot (functions.php) — un produit
variable affiche la fourchette min–max réelle de ses variations. Aucune
modification CSS — bump de cache uniquement (leçon D61).
Version note: 0.5.23 — T38 : FAQ chatbot (functions.php) — liste des motifs
lue sur la configuration BB_Config d'une fiche (symboles harmonisés, dont « Coq »).
Aucune modification CSS — bump de cache uniquement.
Version note: 0.5.24 — T42/D104 (audit Lot 9, P1-1 et P1-2) : nouveau jeton
`--fc-btn-bg` #B95865 (teinte HSL de #BE6470 assombrie, blanc 4.52:1) pour
tous les fonds de boutons/CTA/chat sous texte blanc ; `--fc-rose-deep` garde
#BE6470 pour le décor sans texte. `--fc-rose-ink-strong` #AC4856 (texte rose
sur --fc-surface-2). Upsell, carte cadeau, encart photo en --fc-text.
Sous-titre du chat sans opacité ; survol du bouton du chat assombri.
Version note: 0.5.25 — T43/D106 (audit Lot 9, P2) : bordure des champs
`--fc-border-field` #8F847A (≥ 3:1 sur tous les fonds clairs) ; accordéon
mobile de la fiche avec vrai bouton dans le h2 (assets/js/fc-fiche-a11y.js)
et signe +/– en --fc-gold-ink ; fermeture de la bulle d'invite 44×44 ;
éléments flottants masqués sous 768 px quand un champ a le focus ou qu'un
bouton d'achat passe dans le bas de l'écran ; marge de défilement sur les
pages d'achat. Planche de Fillet chargée à l'ouverture du chat seulement.
*/

/* ===========================================================================
   1. JETONS DE STYLE  —  source unique. Cf. docs/design-systeme.md §1 et
   docs/charte-graphique-frenchcrea.html.
   Palette DÉRIVÉE DU LOGO (2026-09-06, D14 — validée). Rose corail « fil » =
   signature ; or ancien = accent précieux ; fond ivoire chaud.
   À répliquer dans le Customizer Blocksy (Global colors / Typography).
   =========================================================================== */
:root {
    /* Fonds & texte */
    --fc-bg:          #F8F1E8;
    --fc-surface:     #FFFDFA;
    --fc-surface-2:   #F3E7DA;
    --fc-text:        #463A33;
    --fc-text-soft:   #7B6B61;
    --fc-border:      #EBE0D4; /* filets décoratifs (1.1–1.3:1, pas une limite de champ) */
    --fc-border-field: #8F847A; /* limite de champ : ≥ 3:1 sur bg/surface/surface-2 (D106) */

    /* Rose « fil » — couleur signature */
    --fc-rose:        #DD7E84; /* aplats, filets, motifs — DÉCOR, pas de texte  */
    --fc-rose-deep:   #BE6470; /* décor interactif sans texte : focus, filets   */
    --fc-btn-bg:      #B95865; /* fond bouton / CTA sous texte blanc (4.52:1, D104) */
    --fc-rose-ink:    #A94E58; /* texte / lien rose sur ivoire (~5:1)           */
    --fc-rose-ink-strong: #AC4856; /* texte rose sur --fc-surface-2 (4.52:1, D104) */
    --fc-rose-wash:   #F5E4E2; /* fonds de section doux, badges                 */

    /* Or ancien — accent précieux */
    --fc-gold:        #C09A57; /* filets, puces, séparateurs — DÉCOR            */
    --fc-gold-ink:    #8A6A2E; /* surtitres, mentions                          */

    /* États */
    --fc-success:     #4E7A5B;
    --fc-error:       #B23B34;

    /* Alias de compat (utilisés dans la couche composants) */
    --fc-secondary:   var(--fc-rose);
    --fc-accent:      var(--fc-rose-deep);
    --fc-accent-ink:  #FFFFFF;
    --fc-link:        var(--fc-rose-ink);

    /* Typographie — cf. charte. Auto-héberger les woff2 dans assets/fonts/. */
    --fc-font-display: "Cormorant Garamond", "Fraunces", Georgia, "Times New Roman", serif;
    --fc-font-script:  "Pinyon Script", "Parisienne", cursive;
    --fc-font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                       Helvetica, Arial, sans-serif;
    --fc-font-label:   var(--fc-font-body);

    /* Échelle typographique fluide */
    --fc-h1:  clamp(2rem, 1.5rem + 2.4vw, 3.1rem);
    --fc-h2:  clamp(1.4rem, 1.1rem + 1.4vw, 2rem);
    --fc-h3:  1.15rem;
    --fc-body: 1rem;
    --fc-caption: 0.8125rem;
    --fc-lh-body: 1.6;
    --fc-lh-head: 1.15;
    --fc-track-caps: 0.08em;

    /* Espacement */
    --fc-space-1: 4px;  --fc-space-2: 8px;   --fc-space-3: 12px;
    --fc-space-4: 16px; --fc-space-5: 24px;  --fc-space-6: 32px;
    --fc-space-7: 48px; --fc-space-8: 72px;  --fc-space-9: 96px;

    /* Contenants, rayons, ombres */
    --fc-container: 1200px;
    --fc-measure:   66ch;
    --fc-radius:     10px;
    --fc-radius-sm:  6px;
    --fc-radius-pill: 999px;
    --fc-shadow-sm: 0 2px 10px rgba(70, 58, 51, .07);
    --fc-shadow-md: 0 6px 22px rgba(70, 58, 51, .10);
}

/* ===========================================================================
   2. BASE  —  socle typographique + primitives. Blocksy fournit le reste.
   =========================================================================== */
body {
    background-color: var(--fc-bg);
    color: var(--fc-text);
    font-family: var(--fc-font-body);
    font-size: var(--fc-body);
    line-height: var(--fc-lh-body);
}

/* WP core ne contraint que les <img class="wp-image-*"> (insérées via l'éditeur).
   Les <img> brutes des pages en HTML personnalisé (accueil) n'ont pas cette classe
   et débordaient à leur taille intrinsèque (ex. grille "Le soin, dans les détails"
   affichée en 1000×1000px empilés au lieu de 3 colonnes recadrées). */
img { max-width: 100%; height: auto; }

/* max-width:100% ne suffit pas dans une grille CSS : un <img> replaced element
   garde sa taille intrinsèque tant que la piste de grille est plus large qu'elle
   (comportement standard de CSS Grid, pas un bug navigateur) — il faut width:100%
   explicite pour qu'il remplisse sa colonne. Classe posée dans le contenu de la
   page d'accueil (docs/maquettes/accueil-blocks.html), pas de composant réutilisable. */
.fc-detail-grid img { width: 100%; height: auto; display: block; }

/* .fc-atouts-grid et .fc-detail-grid portent toutes deux, dans le contenu de la
   page d'accueil, un style="grid-template-columns:1fr" EN LIGNE — priorité plus
   haute que n'importe quelle règle externe/incluse, media query ou non. Le
   <style> intégré à la page qui tente de passer à 3 colonnes ≥760px/≥720px ne
   peut donc jamais l'emporter. Seul un !important côté thème peut regagner la
   main. (Idem pour la grille de détails ci-dessus.) */
@media (min-width: 760px) {
    .fc-atouts-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 720px) {
    .fc-detail-grid { grid-template-columns: repeat(3, 1fr) !important; }
}

h1, h2, h3, h4,
.entry-title,
.woocommerce-loop-product__title,
.product_title {
    font-family: var(--fc-font-display);
    font-weight: 500;
    line-height: var(--fc-lh-head);
    text-wrap: balance;
    color: var(--fc-text);
}
h1, .product_title { font-size: var(--fc-h1); letter-spacing: .02em; }
h2 { font-size: var(--fc-h2); }
h3 { font-size: var(--fc-h3); }

.fc-caps   { text-transform: uppercase; letter-spacing: var(--fc-track-caps); }
.fc-script { font-family: var(--fc-font-script); font-weight: 400; color: var(--fc-rose); }
.fc-eyebrow {
    font-family: var(--fc-font-label);
    text-transform: uppercase;
    letter-spacing: .18em;
    font-size: .72rem;
    font-weight: 700;
    color: var(--fc-gold-ink);
    display: block;
    margin: 0 0 var(--fc-space-3);
}

p, li { max-width: var(--fc-measure); }
.fc-lede { font-size: 1.12rem; color: var(--fc-text-soft); max-width: 60ch; }

a { color: var(--fc-link); text-underline-offset: 3px; text-decoration-color: var(--fc-gold); }
a:hover, a:focus { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; }

.skip-link:not(:focus) {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ===========================================================================
   3. MISE EN PAGE  —  conteneurs, sections, grilles
   =========================================================================== */
.fc-container {
    width: 100%;
    max-width: var(--fc-container);
    margin-inline: auto;
    padding-inline: var(--fc-space-4);
}

.fc-section { padding-block: var(--fc-space-7); }
.fc-section--alt { background: var(--fc-surface); }
@media (min-width: 1024px) { .fc-section { padding-block: var(--fc-space-9); } }

.fc-stack > * + * { margin-top: var(--fc-space-5); }

.fc-grid { display: grid; gap: var(--fc-space-5); grid-template-columns: 1fr; }
@media (min-width: 480px) {
    .fc-grid--cat  { grid-template-columns: repeat(2, 1fr); }
    .fc-grid--prod { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .fc-grid--cat    { grid-template-columns: repeat(3, 1fr); }
    .fc-grid--prod   { grid-template-columns: repeat(3, 1fr); }
    .fc-grid--detail { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) { .fc-grid--prod { grid-template-columns: repeat(4, 1fr); } }

/* Séparateur « point de couture » (décoratif — cf. charte) */
.fc-stitch {
    border: 0; height: 2px;
    margin: var(--fc-space-7) auto;
    max-width: 640px;
    background-image: repeating-linear-gradient(
        to right, var(--fc-rose) 0 7px, transparent 7px 12px
    );
}

/* ===========================================================================
   4. COMPOSANTS  —  design-systeme.md §6 + charte
   =========================================================================== */

/* Boutons */
.fc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--fc-space-2);
    min-height: 44px; padding: 13px 24px;
    border-radius: var(--fc-radius);
    font-family: var(--fc-font-label); font-weight: 600; font-size: .95rem;
    text-decoration: none; cursor: pointer; border: 1px solid transparent;
}
.fc-btn--primary   { background: var(--fc-btn-bg); color: var(--fc-accent-ink); }
.fc-btn--primary:hover { filter: brightness(0.94); text-decoration: none; }
.fc-btn--secondary { background: transparent; color: var(--fc-gold-ink); border-color: var(--fc-gold); }
.fc-btn--secondary:hover { background: color-mix(in srgb, var(--fc-gold) 12%, transparent); }
.fc-btn[aria-disabled="true"], .fc-btn:disabled {
    background: var(--fc-border); color: var(--fc-text-soft); cursor: not-allowed; border-color: transparent;
}

/* Étiquette / badge */
.fc-tag {
    display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    padding: 4px 10px; border-radius: var(--fc-radius-pill);
    background: var(--fc-rose-wash); color: var(--fc-rose-ink);
}

/* Carte (catégorie / produit) */
.fc-card { display: flex; flex-direction: column; gap: var(--fc-space-3); }
.fc-card__media {
    aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--fc-radius-sm);
    background: var(--fc-rose-wash);
}
.fc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fc-card h3 { font-size: 1.05rem; }
.fc-card .fc-price { font-family: var(--fc-font-display); font-weight: 600; }
.fc-card .fc-muted { color: var(--fc-text-soft); font-size: .9rem; }
.fc-card a { text-decoration: none; color: var(--fc-text); }
.fc-card a:hover h3 { text-decoration: underline; }

/* Bloc média + texte (accueil, à propos) */
.fc-media-text { display: grid; gap: var(--fc-space-5); align-items: center; }
@media (min-width: 1024px) {
    .fc-media-text { grid-template-columns: 1fr 1fr; gap: var(--fc-space-8); }
    .fc-media-text--reverse > :first-child { order: 2; }
}

/* Liste d'étapes numérotées (pastille or) */
.fc-steps { counter-reset: fcstep; list-style: none; padding: 0; margin: 0;
    display: grid; gap: var(--fc-space-5); }
@media (min-width: 768px) { .fc-steps { grid-template-columns: repeat(4, 1fr); } }
.fc-steps > li { position: relative; padding-top: var(--fc-space-6); }
.fc-steps > li::before {
    counter-increment: fcstep; content: counter(fcstep);
    position: absolute; top: 0; left: 0;
    width: 36px; height: 36px; border-radius: var(--fc-radius-pill);
    background: var(--fc-gold); color: #fff;
    display: grid; place-items: center;
    font-family: var(--fc-font-display); font-weight: 600;
}
.fc-steps h3 { font-size: 1rem; margin-bottom: var(--fc-space-2); }
.fc-steps p  { font-size: .9rem; color: var(--fc-text-soft); margin: 0; }

/* Encart de réassurance */
.fc-notice {
    border: 1px solid var(--fc-border);
    border-left: 3px solid var(--fc-gold);
    border-radius: var(--fc-radius-sm);
    background: var(--fc-surface-2);
    padding: var(--fc-space-4);
    font-size: .9rem;
}

/* Bande d'appel à l'action */
.fc-cta-band {
    background: var(--fc-rose-wash);
    border-radius: var(--fc-radius);
    padding: var(--fc-space-7) var(--fc-space-5);
    text-align: center;
}

/* Fil d'Ariane */
.fc-breadcrumb, .woocommerce-breadcrumb {
    font-size: .82rem; color: var(--fc-text-soft);
    padding-block: var(--fc-space-4);
}
.fc-breadcrumb a, .woocommerce-breadcrumb a { color: var(--fc-text-soft); }

/* Accordéon (contenu présent dans le DOM ; masqué par [hidden]) */
.fc-accordion { border-top: 1px solid var(--fc-border); }
.fc-accordion__item { border-bottom: 1px solid var(--fc-border); }
.fc-accordion__btn {
    width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 600; color: var(--fc-text);
    padding: var(--fc-space-4) 0;
    display: flex; justify-content: space-between; gap: var(--fc-space-3);
}
.fc-accordion__btn::after { content: "+"; color: var(--fc-gold-ink); font-size: 1.2rem; line-height: 1; }
.fc-accordion__btn[aria-expanded="true"]::after { content: "\2013"; }
.fc-accordion__panel { padding-bottom: var(--fc-space-5); }
.fc-accordion__panel[hidden] { display: none; }

/* ===========================================================================
   5. FORMULAIRES
   =========================================================================== */
.fc-field { margin-bottom: var(--fc-space-4); }
.fc-field > label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.fc-field input, .fc-field select, .fc-field textarea,
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], textarea, select {
    font: inherit; font-size: 16px; /* évite le zoom auto iOS */
    width: 100%; padding: 10px 12px;
    border: 1px solid var(--fc-border-field); border-radius: var(--fc-radius-sm);
    background: var(--fc-surface); color: var(--fc-text);
    min-height: 44px;
}
.fc-field .fc-error-text { color: var(--fc-error); font-size: .82rem; margin-top: 4px; }
.fc-field--invalid input, .fc-field--invalid textarea, .fc-field--invalid select {
    border-color: var(--fc-error);
}

/* ===========================================================================
   6. WOOCOMMERCE  —  retouches légères (le gros arrive aux Lots 5–7)
   =========================================================================== */
.woocommerce a.button, .woocommerce button.button,
.woocommerce .button, .wc-block-components-button {
    background: var(--fc-btn-bg) !important;
    color: var(--fc-accent-ink) !important;
    border-radius: var(--fc-radius) !important;
    min-height: 44px;
    font-weight: 600;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .button:hover, .wc-block-components-button:hover { filter: brightness(0.94); }

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price, .woocommerce div.product span.price {
    color: var(--fc-text);
    font-family: var(--fc-font-display);
    font-weight: 600;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title { padding-top: .4em; }

/* Messages WooCommerce aux couleurs de la marque */
.woocommerce-message { border-top-color: var(--fc-success); }
.woocommerce-info    { border-top-color: var(--fc-gold); }
.woocommerce-error   { border-top-color: var(--fc-error); }

/* Pas d'étoiles de notation (retirées aussi côté PHP — functions.php / D14) */
.woocommerce .star-rating, .woocommerce-product-rating { display: none !important; }

/* ===========================================================================
   7. EN-TÊTE / PIED  —  structure via Blocksy Companion (Customizer).
   Ici : quelques accroches de style que le markup Blocksy peut recevoir.
   =========================================================================== */
.fc-topline {                       /* barre haute — réassurance, jamais de promo */
    background: var(--fc-rose-wash);
    color: var(--fc-text);
    text-align: center;
    font-size: .8rem;
    padding: var(--fc-space-2) var(--fc-space-4);
}
.fc-wordmark { font-family: var(--fc-font-display); font-weight: 600; letter-spacing: .02em; }
.fc-wordmark .fc-script { font-size: 1.15em; }

/* ===========================================================================
   8. Polices — AUTO-HÉBERGER au Lot 3 (fichiers absents = repli serif).
   Déposer dans theme-child/assets/fonts/ (woff2, sous-ensemble latin) :
     - Cormorant-Garamond (400/500/600)  → titres
     - PinyonScript-Regular              → mots d'accent
   Enqueue : functions.php (à généraliser en boucle).
   En dev, la charte (docs/charte-graphique-frenchcrea.html) charge via Google Fonts.
   ---------------------------------------------------------------------------
   @font-face { font-family:"Cormorant Garamond";
     src:url("assets/fonts/CormorantGaramond.woff2") format("woff2");
     font-weight:400 600; font-display:swap; }
   @font-face { font-family:"Pinyon Script";
     src:url("assets/fonts/PinyonScript-Regular.woff2") format("woff2");
     font-weight:400; font-display:swap; }
   =========================================================================== */

/* ===========================================================================
   9. Réduction de mouvement
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================================
   10. BLOCKSY — application de la charte D14 SANS passer par le Customizer.
   Redéfinit les variables globales de Blocksy 2.x avec les jetons --fc-*.
   Chargé en priorité 20 (après Blocksy). Réversible : supprimer ce bloc.
   Si le Customizer est réglé un jour sur la charte, il prendra le relais.
   Sélecteur :root:root => spécificité (0,2,0) : gagne sur le :root que Blocksy
   imprime EN LIGNE après cette feuille (sinon l'accent bleu Blocksy l'emporte).
   =========================================================================== */
:root:root {
    /* Palette Blocksy (8 emplacements) + alias éditeur --paletteColorN */
    --theme-palette-color-1: #B95865;  /* accent : boutons, liens (= --fc-btn-bg, D104) */
    --theme-palette-color-2: #A94E58;  /* accent survol            (= --fc-rose-ink)  */
    --theme-palette-color-3: #463A33;  /* titres                   (= --fc-text)      */
    --theme-palette-color-4: #7B6B61;  /* texte courant            (= --fc-text-soft) */
    --theme-palette-color-5: #EBE0D4;  /* bordures                 (= --fc-border)    */
    --theme-palette-color-6: #F3E7DA;  /* fonds discrets           (= --fc-surface-2) */
    --theme-palette-color-7: #FFFDFA;  /* surface                  (= --fc-surface)   */
    --theme-palette-color-8: #F8F1E8;  /* fond de page             (= --fc-bg)        */
    --paletteColor1: #B95865; --paletteColor2: #A94E58; --paletteColor3: #463A33;
    --paletteColor4: #7B6B61; --paletteColor5: #EBE0D4; --paletteColor6: #F3E7DA;
    --paletteColor7: #FFFDFA; --paletteColor8: #F8F1E8;

    --theme-text-color:            var(--fc-text);
    --theme-font-color:            var(--fc-text);
    --theme-headings-color:        var(--fc-text);
    --theme-link-color:            var(--fc-rose-ink);
    --theme-link-initial-color:    var(--fc-rose-ink);
    --theme-link-hover-color:      var(--fc-rose-deep);
    --theme-border-color:          var(--fc-border);
    --theme-selection-background-color: var(--fc-rose-wash);
    --theme-content-background-color:   var(--fc-bg);
    --theme-background-color:      var(--fc-bg);

    --theme-font-family:          var(--fc-font-body);
    --theme-headings-font-family: var(--fc-font-display);

    --theme-button-background-initial-color: var(--fc-btn-bg);
    --theme-button-background-hover-color:   var(--fc-rose-ink);
    --theme-button-text-initial-color: #ffffff;
    --theme-button-text-hover-color:   #ffffff;

    --theme-form-text-color: var(--fc-text);
    --theme-form-field-background-initial-color: var(--fc-surface);
    --theme-form-field-border-initial-color: var(--fc-border-field);

    --theme-container-max-width: 1200px;
    --theme-normal-container-max-width: 1200px;
}

/* Filets de sécurité (au cas où un nom de variable Blocksy diffère selon la version) */
body,
.ct-container,
[id="main-container"] { background-color: var(--fc-bg); color: var(--fc-text); }

h1, h2, h3, h4, h5, h6,
.entry-title, .ct-title,
.wp-block-heading {
    font-family: var(--fc-font-display);
    font-weight: 500;
    color: var(--fc-text);
}

a { color: var(--fc-rose-ink); }
a:hover { color: var(--fc-rose-deep); }

.wp-block-button__link,
.ct-button,
button.ct-button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    background-color: var(--fc-btn-bg);
    color: #ffffff;
    border-color: var(--fc-btn-bg);
    border-radius: var(--fc-radius);
}
.wp-block-button__link:hover,
.ct-button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover { background-color: var(--fc-rose-ink); }

/* Mot d'accent (script) — utilisable dans le contenu via <span class="fc-script"> */
.fc-script { font-family: var(--fc-font-script); font-weight: 400; color: var(--fc-rose); }

/* ===========================================================================
   12. CHROME BLOCKSY — en-tête / navigation / pied habillés à la charte.
   Le Customizer Blocksy n'étant pas réglé, on cible son markup 2.x.
   Réversible : supprimer §12–§13.
   =========================================================================== */

/* Bande haute (injectée par functions.php via wp_body_open). */
.fc-topline {
    background: var(--fc-rose-wash);
    color: var(--fc-text);
    text-align: center;
    font-size: .8rem;
    letter-spacing: .01em;
    padding: 7px var(--fc-space-4);
}

/* Logo texte (aucun fichier logo déposé) = wordmark, traité comme la maquette. */
.site-title, .ct-logo-container .site-title {
    font-family: var(--fc-font-display);
    font-weight: 600;
    letter-spacing: .015em;
}
.site-title a { color: var(--fc-text); text-decoration: none; }
.site-title a:hover { color: var(--fc-rose-ink); }

/* En-tête : fond ivoire, filet bas discret. */
header#header, .ct-header { background-color: var(--fc-bg); }
header#header [data-row="middle"] { border-bottom: 1px solid var(--fc-border); }

/* Navigation principale (markup réel Blocksy 2.1.56 : .menu-container / .mobile-menu, liens .ct-menu-link). */
header#header .menu-container a.ct-menu-link,
#offcanvas .mobile-menu a.ct-menu-link {
    font-family: var(--fc-font-body);
    font-size: .95rem;
    color: var(--fc-text);
}
header#header .menu-container .current-menu-item > a.ct-menu-link,
header#header .menu-container .current_page_item > a.ct-menu-link {
    color: var(--fc-rose-ink);
    box-shadow: inset 0 -2px 0 var(--fc-rose-deep);
}
header#header .menu-container a.ct-menu-link:hover,
#offcanvas .mobile-menu a.ct-menu-link:hover { color: var(--fc-rose-ink); }

/* Icônes compte / panier / recherche / burger. */
.ct-header-account, .ct-header-cart, .ct-toggle-close, .ct-search-icon,
[data-id="account"] a, [data-id="cart"] a { color: var(--fc-text); }
.ct-cart-count, .ct-header-cart .count { background: var(--fc-btn-bg); color: #fff; }

/* Zone titre de page Blocksy (archives, pages). */
.page-title, .ct-page-title, .entry-header .entry-title {
    font-family: var(--fc-font-display); color: var(--fc-text);
}
.hero-section { background-color: var(--fc-surface); border-bottom: 1px solid var(--fc-border); }

/* Pied de page. */
footer#footer, .ct-footer { background-color: var(--fc-surface); color: var(--fc-text-soft); }
footer#footer [data-row="middle"] { border-top: 1px solid var(--fc-border); padding-block: var(--fc-space-7); }
footer#footer .widget-title, footer#footer h3, footer#footer h4 {
    font-family: var(--fc-font-body);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fc-text-soft);
    margin-bottom: var(--fc-space-3);
}
footer#footer a { color: var(--fc-text); text-decoration: none; }
footer#footer a:hover { color: var(--fc-rose-ink); text-decoration: underline; }
footer#footer [data-row="bottom"], footer#footer .ct-footer-bottom {
    border-top: 1px solid var(--fc-border);
    font-size: .8rem;
    color: var(--fc-text-soft);
}
/* Menu de pied en ligne (si rendu hors colonnes de widgets). */
.fc-footer-nav ul {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: var(--fc-space-3) var(--fc-space-5);
    justify-content: center;
}
.fc-footer-nav a { font-size: .88rem; }

/* Colonnes de pied injectées par functions.php (blocksy:footer:before). */
.fc-footer-cols {
    background: var(--fc-surface);
    border-top: 1px solid var(--fc-border);
    padding-block: var(--fc-space-7);
}
.fc-footer-cols__grid { display: grid; gap: var(--fc-space-6); grid-template-columns: 1fr; }
@media (min-width: 720px) { .fc-footer-cols__grid { grid-template-columns: 1.6fr 1fr; } }
.fc-footer-col h3 {
    font-family: var(--fc-font-body);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fc-text-soft);
    margin: 0 0 var(--fc-space-3);
}
.fc-footer-col--brand p { color: var(--fc-text-soft); font-size: .9rem; margin: 0; max-width: 42ch; }
.fc-footer-col ul, ul.fc-footer-menu {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: var(--fc-space-2);
}
.fc-footer-col a { color: var(--fc-text); text-decoration: none; font-size: .9rem; }
.fc-footer-col a:hover { color: var(--fc-rose-ink); text-decoration: underline; }

/* ===========================================================================
   13. CARTES PRODUIT — aligne la carte Blocksy/Woo sur la maquette
   (titre display, prix, image portrait 4:5, aligné à gauche).
   =========================================================================== */
ul.products li.product, .wc-block-grid__product { text-align: left; }
ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
    font-family: var(--fc-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--fc-text);
    padding-top: .35em;
}
ul.products li.product .price, .wc-block-grid__product-price {
    font-family: var(--fc-font-display);
    font-weight: 600;
    color: var(--fc-text);
}
ul.products li.product img, .wc-block-grid__product-image img {
    border-radius: var(--fc-radius-sm);
    aspect-ratio: 4 / 5;
    object-fit: cover;
}
ul.products li.product .button { display: inline-block; margin-top: var(--fc-space-2); }

/* ===========================================================================
   14. FICHE PRODUIT À SECTIONS (D20) — style commun aux patterns et au bloc.
   Chaque section = <section class="fc-sec fc-sec--<clé>">. Mobile-first.
   =========================================================================== */
.fc-sec {
    max-width: var(--fc-container);
    margin-inline: auto;
    padding-block: var(--fc-space-6);
    border-top: 1px solid var(--fc-border);
}
.fc-sec:first-child { border-top: 0; padding-top: var(--fc-space-3); }
.fc-sec > .wp-block-heading:first-child,
.fc-sec > h2:first-child {
    font-family: var(--fc-font-display);
    font-size: var(--fc-h2);
    line-height: var(--fc-lh-head);
    color: var(--fc-text);
    margin: 0 0 var(--fc-space-3);
    text-wrap: balance;
}
.fc-sec h3 {
    font-family: var(--fc-font-display);
    font-size: var(--fc-h3);
    color: var(--fc-rose-ink);
    margin: 0 0 var(--fc-space-1);
}
.fc-sec p { color: var(--fc-text-soft); margin: 0 0 var(--fc-space-2); }
.fc-sec p:last-child { margin-bottom: 0; }

/* Colonnes : empilées en mobile, en grille dès 720px. */
.fc-sec .wp-block-columns { display: grid; gap: var(--fc-space-4); }
@media (min-width: 720px) {
    .fc-sec .wp-block-columns {
        grid-auto-flow: column;
        grid-auto-columns: 1fr;
        align-items: start;
    }
}
.fc-sec .wp-block-column > *:first-child { margin-top: 0; }

/* Hero : image + accroche. */
.fc-sec--hero { border-top: 0; padding-top: var(--fc-space-3); }
.fc-sec--hero .wp-block-column img { border-radius: var(--fc-radius); width: 100%; }

/* Images de section. */
.fc-sec figure.wp-block-image { margin: 0; }
.fc-sec figure.wp-block-image img { border-radius: var(--fc-radius-sm); width: 100%; height: auto; }

/* Tableaux (Détails & entretien, Pourquoi nous). */
.fc-sec .wp-block-table table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fc-sec .wp-block-table th,
.fc-sec .wp-block-table td {
    border: 1px solid var(--fc-border);
    padding: .55em .75em;
    text-align: left;
    vertical-align: top;
}
.fc-sec .wp-block-table thead th { background: var(--fc-surface-2); font-weight: 600; }
.fc-sec .wp-block-table td:first-child { font-weight: 600; color: var(--fc-text); width: 34%; }

/* FAQ : core/details. */
.fc-sec--faq .wp-block-details {
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-sm);
    padding: 0 var(--fc-space-3);
    margin-bottom: var(--fc-space-2);
    background: var(--fc-surface);
}
.fc-sec--faq .wp-block-details > summary {
    cursor: pointer;
    padding: var(--fc-space-3) 0;
    font-weight: 600;
    color: var(--fc-text);
    list-style-position: inside;
}
.fc-sec--faq .wp-block-details[open] > summary { border-bottom: 1px solid var(--fc-border); }
.fc-sec--faq .wp-block-details p { padding: var(--fc-space-3) 0; }

/* Listes. */
.fc-sec .wp-block-list { color: var(--fc-text-soft); padding-left: 1.25em; }
.fc-sec .wp-block-list li { margin-bottom: .35em; }

/* CTA — aligne les boutons core sur la charte. */
.fc-sec .wp-block-buttons { margin-top: var(--fc-space-3); }
.fc-sec .wp-block-button__link {
    background: var(--fc-btn-bg);
    color: #fff;
    border-radius: var(--fc-radius-pill);
    padding: .7em 1.6em;
    font-weight: 600;
    text-decoration: none;
}
.fc-sec .wp-block-button__link:hover { background: var(--fc-rose-ink); }

/* Sections « discrètes » : CTA intermédiaire, upsell, clôture — fond doux. */
.fc-sec--cta-mid,
.fc-sec--closing { text-align: center; }
.fc-sec--upsell { background: var(--fc-surface-2); border-radius: var(--fc-radius); padding-inline: var(--fc-space-4); }
.fc-sec--upsell p { color: var(--fc-text); } /* --fc-text-soft = 4.19:1 sur --fc-surface-2 (D104) */

/* Emplacement photo non encore remplacé (encart classique). */
.fc-sec .fc-photo-slot {
    border: 1px dashed var(--fc-border);
    border-radius: var(--fc-radius-sm);
    padding: var(--fc-space-3);
    text-align: center;
    color: var(--fc-text); /* sur --fc-surface-2 : 9.02:1 (D104) */
    background: var(--fc-surface-2);
}

/* ===========================================================================
   15. CARTE CADEAU (D21) — champs « à qui offrir » sur la fiche produit.
   =========================================================================== */
.fc-cc-fields {
    margin: var(--fc-space-3) 0;
    padding: var(--fc-space-4);
    border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius);
    background: var(--fc-surface-2);
    display: grid;
    gap: var(--fc-space-2);
}
.fc-cc-fields .form-row { margin: 0; }
.fc-cc-fields label {
    display: block;
    font-family: var(--fc-font-label, var(--fc-font-body));
    font-size: .9rem;
    color: var(--fc-text);
}
.fc-cc-fields .fc-cc-hint { color: var(--fc-text); font-weight: 400; } /* fond --fc-surface-2 (D104) */
.fc-cc-fields input,
.fc-cc-fields textarea,
.fc-cc-fields select {
    width: 100%;
    margin-top: .3em;
    padding: .55em .7em;
    border: 1px solid var(--fc-border-field);
    border-radius: var(--fc-radius-sm);
    background: var(--fc-surface);
    color: var(--fc-text);
    font: inherit;
}
.fc-cc-fields textarea { resize: vertical; min-height: 3.5em; }

/* ===========================================================================
   16. FICHE PRODUIT — présentation MOBILE (< 768px) : ordre + accordéon.
   Une seule source de contenu ; seul l'affichage change (JS : fiche-mobile.js).
   =========================================================================== */
@media (max-width: 767px) {
    .fc-fiche { display: flex; flex-direction: column; }
    .fc-sec--hero      { order: 1; }
    .fc-sec--intro     { order: 2; }
    .fc-sec--how       { order: 3; }
    .fc-sec--details   { order: 4; }
    .fc-sec--faq       { order: 5; }
    .fc-sec--benefits  { order: 6; }
    .fc-sec--value     { order: 7; }
    .fc-sec--why-us    { order: 8; }
    .fc-sec--occasions { order: 9; }
    .fc-sec--guarantee { order: 10; }
    .fc-sec--making    { order: 11; }
    .fc-sec--closing   { order: 12; }

    /* Sections transformées en accordéon par le JS (attribut data-acc). */
    .fc-fiche .fc-sec[data-acc] {
        border: 1px solid var(--fc-border);
        border-radius: var(--fc-radius-sm);
        padding: 0 var(--fc-space-3);
        margin-block: var(--fc-space-2);
    }
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--fc-space-2);
        cursor: pointer;
        padding-block: var(--fc-space-3);
    }
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head > h2 { margin: 0; }
    /* Signe +/– : --fc-gold-ink (≥ 4.1:1 sur les fonds clairs) au lieu de
       --fc-gold (2.34:1), indicateur d'état soumis au 3:1 (1.4.11, D106). */
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head::after {
        content: "+";
        font-family: var(--fc-font-body);
        font-size: 1.5rem;
        line-height: 1;
        color: var(--fc-gold-ink);
        flex: none;
    }
    .fc-fiche .fc-sec[data-acc][data-open] > .fc-sec__head::after { content: "\2013"; }
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head:focus-visible {
        outline: 2px solid var(--fc-rose-ink);
        outline-offset: 2px;
    }
    /* Schéma « disclosure » (fc-fiche-a11y.js, D106) : le h2 reste un titre et
       contient un vrai <button aria-expanded aria-controls>. Le signe passe dans
       le bouton ; l'en-tête n'est plus focalisable. */
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head--disclosure { display: block; padding-block: 0; }
    .fc-fiche .fc-sec[data-acc] > .fc-sec__head--disclosure::after { content: none; }
    .fc-fiche .fc-sec__toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--fc-space-2);
        width: 100%;
        min-height: 44px;
        padding: var(--fc-space-3) 0;
        margin: 0;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        text-align: left;
        cursor: pointer;
    }
    /* Signe dans un <span aria-hidden> : un ::after posé sur le bouton
       entrerait dans son nom accessible (« Introduction + »). */
    .fc-fiche .fc-sec__sign { flex: none; }
    .fc-fiche .fc-sec__toggle .fc-sec__sign::after {
        content: "+";
        font-family: var(--fc-font-body);
        font-size: 1.5rem;
        line-height: 1;
        color: var(--fc-gold-ink);
    }
    .fc-fiche .fc-sec__toggle[aria-expanded="true"] .fc-sec__sign::after { content: "\2013"; }
    .fc-fiche .fc-sec__toggle:focus-visible {
        outline: 2px solid var(--fc-rose-ink);
        outline-offset: 2px;
    }
    .fc-fiche .fc-sec[data-acc] > .fc-sec__body { display: none; padding-bottom: var(--fc-space-3); }
    .fc-fiche .fc-sec[data-acc][data-open] > .fc-sec__body { display: block; }
}

/* §17 — Galerie de réalisations clientes (D31, patterns/section-galerie-realisations.php).
   Cartes simples : photo + titre + extrait. Volontairement AUCUNE étoile ni
   marquage de notation — cohérent avec le retrait des avis WooCommerce natifs
   (functions.php, aggregateRating retiré du schéma produit). */
.fc-galerie { padding-block: var(--fc-space-3, 32px); }
.fc-galerie__grid.wp-block-query {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--fc-space-3, 24px);
}
.fc-galerie__grid .wp-block-post {
    border: 1px solid var(--fc-border, #EBE0D4);
    border-radius: var(--fc-radius-sm, 10px);
    padding: 14px;
    background: var(--fc-surface, #fff);
}
.fc-galerie__grid .wp-block-post-featured-image img {
    border-radius: var(--fc-radius-sm, 10px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    width: 100%;
}
.fc-galerie__grid h3 {
    font-family: var(--fc-font-display, Georgia, serif);
    margin: 10px 0 4px;
    font-size: 1.05rem;
}
.fc-galerie__grid .wp-block-post-excerpt {
    color: var(--fc-text-soft, #7B6B61);
    font-size: .92rem;
    line-height: 1.5;
}

/* Chatbot FAQ scripté (bulle flottante). Position pensée pour laisser la
   place, à côté et non superposée, au bouton WhatsApp (`.fc-whatsapp`, T14).
   `--fc-faq-chat-lift` est mis à jour par fc-faq-chat.js pour que la bulle
   et le panneau s'arrêtent avant le footer plutôt que de le recouvrir. */
.fc-faq-chat__toggle {
    position: fixed;
    right: var(--fc-space-4, 16px);
    bottom: calc(var(--fc-space-4, 16px) + var(--fc-faq-chat-lift, 0px));
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    gap: var(--fc-space-2, 8px);
    padding: var(--fc-space-2, 8px) var(--fc-space-4, 16px);
    min-height: 44px;
    min-width: 44px; /* zone cliquable garantie, en pose normale comme en --compact */
    background: var(--fc-btn-bg, #B95865);
    color: var(--fc-accent-ink, #fff);
    border: none;
    border-radius: var(--fc-radius-pill, 999px);
    font-family: var(--fc-font-label, inherit);
    font-size: 0.9rem;
    box-shadow: var(--fc-shadow-md, 0 6px 22px rgba(70, 58, 51, .1));
    cursor: pointer;
    transition: padding .35s ease, gap .35s ease, border-radius .35s ease;
}
.fc-faq-chat__label {
    display: inline-block;
    max-width: 12em;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .35s ease, opacity .25s ease;
}
/* Pose compacte : après 30 s sans interaction (fc-faq-chat.js). Le texte
   disparaît visuellement (il reste dans le bouton : c'est son nom
   accessible) et le fond rose se réduit en cercle de 64 px, Fillet centré.
   Cercle exact par construction : icône 36 px de haut × 48 px de large
   (ratio 124/93) + remplissage 14 px / 8 px = 64 × 64 px. Pas de
   ré-agrandissement automatique au survol/toucher : seul le clic, qui ouvre
   le chat, rend la pose normale. */
.fc-faq-chat__toggle--compact {
    justify-content: center;
    gap: 0;
    padding: 14px 8px;
    min-width: 64px;
    min-height: 64px;
    border-radius: 50%;
}
.fc-faq-chat__toggle--compact .fc-faq-chat__icon {
    font-size: 36px;
}
.fc-faq-chat__toggle--compact .fc-faq-chat__label {
    max-width: 0;
    opacity: 0;
}
.fc-faq-chat__toggle:hover,
.fc-faq-chat__toggle:focus-visible {
    filter: brightness(0.94); /* assombrit : éclaircir ferait passer le texte blanc sous 4.5:1 (D104) */
}
.fc-faq-chat__toggle:focus-visible {
    outline: 3px solid var(--fc-text, #463A33);
    outline-offset: 3px;
}
.fc-faq-chat__icon {
    display: block;
    font-size: 4.5rem; /* x5 de la taille d'origine (0.9rem), demandé explicitement */
    line-height: 1;
    transition: font-size .35s ease;
}
@media (prefers-reduced-motion: reduce) {
    .fc-faq-chat__toggle,
    .fc-faq-chat__icon,
    .fc-faq-chat__label {
        transition: none;
    }
}

/* Mascotte du bouton — Fillet, planche en grille `fc-mascot.webp` (cases
   124×93) pilotée case par case en JS (fc-faq-chat.js : durées variables par
   image, impossible en `@keyframes` CSS pur). Par défaut — tant que le chat
   n'a pas été ouvert (D106), et toujours avec `prefers-reduced-motion` — pose
   de repos légère en SVG inline (bobine rose), sans aucune requête de la
   planche (~2,3 Mo). Le JS remplace ce fond par la planche une fois chargée. */
.fc-faq-chat__mascot {
    display: block;
    width: calc(1em * 124 / 93); /* proportions réelles d'une case de la planche (124×93) */
    height: 1em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 124 93'%3E%3Crect x='42' y='12' width='40' height='9' rx='3' fill='%23F6EBD9' stroke='%236E2E43' stroke-width='2'/%3E%3Crect x='47' y='21' width='30' height='52' fill='%23D98A9E' stroke='%236E2E43' stroke-width='2'/%3E%3Cpath d='M47 34h30M47 47h30M47 60h30' stroke='%23B8627A' stroke-width='2'/%3E%3Crect x='42' y='73' width='40' height='9' rx='3' fill='%23F6EBD9' stroke='%236E2E43' stroke-width='2'/%3E%3Ccircle cx='56' cy='41' r='6' fill='%23fff' stroke='%236E2E43' stroke-width='1.5'/%3E%3Ccircle cx='69' cy='41' r='6' fill='%23fff' stroke='%236E2E43' stroke-width='1.5'/%3E%3Ccircle cx='57' cy='42' r='2.5' fill='%23222'/%3E%3Ccircle cx='70' cy='42' r='2.5' fill='%23222'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: 0 0; /* piloté case par case en JS (fc-faq-chat.js) si le mouvement est autorisé */
    transform-origin: 50% 50%;
    animation: fc-faq-chat-mascot-appear .4s ease-out 1 both; /* une seule lecture, < 500 ms */
}

@keyframes fc-faq-chat-mascot-appear {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .fc-faq-chat__mascot {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

.fc-faq-chat__panel {
    position: fixed;
    z-index: 9001;
    right: var(--fc-space-4, 16px);
    left: var(--fc-space-4, 16px);
    bottom: calc(var(--fc-space-4, 16px) + 112px + var(--fc-faq-chat-lift, 0px)); /* dégage le bouton, agrandi (icône x5) */
    height: min(70vh, 480px);
    background: var(--fc-surface, #FFFDFA);
    border: 1px solid var(--fc-border, #EBE0D4);
    border-radius: var(--fc-radius, 10px);
    box-shadow: var(--fc-shadow-md, 0 6px 22px rgba(70, 58, 51, .1));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fc-faq-chat__panel[hidden] {
    display: none; /* une règle d'auteur `display` prime toujours sur le style par défaut de [hidden] */
}
@media (min-width: 480px) {
    .fc-faq-chat__panel {
        left: auto;
        width: 360px;
    }
}

.fc-faq-chat__header {
    display: flex;
    align-items: center;
    gap: var(--fc-space-3, 12px);
    padding: var(--fc-space-3, 12px) var(--fc-space-4, 16px);
    background: var(--fc-btn-bg, #B95865);
    color: var(--fc-accent-ink, #fff);
}
.fc-faq-chat__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: none;
    border-radius: 50%;
    background: var(--fc-accent-ink, #fff);
    color: var(--fc-btn-bg, #B95865);
    font-family: var(--fc-font-display, Georgia, serif);
    font-weight: 600;
    font-size: 0.85rem;
}
.fc-faq-chat__head-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.fc-faq-chat__title {
    font-family: var(--fc-font-display, Georgia, serif);
    font-size: 1.05rem;
    line-height: 1.2;
}
.fc-faq-chat__subtitle {
    font-size: 0.78rem;
}
.fc-faq-chat__close {
    background: none;
    border: none;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.4rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}
/* Coupure du son, dans l'en-tête du panneau : un son qu'on ne peut pas
   couper est pire que pas de son du tout. Réglage mémorisé par visiteur. */
.fc-faq-chat__sound {
    background: none;
    border: none;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.05rem;
    line-height: 1;
    color: inherit;
    cursor: pointer;
}

.fc-faq-chat__body {
    padding: var(--fc-space-4, 16px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--fc-space-3, 12px);
}

/* Historique de conversation : bulles bot (gauche) / utilisateur (droite),
   comme une vraie fenêtre de chat. */
.fc-faq-chat__msg {
    display: flex;
    max-width: 88%;
}
.fc-faq-chat__msg--bot {
    align-self: flex-start;
}
.fc-faq-chat__msg--user {
    align-self: flex-end;
}
.fc-faq-chat__bubble {
    margin: 0;
    padding: var(--fc-space-3, 12px);
    border-radius: var(--fc-radius, 10px);
    line-height: var(--fc-lh-body, 1.6);
    font-size: 0.95rem;
}
.fc-faq-chat__msg--bot .fc-faq-chat__bubble {
    background: var(--fc-surface-2, #F3E7DA);
    color: var(--fc-text, #463A33);
    border-bottom-left-radius: var(--fc-radius-sm, 6px);
}
.fc-faq-chat__msg--user .fc-faq-chat__bubble {
    background: var(--fc-btn-bg, #B95865);
    color: var(--fc-accent-ink, #fff);
    border-bottom-right-radius: var(--fc-radius-sm, 6px);
}

/* Puces de choix rapide (catégories / questions / retour au menu). */
.fc-faq-chat__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--fc-space-2, 8px);
}
.fc-faq-chat__chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--fc-space-2, 8px) var(--fc-space-3, 12px);
    background: var(--fc-surface, #FFFDFA);
    border: 1px solid var(--fc-accent, #BE6470);
    border-radius: var(--fc-radius-pill, 999px);
    color: var(--fc-rose-ink, #A94E58);
    font-size: 0.88rem;
    text-decoration: none;
    cursor: pointer;
}
.fc-faq-chat__chip:hover,
.fc-faq-chat__chip:focus-visible {
    background: var(--fc-btn-bg, #B95865);
    color: var(--fc-accent-ink, #fff);
}
/* Horaires WhatsApp, à titre d'information, sous les puces de contact (T12). */
.fc-faq-chat__note {
    flex-basis: 100%;
    margin: 0;
    color: var(--fc-text-soft, #7B6B61);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Bouton WhatsApp flottant (T14), toujours visible. En bas à GAUCHE : le
   bouton du chatbot, Fillet, la bulle d'invite et le panneau occupent le bas
   à droite — aucun chevauchement, même à 360 px (bouton du chat ≈ 250 px de
   large depuis la droite, celui-ci 56 px depuis la gauche). Suit le même
   décalage au-dessus du footer (`--fc-faq-chat-lift`). Vert WhatsApp foncé
   (#128C7E) : icône blanche à ~4:1, au-delà du 3:1 exigé pour un pictogramme. */
.fc-whatsapp {
    position: fixed;
    left: var(--fc-space-4, 16px);
    bottom: calc(var(--fc-space-4, 16px) + var(--fc-faq-chat-lift, 0px));
    z-index: 9000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px; /* zone tactile > 44×44 px */
    border-radius: 50%;
    background: #128C7E;
    color: #fff;
    box-shadow: var(--fc-shadow-md, 0 6px 22px rgba(70, 58, 51, .1));
    text-decoration: none;
    transition: filter .2s ease;
}
.fc-whatsapp:hover,
.fc-whatsapp:focus-visible {
    color: #fff;
    filter: brightness(1.1);
}
.fc-whatsapp:focus-visible {
    outline: 3px solid var(--fc-text, #463A33);
    outline-offset: 3px;
}
.fc-whatsapp__icon {
    display: block;
    width: 28px;
    height: 28px;
}
@media (prefers-reduced-motion: reduce) {
    .fc-whatsapp {
        transition: none;
    }
}
@media print {
    .fc-whatsapp {
        display: none;
    }
}

/* Bulle d'invite proactive, à côté du bouton. Purement statique : pas de
   suivi, pas d'appel réseau. */
.fc-faq-chat__teaser {
    position: fixed;
    z-index: 8999;
    right: calc(var(--fc-space-4, 16px) + 88px);
    bottom: calc(var(--fc-space-4, 16px) + 24px + var(--fc-faq-chat-lift, 0px));
    max-width: min(240px, calc(100vw - 32px - 88px));
    display: flex;
    align-items: flex-start;
    gap: var(--fc-space-2, 8px);
    padding: var(--fc-space-3, 12px);
    background: var(--fc-surface, #FFFDFA);
    border: 1px solid var(--fc-border, #EBE0D4);
    border-radius: var(--fc-radius, 10px);
    box-shadow: var(--fc-shadow-md, 0 6px 22px rgba(70, 58, 51, .1));
}
.fc-faq-chat__teaser-text {
    flex: 1;
    text-align: left;
    background: none;
    border: none;
    padding: 0;
    color: var(--fc-text, #463A33);
    font-size: 0.9rem;
    line-height: 1.4;
    cursor: pointer;
}
/* Cible de 44×44 px (D106) ; marges négatives pour ne pas grossir la bulle. */
.fc-faq-chat__teaser-close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: calc(-1 * var(--fc-space-3, 12px)) calc(-1 * var(--fc-space-3, 12px)) 0 0;
    padding: 0;
    background: none;
    border: none;
    color: var(--fc-text-soft, #7B6B61);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 479px) {
    .fc-faq-chat__teaser {
        right: var(--fc-space-4, 16px);
        left: var(--fc-space-4, 16px);
        max-width: none;
        bottom: calc(var(--fc-space-4, 16px) + 100px + var(--fc-faq-chat-lift, 0px));
    }
}

/* Recouvrement mobile (audit Lot 9 P2-6, D106) — rendu réel non mesuré.
   1. Pages d'achat (fiche, panier, paiement ; classe posée par functions.php) :
      un champ ou un bouton atteint au clavier ou par ancre s'arrête au-dessus
      de la zone des boutons flottants (≈ 88 px + marge).
   2. fc-faq-chat.js pose `fc-floats-hidden` sur <html> quand un champ de
      saisie a le focus ou qu'un bouton d'achat passe dans le bas de l'écran :
      chat, WhatsApp et bulle s'effacent le temps de la saisie ou de l'achat. */
@media (max-width: 767px) {
    html:has(> body.fc-purchase-page) {
        scroll-padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px));
    }
    .fc-floats-hidden .fc-faq-chat__toggle,
    .fc-floats-hidden .fc-faq-chat__teaser,
    .fc-floats-hidden .fc-whatsapp {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}