/* faf-tools.css — outils flottants « boho ».
   - Sommaire compact : bouton ancré en haut à gauche, sous le logo (le sommaire latéral
     .pagenav n'existe qu'à partir de 1500px, et .faf-art .sb sort de l'écran sous 900px).
   - Retour en haut : en bas à droite, à toutes les largeurs. */

/* ============ Boutons (communs) ============ */
/* !important : le Kit Elementor style tous les <button> (fond clay, radius 0 8px). */
/* Fond CRÈME OPAQUE, bordure et ombre franches : en translucide sur une bordure
   nude très claire, le bouton était crème sur crème et passait inaperçu — le
   défaut le plus visible du dispositif : un outil qu'on ne voit pas n'existe pas.
   L'ombre portée le détache aussi bien du crème que des sections brunes. */
.faf-tools__btn{
  width:48px; height:48px; padding:0; border-radius:50% !important; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:#FFFDF9 !important; border:1px solid rgba(149,99,58,.30) !important; color:#95633A !important;
  box-shadow:0 6px 18px -6px rgba(120,80,45,.42), 0 2px 5px -2px rgba(120,80,45,.30);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, opacity .25s ease, visibility .25s ease;
}
.faf-tools__btn:hover{
  background:#FCF8F1 !important; transform:translateY(-2px);
  box-shadow:0 10px 24px -8px rgba(120,80,45,.5), 0 3px 7px -2px rgba(120,80,45,.35);
}
.faf-tools__btn:focus-visible{ outline:2px solid #58AC9F; outline-offset:3px; }
.faf-tools__btn svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* ============ Sommaire : lanceur sous le logo ============ */
/* Trois traits ne disent pas « sommaire » : cette icône sert de menu partout
   ailleurs sur le web. Le mot accompagne donc le trait dès qu'il y a la place ;
   sous 480px la place manque, l'icône reste seule et l'intitulé accessible
   (aria-label) prend le relais. */
/* Tuile compacte : le trait au-dessus, le mot en dessous, centrés. Serrée —
   c'est un raccourci de navigation, pas un bouton d'action. */
.faf-tools__toc{
  width:auto !important; height:auto !important; border-radius:16px !important;
  flex-direction:column; gap:3px; padding:7px 10px 8px !important;
}
/* Ancrée sous le logo, elle en reprend la largeur exacte. */
.faf-tocnav.is-docked .faf-tools__toc{ width:100% !important; border-radius:20px !important; padding:9px 6px 10px !important; }
.faf-tools__toc:after{
  content:'Sommaire';
  /* Discret : le mot lève l'ambiguïté du trait, il n'a pas à peser autant que
     lui. En capitales espacées, 9px reste lisible sans faire concurrence au
     logo juste au-dessus. */
  font-family:'Raleway',system-ui,sans-serif; font-size:9px; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase; color:#95633A; opacity:.78;
  line-height:1;
}
.faf-tools__toc svg{ width:17px; height:17px; }

/* Sous 600px la carte du logo se réduit fortement : la tuile suit, et le mot
   cède la place au seul trait pour ne pas devenir illisible. */
@media(max-width:600px){
  .faf-tools__toc{ padding:6px 9px 7px !important; border-radius:14px !important; }
  .faf-tools__toc:after{ font-size:8.5px; letter-spacing:.05em; }
}
/* Position : une SECONDE TUILE sous le logo, exactement à sa largeur.
   Deux essais avant celui-ci. Sous le logo au bord gauche de la page, le lanceur
   tombait dans la colonne de texte du hero. À droite du logo, il faisait pièce
   rapportée et cassait l'identité de carte flottante de la marque. Ici il la
   prolonge : même bord gauche, même largeur, même blanc, même ombre — une
   colonne de marque en deux tuiles.

   Bord et largeur sont calés PAR LE SCRIPT sur la carte du logo, dont la taille
   dépend de son SVG et change à chaque palier : une valeur en dur serait fausse
   quelque part. Les valeurs ci-dessous ne servent qu'avant la première mesure. */
/* REPLIÉ : en bas à gauche, en miroir du retour en haut — et jamais dans la
   zone de lecture. Toute position en haut à gauche recouvre quelque chose : c'est
   là que commence le contenu, hero compris. Trois essais l'ont montré (bord de
   page, à droite du logo, sous le logo). En bas, la place est libre par
   construction, et le sommaire y rejoint l'autre outil de navigation.
   Il n'apparaît qu'une fois la page défilée : tant qu'on lit le hero, un
   sommaire ne sert à rien. */
.faf-tocnav{
  position:fixed; left:16px; bottom:18px; top:auto; z-index:70; width:auto;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility .25s ease;
}
.faf-tocnav.is-visible{ opacity:1; visibility:visible; pointer-events:auto; }
.faf-tocnav[hidden]{ display:none; }

/* Pages avec appel à l'action collant en bas : on remonte, comme le retour en haut. */
body:has(.faf-page .sticky-cta) .faf-tocnav{ bottom:80px; }

/* ANCRÉ (grands écrans) : le panneau reprend sa place dans la marge gauche,
   sous le logo — la mesure est faite par le script. */
.faf-tocnav.is-docked{
  bottom:auto; opacity:1; visibility:visible; pointer-events:auto;
}


.faf-toc{
  position:absolute; top:58px; left:0; z-index:2;
  width:min(300px,calc(100vw - 40px)); max-height:min(62vh,440px); overflow:auto;
  background:#FCF8F1; border:1px solid #E4D1BF; border-radius:20px; padding:18px 18px 12px;
  box-shadow:0 30px 60px -34px rgba(120,80,45,.8);
  opacity:0; visibility:hidden;
  /* Ouverture : le panneau se déplie depuis son bord d'ancrage plutôt que de
     surgir. L'échelle part de 96% et l'origine est posée côté tuile, ce qui
     donne le sentiment qu'il sort d'elle. Courbe légèrement rebondie en fin de
     course, et sortie plus rapide que l'entrée — on n'attend jamais une
     fermeture. */
  transform:translateY(6px) scale(.96);
  transform-origin:left bottom;
  transition:opacity .16s ease, visibility .16s ease, transform .16s ease;
}
.faf-toc.is-open{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .3s cubic-bezier(.2,.8,.25,1), visibility .3s, transform .34s cubic-bezier(.2,.9,.25,1.08);
}
/* Ancré, le panneau pend sous la tuile : l'origine passe en haut. */
.faf-tocnav.is-docked .faf-toc{ transform-origin:left top; }

/* Les entrées se révèlent en cascade — un décalage très court suffit à donner
   le sentiment d'un dépliage plutôt que d'un affichage. */
.faf-toc .faf-toc__list a{
  opacity:0; transform:translateY(4px);
  transition:opacity .26s ease, transform .26s cubic-bezier(.2,.8,.25,1);
}
.faf-toc.is-open .faf-toc__list a{ opacity:1; transform:none; }
.faf-toc.is-open .faf-toc__list a:nth-child(1){ transition-delay:.03s }
.faf-toc.is-open .faf-toc__list a:nth-child(2){ transition-delay:.06s }
.faf-toc.is-open .faf-toc__list a:nth-child(3){ transition-delay:.09s }
.faf-toc.is-open .faf-toc__list a:nth-child(4){ transition-delay:.12s }
.faf-toc.is-open .faf-toc__list a:nth-child(5){ transition-delay:.15s }
.faf-toc.is-open .faf-toc__list a:nth-child(6){ transition-delay:.18s }
.faf-toc.is-open .faf-toc__list a:nth-child(n+7){ transition-delay:.21s }

/* Ouverture VERS LE HAUT depuis la tuile repliée, posée en bas d'écran : sous
   elle, le panneau sortait de la fenêtre et restait invisible.
   ⚠️ Cette règle doit venir APRÈS `.faf-toc{ top:58px }` — placée avant, elle
   était simplement reprise par la suivante, à spécificité égale. Le sélecteur
   passe donc par le parent, pour ne plus dépendre de l'ordre du fichier. */
.faf-tocnav .faf-toc{ top:auto; bottom:calc(100% + 10px); }
.faf-tocnav.is-docked .faf-toc{ top:58px; bottom:auto; }

/* Repliée en bas d'écran, la tuile est étroite : le panneau garde sa largeur
   propre et s'aligne sur son bord gauche. */
.faf-tocnav:not(.is-docked) .faf-toc{ width:min(300px, calc(100vw - 32px)); }
.faf-toc__lbl{
  font-family:'Cormorant Garamond',Georgia,serif; font-style:italic; font-weight:500; font-size:23px; color:#C0855A;
  line-height:1; margin:0 0 12px; padding-left:14px;
}
.faf-toc__list{ display:flex; flex-direction:column; gap:2px; }
.faf-toc a{
  font-family:'Raleway',system-ui,sans-serif; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; font-weight:600; color:#A89A8A; text-decoration:none;
  padding:9px 0 9px 14px; border-left:1.5px solid #E4D1BF; transition:color .2s, border-color .2s;
}
.faf-toc a:hover,.faf-toc a.on{ color:#95633A; border-left-color:#58AC9F; }
.faf-toc a:focus-visible{ outline:2px solid #58AC9F; outline-offset:2px; }
/* Sommaire d'article : titres longs → casse normale, plus lisible que la capitale espacée. */
.faf-toc--prose a{ font-size:13px; font-weight:500; letter-spacing:.01em; text-transform:none; line-height:1.45; color:#6E6155; }

.faf-toc__backdrop{
  position:fixed; inset:0; z-index:1; background:rgba(62,54,45,.2);
  opacity:0; visibility:hidden; transition:opacity .22s ease, visibility .22s ease;
}
.faf-toc__backdrop.is-open{ opacity:1; visibility:visible; }

/* ============ Retour en haut : bas à droite ============ */
.faf-tools{ position:fixed; right:16px; bottom:18px; z-index:70; }
/* Pages avec CTA sticky mobile (bas centre) : on remonte le bouton. */
.faf-tools.has-sticky-cta{ bottom:80px; }
/* N'apparaît qu'une fois la page défilée. */
.faf-tools .faf-tools__top{ opacity:0; visibility:hidden; pointer-events:none; }
.faf-tools.is-scrolled .faf-tools__top{ opacity:1; visibility:visible; pointer-events:auto; }

@media(prefers-reduced-motion:reduce){
  .faf-tools__btn,.faf-toc,.faf-toc__backdrop,.faf-toc .faf-toc__list a{ transition:none !important; }
  .faf-toc{ transform:none !important; }
  .faf-toc .faf-toc__list a{ opacity:1 !important; transform:none !important; }
}

/* Impression : aucun outil flottant. */
@media print{ .faf-tools,.faf-tocnav{ display:none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Cadrage des images — utilitaires
   ═══════════════════════════════════════════════════════════════════════════
   POUR LES BLOCS HTML ÉCRITS À LA MAIN — pas pour les widgets Image.

   Sur un widget Image, le menu « Cadrage de l'image » (onglet Contenu) fait la
   même chose, se règle sans taper de classe et se décline par appareil : c'est
   lui qui fait autorité, et il gagne de toute façon la cascade — son sélecteur
   Elementor vaut trois classes contre une ici. Ces utilitaires ne servent que
   là où il n'y a pas de widget : blocs HTML, contenus `faf-page`, gabarits.

   Deux façons de s'en servir :

   1. UN RACCOURCI, pour les onze positions courantes
        faf-cadre-bas-droite, faf-cadre-haut, faf-cadre-tiers-haut…

   2. DEUX AXES, combinables : faf-x-<n> et faf-y-<n>
        faf-x-75 faf-y-25     (75 % vers la droite, 25 % vers le bas)

   Les valeurs sont **0, 25, 75 et 100** — les deux bords et les deux quarts.
   0 = gauche / haut, 100 = droite / bas. Le centre est le défaut : il n'y a
   rien à écrire pour lui, et `faf-y-100` seul cadre en bas sans toucher à
   l'horizontale.

   Toute autre valeur est SANS EFFET, volontairement. Le sélecteur énumère les
   classes qui existent plutôt que de filtrer sur `[class*="faf-x-"]` : avec un
   filtre par sous-chaîne, un `faf-x-70` — valeur qui n'existe pas — matchait la
   règle sans définir `--faf-x`, et recadrait donc l'image au centre en
   `!important`, par-dessus le réglage du widget. Une classe inconnue ne doit
   rien faire, pas défaire.

   Le mécanisme repose sur deux variables CSS héritées, `--faf-x` et `--faf-y` :
   c'est ce qui permet à deux classes indépendantes de composer une seule valeur
   `object-position`, là où deux règles concurrentes s'annuleraient.

   Le défaut reste `centre / centre` : ces classes ne servent qu'aux photos dont
   le sujet est décentré. Elles n'ont d'effet que sur une image recadrée pour
   remplir une forme (`object-fit: cover`) — arches de hero, vignettes de cartes,
   blocs à hauteur imposée. Sur une image affichée en entier, il n'y a rien à
   cadrer. Elles déplacent l'image DANS son cadre, pas le cadre dans la page.

   `!important` est volontaire : ces classes doivent l'emporter sur les réglages
   de cadre (`.faf-hero-photo img`, `.faf-native-arch img`) comme sur les styles
   que le Kit Elementor pose sur les images.
   ─────────────────────────────────────────────────────────────────────────── */

/* Règle unique : toute image portant — ou contenue dans — un élément à classe de
   cadrage compose sa position à partir des deux variables. Les classes sont
   énumérées, jamais filtrées par sous-chaîne : voir l'entête. */
:is(.faf-cadre-haut-gauche, .faf-cadre-haut, .faf-cadre-haut-droite,
    .faf-cadre-gauche, .faf-cadre-centre, .faf-cadre-droite,
    .faf-cadre-bas-gauche, .faf-cadre-bas, .faf-cadre-bas-droite,
    .faf-cadre-tiers-haut, .faf-cadre-tiers-bas,
    .faf-x-0, .faf-x-25, .faf-x-75, .faf-x-100,
    .faf-y-0, .faf-y-25, .faf-y-75, .faf-y-100) img,
img:is(.faf-cadre-haut-gauche, .faf-cadre-haut, .faf-cadre-haut-droite,
       .faf-cadre-gauche, .faf-cadre-centre, .faf-cadre-droite,
       .faf-cadre-bas-gauche, .faf-cadre-bas, .faf-cadre-bas-droite,
       .faf-cadre-tiers-haut, .faf-cadre-tiers-bas,
       .faf-x-0, .faf-x-25, .faf-x-75, .faf-x-100,
       .faf-y-0, .faf-y-25, .faf-y-75, .faf-y-100) {
    object-position: var(--faf-x, 50%) var(--faf-y, 50%) !important;
}

/* ─── Raccourcis : les neuf positions ─── */
.faf-cadre-haut-gauche { --faf-x: 0%; --faf-y: 0%; }
.faf-cadre-haut { --faf-x: 50%; --faf-y: 0%; }
.faf-cadre-haut-droite { --faf-x: 100%; --faf-y: 0%; }
.faf-cadre-gauche { --faf-x: 0%; --faf-y: 50%; }
.faf-cadre-centre { --faf-x: 50%; --faf-y: 50%; }
.faf-cadre-droite { --faf-x: 100%; --faf-y: 50%; }
.faf-cadre-bas-gauche { --faf-x: 0%; --faf-y: 100%; }
.faf-cadre-bas { --faf-x: 50%; --faf-y: 100%; }
.faf-cadre-bas-droite { --faf-x: 100%; --faf-y: 100%; }

/* Réglages fins pour les portraits, où « haut » coupe souvent le front et
   « centre » le menton. Le tiers supérieur cadre le regard. */
.faf-cadre-tiers-haut { --faf-x: 50%; --faf-y: 30%; }
.faf-cadre-tiers-bas  { --faf-x: 50%; --faf-y: 70%; }

/* ─── Axes libres, combinables : faf-x-<n> faf-y-<n> ───
   Quatre valeurs par axe suffisent : les deux bords, et les deux quarts pour
   les cas où le bord coupe trop. Le centre étant le défaut, il n'y a rien à
   écrire pour lui — `faf-y-75` seul décale vers le bas sans toucher au reste.
   Toute autre valeur est inerte : le sélecteur plus haut ne la connaît pas. */
.faf-x-0{--faf-x:0%} .faf-x-25{--faf-x:25%} .faf-x-75{--faf-x:75%} .faf-x-100{--faf-x:100%}
.faf-y-0{--faf-y:0%} .faf-y-25{--faf-y:25%} .faf-y-75{--faf-y:75%} .faf-y-100{--faf-y:100%}