/* faf-blog.css — archives (blog & catégories) façon « Le carnet de Marie » (design boho).
   Scopé sous .faf-blog. Mêmes tokens que les pages services. */
.faf-blog{
  background:var(--paper); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.faf-blog h1,.faf-blog h2,.faf-blog h3{ margin:0; font-weight:400; color:var(--clay-deep); line-height:1.14; }
.faf-blog a{ color:inherit; text-decoration:none; }
.faf-blog .eyebrow{ font-family:var(--script); font-style:italic; font-weight:500; font-size:30px; color:var(--sienna); line-height:1; }
.faf-blog .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; cursor:pointer; }
.faf-blog .btn--primary{ background:var(--teal); color:#fff !important; box-shadow:0 10px 28px -10px rgba(88,172,159,.7); }
.faf-blog .btn--primary:hover{ background:var(--teal-dark); transform:translateY(-2px); }
.faf-blog .orn{ display:inline-flex; align-items:center; gap:14px; color:var(--gold); }
.faf-blog .orn::before,.faf-blog .orn::after{ content:""; height:1px; width:52px; background:linear-gradient(90deg,transparent,var(--gold)); }
.faf-blog .orn::after{ background:linear-gradient(90deg,var(--gold),transparent); }
.faf-blog .orn svg{ width:24px; height:24px; }

/* Masthead — compact : le contenu doit être visible sans scroller. */
.faf-blog .mast{ background:radial-gradient(120% 100% at 80% 0%, var(--nude), var(--sand) 55%, var(--paper)); border-bottom:1px solid var(--line-soft); }
.faf-blog .mast-in{ max-width:var(--wrap); margin:0 auto; padding:26px 26px 30px; text-align:center; }
.faf-blog .mast .orn{ margin-bottom:2px; }
.faf-blog .mast .orn::before,.faf-blog .mast .orn::after{ width:38px; }
.faf-blog .mast .orn svg{ width:19px; height:19px; }
.faf-blog .mast .eyebrow{ font-size:clamp(25px,2.5vw,30px); }
.faf-blog .mast h1{ font-family:var(--display); font-weight:500; font-size:clamp(32px,4.2vw,52px); color:var(--clay-deep); margin:2px 0 9px; }
.faf-blog .mast h1 em{ font-style:italic; color:var(--clay); }
.faf-blog .mast p{ font-size:16.5px; line-height:1.6; color:var(--ink-soft); max-width:620px; margin:0 auto; }

/* Fil d'Ariane du masthead */
.faf-blog .bc{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px;
  font-size:12.5px; letter-spacing:.02em; color:var(--ink-muted); margin:0 0 14px; }
.faf-blog .bc a{ color:var(--ink-soft); transition:color .15s; }
.faf-blog .bc a:hover{ color:var(--clay-deep); }
.faf-blog .bc [aria-current]{ color:var(--clay-deep); font-weight:600; }
.faf-blog .bc .sep{ color:var(--nude-deep); }

/* Pills catégories (sticky sous le header fixe de 96px) */
.faf-blog .cats{ position:sticky; top:96px; z-index:30; background:rgba(251,246,238,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line-soft); }
.faf-blog .cats-in{ max-width:var(--wrap); margin:0 auto; padding:16px 26px; display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* Deux rendus de la même liste : pastilles au large, menu déroulant à l'étroit.
   Le menu est masqué par défaut — un navigateur sans support des media queries
   verra les pastilles, qui restent utilisables, plutôt qu'un menu seul. */
.faf-blog .cats-mobile{ display:none; }
@media(max-width:700px){
    /* La barre est `sticky` : huit pastilles à libellés longs s'y répartissaient
       sur trois à quatre lignes, immobilisées en haut de l'écran. Sur un
       téléphone, cela mangeait près d'un tiers de la hauteur utile, à demeure. */
    .faf-blog .cats-in{ display:none; }
    .faf-blog .cats-mobile{ display:block; padding:10px 16px; }
    .faf-blog .cats-mobile select{
        width:100%; padding:11px 38px 11px 14px; font-size:16px; /* 16px : en dessous, iOS zoome à la mise au point */
        font-family:inherit; color:inherit; line-height:1.3;
        background-color:#fff; border:1px solid var(--line-soft); border-radius:24px;
        -webkit-appearance:none; appearance:none;
        background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
        background-repeat:no-repeat; background-position:right 15px center;
    }
    .faf-blog .cats-mobile select:focus-visible{ outline:2px solid currentColor; outline-offset:2px; }
}
.faf-blog .pill{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:600; letter-spacing:.03em; color:var(--ink-soft); background:var(--cream); border:1px solid var(--nude-deep); border-radius:100px; padding:9px 18px; transition:.2s; }
.faf-blog .pill:hover{ border-color:var(--clay); color:var(--clay-deep); }
.faf-blog .pill.on{ background:var(--teal); color:#fff; border-color:var(--teal); }
/* L'icône hérite de `currentColor` : elle passe donc en blanc sur la pastille
   active sans règle supplémentaire. `flex:0 0 auto` l'empêche d'être écrasée
   quand la barre défile et que les pastilles se serrent. */
.faf-blog .pill-ico{ width:15px; height:15px; flex:0 0 auto; }

.faf-blog .wrap{ max-width:var(--wrap); margin:0 auto; padding:56px 26px 20px; }

/* À la une */
.faf-blog .feat{ display:grid; grid-template-columns:1.15fr 1fr; background:var(--cream); border:1px solid var(--nude-deep); border-radius:28px; overflow:hidden; box-shadow:0 34px 70px -46px rgba(120,80,45,.6); margin-bottom:56px; transition:.3s; }
.faf-blog .feat:hover{ transform:translateY(-4px); box-shadow:0 44px 80px -46px rgba(120,80,45,.6); }
.faf-blog .feat-img{ position:relative; aspect-ratio:6/5; background-size:cover; background-position:center; }
.faf-blog .feat-label{ position:absolute; top:20px; left:20px; background:rgba(252,248,241,.94); color:var(--clay-deep); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; padding:8px 16px; border-radius:100px; }
.faf-blog .feat-body{ padding:44px 46px; display:flex; flex-direction:column; justify-content:center; }
.faf-blog .feat-badge{ align-self:flex-start; font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--teal); margin-bottom:14px; }
.faf-blog .feat-body h2{ font-family:var(--display); font-weight:600; font-size:clamp(30px,3.4vw,42px); color:var(--clay-deep); margin-bottom:16px; line-height:1.1; }
.faf-blog .feat-body p{ font-size:16px; color:var(--ink-soft); margin:0 0 22px; }
.faf-blog .feat-meta{ display:flex; gap:14px; font-size:13px; color:var(--ink-muted); margin-bottom:22px; }
.faf-blog .feat-cta{ font-family:var(--sans); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--clay-deep); display:inline-flex; align-items:center; gap:8px; }

/* Grille de cartes */
.faf-blog .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.faf-blog .card{ display:flex; flex-direction:column; background:var(--cream); border:1px solid var(--nude-deep); border-radius:22px; overflow:hidden; box-shadow:0 22px 48px -42px rgba(120,80,45,.55); transition:.3s; }
.faf-blog .card:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -40px rgba(120,80,45,.55); }
.faf-blog .card-img{ aspect-ratio:6/5; overflow:hidden; position:relative; }
.faf-blog .card-img div{ width:100%; height:100%; background-size:cover; background-position:center; transition:.5s; }
.faf-blog .card:hover .card-img div{ transform:scale(1.05); }
.faf-blog .card-read{ position:absolute; bottom:12px; right:12px; background:rgba(252,248,241,.92); color:var(--ink-soft); font-size:11px; font-weight:600; padding:5px 11px; border-radius:100px; }
.faf-blog .card-body{ padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.faf-blog .card-cat{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; color:var(--teal); margin-bottom:9px; }
.faf-blog .card h3{ font-family:var(--display); font-weight:600; font-size:23px; color:var(--clay-deep); line-height:1.2; margin-bottom:12px; }
.faf-blog .card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:12.5px; color:var(--ink-muted); }
.faf-blog .card-arr{ color:var(--clay); font-size:15px; }

/* Newsletter */
.faf-blog .nl{ max-width:820px; margin:64px auto 0; text-align:center; background:var(--blush); border:1px solid var(--nude-deep); border-radius:26px; padding:48px 32px; }
.faf-blog .nl .orn{ justify-content:center; }
.faf-blog .nl h3{ font-family:var(--display); font-weight:500; font-size:32px; color:var(--clay-deep); margin:8px 0 10px; }
.faf-blog .nl p{ color:var(--ink-soft); margin:0 auto 24px; max-width:440px; }
.faf-blog .nl-form{ display:flex; gap:10px; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.faf-blog .nl-form input{ flex:1; min-width:220px; border:1px solid var(--nude-deep); border-radius:100px; padding:13px 20px; font-family:var(--sans); font-size:14px; background:#fff; color:var(--ink); }

/* Pagination */
.faf-blog .navigation.pagination{ margin:56px auto 20px; }
.faf-blog .nav-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.faf-blog .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; border-radius:100px; border:1px solid var(--nude-deep); background:var(--cream); color:var(--ink-soft); font-size:14px; font-weight:600; }
.faf-blog .page-numbers.current{ background:var(--teal); color:#fff; border-color:var(--teal); }
.faf-blog .page-numbers:hover:not(.current){ border-color:var(--clay); color:var(--clay-deep); }

/* ===== Témoignages : section à part =====
   Pas de pills, pas de « à la une » : la grille démarre plus haut et les cartes
   sont calibrées pour du texte court (visuel plus bas, titre qui respire). */
.faf-blog--tm .wrap{ padding-top:38px; }
.faf-blog--tm .card-img{ aspect-ratio:16/9; }
.faf-blog--tm .card h3{ font-size:21px; font-style:italic; font-weight:500; line-height:1.32; margin-bottom:14px; }
.faf-blog--tm .card-body{ padding:20px 24px 22px; }
.faf-blog--tm .mast .eyebrow{ color:var(--clay); }

@media(max-width:900px){ .faf-blog .grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:900px){ .faf-blog .feat{ grid-template-columns:1fr; } }
@media(max-width:600px){ .faf-blog .grid{ grid-template-columns:1fr; } .faf-blog .eyebrow{ font-size:30px; } }

/* ── Même croisement que sur l'article : le badge du logo, en absolu, recouvre
   le fil d'Ariane du masthead entre 1024 et 1439 px. Voir faf-article.css. ── */
@media (min-width: 901px) and (max-width: 1439px) {
    .faf-blog .mast-in { padding-top: 60px; }
}


/* ── FORMAT DES VISUELS D'ARTICLE — 3:2, à toutes les largeurs ──────────────
   Les cadres étaient dimensionnés en HAUTEUR FIXE (`min-height:380px`,
   `height:200px`) pour une largeur fluide : leur rapport variait donc avec la
   fenêtre — mesuré de 1,40 à 3,52 sur la carte « à la une ». Le sujet des
   photos y était rogné différemment à chaque largeur, sans qu'on puisse ni le
   prévoir ni le cadrer.

   `aspect-ratio` fixe ce rapport une fois pour toutes. Trois bénéfices :
   le rendu devient prévisible, le cadrage se règle une seule fois — et la
   découpe automatique des images (faf-media) redevient exacte, une découpe au
   rapport du cadre n'étant plus re-rognée entre deux points de rupture.

   POURQUOI 6:5, ET PAS UN FORMAT PLUS LARGE. La moitié des images à la une
   (14 sur 32) ne sont pas des photographies mais des COMPOSITIONS reprises de
   Facebook : logo en haut à gauche, question en haut, photo au centre, et le
   titre dans un bandeau collé au bord bas. Chaque zone porte du sens, et le
   bandeau occupe les 27 % inférieurs — un cadre 3:2 en aurait mangé 20 %,
   c'est-à-dire la moitié du titre. Mesuré : 3:2 coupe 161 px sur 788, 4:3 en
   coupe 83, 6:5 en coupe 5.

   Le 6:5 épouse donc le rapport natif de cette famille (1,19) : elles passent
   entières. Les cinq images en 1,50 y perdent 20 % de largeur et les six
   portraits de la hauteur — mais ce sont des photographies, où un recadrage ne
   détruit pas d'information.

   L'ancrage reste au centre : sans rognage sur la famille dominante, le décaler
   ne servirait que les photos, au prix d'un cadrage excentré sur les autres. ── */


/* ── Témoignages : bande fine, mais à rapport figé ──────────────────────────
   Ces cartes ne montrent pas un visuel d'article mais une photo DÉCORATIVE, sur
   laquelle se pose l'initiale de la personne. Rien n'y est à préserver : le 6:5
   des autres cartes triplerait leur hauteur sans rien apporter, et casserait le
   rythme d'une page qui aligne treize témoignages.
   On garde donc la bande, en remplaçant `height:150px` par un rapport : la
   hauteur fixe pour une largeur fluide faisait varier le cadre de 2,24 à 2,71
   selon la fenêtre.

   16:9 PLUTÔT QUE 2:1, ET L'ANCRAGE REMONTÉ. Les photos sont des portraits
   (683×1024) : une bande 2:1 n'en gardait qu'un tiers de la hauteur, et le
   centre géométrique tombait sur la bouche — les visages étaient coupés au
   front et sous le nez. Le 16:9 en garde 37 %, et l'ancrage à 32 % vise le
   tiers supérieur, là où se trouve un visage sur un portrait. ── */

.faf-blog--tm .card-img div{ background-position:center 32%; }


/* ── Carte « à la une » empilée : borner l'image, pas la rogner ─────────────
   Sous 900 px la carte passe sur une colonne, et l'image prend toute la
   largeur : en 6:5, cela donnait 705 px de haut à 900 px de fenêtre — l'image
   écrasait le titre et le chapeau qu'elle est censée introduire.
   On borne sa LARGEUR plutôt que de l'aplatir : le rapport reste 6:5, donc les
   visuels composés gardent leur bandeau de titre, et la hauteur retombe à une
   proportion tenable. Aplatir aurait résolu la hauteur en amputant le contenu —
   c'est exactement l'erreur qu'on vient de corriger sur les cartes. ── */
@media(max-width:900px){
    .faf-blog .feat-img{ max-width:440px; margin:0 auto; width:100%; }
}

/* L'étiquette « À la une » se posait sous le badge du logo, qui déborde du
   bandeau collant sur le contenu — à toutes les largeurs, le badge étant
   seulement plus petit sur téléphone. Elle passe donc à droite partout : la
   restreindre au-dessus de 901 px laissait le défaut sur tablette. */
.faf-blog .feat-label{ left:auto; right:20px; }