/* ==========================================================================
   REFONTE C3 (26/09/2026) — laboutiquedalexis.com
   ui-ux-pro-max invoqué pour : équilibre hero (recherche 0 résultat, retenu le
   repère Square §4 "icône cercle-check + texte" du relevé), grille de choix sans
   orpheline (recherche 0 résultat côté ux, solution flexbox+wrap+justify-center
   retenue par raisonnement propre), cartes auteurs 3 colonnes (recherche ux
   "team cards grid" — résultats hors-sujet, retenu "Text Reflow" : jamais de
   hauteur fixe qui coupe le texte, min-height utilisé à la place).
   Chargé APRÈS pages.css/refonte-c2.css/style.css (wp_enqueue_scripts prio 99) :
   les règles ici gagnent la cascade sans !important, sauf mention contraire.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ACCUEIL — défaut a) Hero déséquilibré : la liste de réassurance remplace
   la ligne de preuves unique et comble le vide sous le H1 (markup ajouté dans
   front-page.php, ceci n'est que le style). Icônes cercle-check au trait, style
   Square (RELEVE-MODELE §4 "icône cercle-check ligne + texte").
   -------------------------------------------------------------------------- */
.lba2-hero-badges{
	list-style:none; margin:1.6rem 0 0; padding:0;
	display:flex; flex-direction:column; gap:.85rem;
}
.lba2-hero-badges li{
	display:flex; align-items:flex-start; gap:.65rem;
	font-family:'Inter',sans-serif; font-weight:500; font-size:15px; color:var(--encre,#1A1A1A);
}
.lba2-hero-badges .lba2-hero-badge-icone{
	flex:none; width:20px; height:20px; margin-top:2px; color:var(--accent,#006AFF);
}

/* --------------------------------------------------------------------------
   2. ACCUEIL — défaut b) formulaire "Autre commerce" seul sur une 3e ligne
   (3+3+1). Passage en flexbox + wrap + justify-content:center : avec 7 choix,
   ça donne naturellement 4 sur la 1re ligne et 3 CENTRÉS sur la 2e — jamais un
   item seul collé à gauche, quel que soit le nombre de choix (généralise aussi
   à l'étape 4 du même formulaire, 5 items -> 4+1 centré, propre).
   .lba-touches--3col est défini dans style.css (hors périmètre C3) : on ne le
   modifie pas, on le SURCHARGE ici pour le contexte hero + toutes les étapes
   du formulaire multi-étapes (même composant, même correction partout).
   -------------------------------------------------------------------------- */
.lba-touches--3col{
	display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
}
.lba-touches--3col .lba-touche{
	flex:0 1 calc(25% - 8px); min-width:118px;
}
@media (max-width:640px){
	.lba-touches--3col .lba-touche{ flex-basis:calc(50% - 6px); }
}

/* --------------------------------------------------------------------------
   3. ACCUEIL — défaut d) "Qui écrit ces guides" : 3 auteurs en 2+1. Passage à
   3 colonnes fixes à 1440 (au lieu de repeat(2,1fr)), empilement propre en
   mobile hérité (media 900px déjà posé par refonte-c2.css, inchangé).
   -------------------------------------------------------------------------- */
.lba2-auteurs-grille{
	grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){
	.lba2-auteurs-grille{ grid-template-columns:1fr; }
}

/* ==========================================================================
   4. RUBRIQUE (archive.php) — /category/caisse-encaissement/ et /actualites/
   ========================================================================== */

/* 4a. "À la une" (.lba-une-rubrique, 1 grand + jusqu'à 2 petits) : le CSS
   d'origine (pages.css) posait grid-column:span 8/4 mais AUCUNE hauteur de
   ligne explicite -> avec 3 cartes, la 3e retombait seule sur une 2e ligne à
   gauche (8 colonnes vides à sa droite) au lieu de s'empiler sous la 2e petite
   carte. Un grand + deux petits empilés dans sa hauteur (comme le "masthead"
   Square + 2 cartes récentes du relevé, bloglist-1440.png) : on AJOUTE
   grid-row:span 2 sur la 1re carte, sans toucher aux span 8/4 déjà posés. */
.lba-une-rubrique{ grid-auto-rows:1fr; align-items:stretch; }
.lba-une-rubrique .lba-carte:first-child{ grid-row:span 2; }
.lba-une-rubrique .lba-carte:first-child .lba-carte-img{ height:100%; }
.lba-une-rubrique .lba-carte:first-child .lba-carte-img img{ height:100%; aspect-ratio:auto; }
@media (max-width:900px){
	.lba-une-rubrique .lba-carte:first-child{ grid-row:auto; }
	.lba-une-rubrique .lba-carte:first-child .lba-carte-img img{ aspect-ratio:4/3; height:auto; }
}

/* 4b. Grille régulière (.lba-grille-rubrique) : grid rigide à 3 colonnes ->
   un reste non multiple de 3 laissait une carte seule collée à gauche. Passage
   en flex + wrap + justify-content:center : le reste (1 ou 2 cartes) se
   retrouve toujours CENTRÉ, jamais orphelin à gauche, quel que soit le total
   d'articles (qui change chaque jour sur ce site). */
.lba-grille-rubrique{
	display:flex; flex-wrap:wrap; justify-content:center; gap:1.5rem;
}
.lba-grille-rubrique .lba-carte{
	flex:0 1 calc(33.333% - 1rem); display:flex; flex-direction:column;
}
@media (max-width:900px){
	.lba-grille-rubrique .lba-carte{ flex-basis:calc(50% - .75rem); }
}
@media (max-width:640px){
	.lba-grille-rubrique .lba-carte{ flex-basis:100%; }
}

/* 4c. Grand hero de rubrique (R-1117) — bande photo auto-détectée et injectée
   par lba_entete_page() (inc/lba-partials.php), gardée à l'identique sur toute
   la pagination (transient, indépendant de $paged). Photo pleine largeur,
   ratio contenu, jamais de texte plaqué dessus (lisibilité, pas de contrainte
   de contraste sur une photo variable). */
.lba-hero-rubrique{
	max-width:1480px; margin:0 auto 2.4rem; padding:0 24px;
}
.lba-hero-rubrique img{
	width:100%; height:clamp(220px,32vw,420px); object-fit:cover; border-radius:var(--rayon-carte,10px); display:block;
}
@media (max-width:640px){
	.lba-hero-rubrique{ padding:0 16px; margin-bottom:1.6rem; }
	.lba-hero-rubrique img{ height:200px; }
}

/* ==========================================================================
   5. PAGES-HUB (page.php, branche générique — 6 pages : operations-boutique,
   visibilite-et-marketing, tech-et-outils, comptabilite-finance,
   sourcing-et-inventaire, relation-client-service). page.php est HORS
   périmètre C3 : tout ce qui suit est un réagencement CSS pur (ordre visuel
   par flexbox + `order`, jamais un changement de DOM) scopé aux 6 IDs de page
   réels (body.page-id-XXX, classe WordPress native, aucune modif de gabarit
   nécessaire pour l'obtenir).
   ========================================================================== */
body.page-id-633 #lba-contenu,
body.page-id-635 #lba-contenu,
body.page-id-559 #lba-contenu,
body.page-id-623 #lba-contenu,
body.page-id-607 #lba-contenu,
body.page-id-587 #lba-contenu{
	display:flex; flex-direction:column;
}
/* 5a. Grille d'articles de la rubrique AVANT le texte pilier (retour Mathias :
   "que du texte, aucune infographie" sur /operations-boutique/) — la grille
   passe order:1, le texte pilier order:2 ; le reste (entête + encart, order
   par défaut 0) ne bouge pas, déjà en tête. */
body.page-id-633 .lba-dossiers-corps, body.page-id-633 .lba-lecture,
body.page-id-635 .lba-dossiers-corps, body.page-id-635 .lba-lecture,
body.page-id-559 .lba-dossiers-corps, body.page-id-559 .lba-lecture,
body.page-id-623 .lba-dossiers-corps, body.page-id-623 .lba-lecture,
body.page-id-607 .lba-dossiers-corps, body.page-id-607 .lba-lecture,
body.page-id-587 .lba-dossiers-corps, body.page-id-587 .lba-lecture{
	order:2;
}
body.page-id-633 .lba-dossiers-corps,
body.page-id-635 .lba-dossiers-corps,
body.page-id-559 .lba-dossiers-corps,
body.page-id-623 .lba-dossiers-corps,
body.page-id-607 .lba-dossiers-corps,
body.page-id-587 .lba-dossiers-corps{
	order:1; background:var(--fond-alt,#F2F2F2); padding-top:2.2rem !important; padding-bottom:2.6rem;
}

/* 5b. Cartes de la grille "Tous les articles de cette rubrique" : le style
   d'origine (.lba-dossiers-lien, pages.css) est une ligne icône+texte partagée
   avec /dossiers/ (page-dossiers.php, hors périmètre C3) — on ne le TOUCHE PAS
   globalement, on le SURCHARGE seulement sur les 6 pages-hub pour obtenir de
   vraies cartes verticales façon Square (vignette large + titre dessous),
   même hauteur par ligne, jamais de carte orpheline (flex+wrap+centre, même
   recette que 4b), et la 1re carte (article le plus récent = get_posts() tri
   par date déjà en place) en grand format ("article à la une"). */
body.page-id-633 .lba-dossiers-grille, body.page-id-635 .lba-dossiers-grille,
body.page-id-559 .lba-dossiers-grille, body.page-id-623 .lba-dossiers-grille,
body.page-id-607 .lba-dossiers-grille, body.page-id-587 .lba-dossiers-grille{
	display:flex; flex-wrap:wrap; justify-content:center; gap:1.4rem;
}
body.page-id-633 .lba-dossiers-lien, body.page-id-635 .lba-dossiers-lien,
body.page-id-559 .lba-dossiers-lien, body.page-id-623 .lba-dossiers-lien,
body.page-id-607 .lba-dossiers-lien, body.page-id-587 .lba-dossiers-lien{
	flex:0 1 calc(33.333% - 1rem); min-width:220px;
	display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; overflow:hidden;
	box-shadow:var(--ombre-carte,0 2px 10px rgba(0,0,0,.16)); border:none;
}
body.page-id-633 .lba-dossiers-vignette, body.page-id-635 .lba-dossiers-vignette,
body.page-id-559 .lba-dossiers-vignette, body.page-id-623 .lba-dossiers-vignette,
body.page-id-607 .lba-dossiers-vignette, body.page-id-587 .lba-dossiers-vignette{
	width:100%; height:150px; border-radius:0;
}
body.page-id-633 .lba-dossiers-titre, body.page-id-635 .lba-dossiers-titre,
body.page-id-559 .lba-dossiers-titre, body.page-id-623 .lba-dossiers-titre,
body.page-id-607 .lba-dossiers-titre, body.page-id-587 .lba-dossiers-titre{
	padding:.9rem 1rem 1.1rem; font-size:15px;
}
/* Article à la une : la 1re carte (la plus récente) en grand format pleine
   largeur, image plus haute — jamais une carte fabriquée, le même article que
   get_posts() place déjà en tête (orderby date DESC, contrat existant). */
body.page-id-633 .lba-dossiers-lien:first-child, body.page-id-635 .lba-dossiers-lien:first-child,
body.page-id-559 .lba-dossiers-lien:first-child, body.page-id-623 .lba-dossiers-lien:first-child,
body.page-id-607 .lba-dossiers-lien:first-child, body.page-id-587 .lba-dossiers-lien:first-child{
	flex-basis:100%;
}
body.page-id-633 .lba-dossiers-lien:first-child .lba-dossiers-vignette,
body.page-id-635 .lba-dossiers-lien:first-child .lba-dossiers-vignette,
body.page-id-559 .lba-dossiers-lien:first-child .lba-dossiers-vignette,
body.page-id-623 .lba-dossiers-lien:first-child .lba-dossiers-vignette,
body.page-id-607 .lba-dossiers-lien:first-child .lba-dossiers-vignette,
body.page-id-587 .lba-dossiers-lien:first-child .lba-dossiers-vignette{
	height:260px;
}
body.page-id-633 .lba-dossiers-lien:first-child .lba-dossiers-titre,
body.page-id-635 .lba-dossiers-lien:first-child .lba-dossiers-titre,
body.page-id-559 .lba-dossiers-lien:first-child .lba-dossiers-titre,
body.page-id-623 .lba-dossiers-lien:first-child .lba-dossiers-titre,
body.page-id-607 .lba-dossiers-lien:first-child .lba-dossiers-titre,
body.page-id-587 .lba-dossiers-lien:first-child .lba-dossiers-titre{
	font-size:20px; font-weight:700;
}
@media (max-width:900px){
	body.page-id-633 .lba-dossiers-lien, body.page-id-635 .lba-dossiers-lien,
	body.page-id-559 .lba-dossiers-lien, body.page-id-623 .lba-dossiers-lien,
	body.page-id-607 .lba-dossiers-lien, body.page-id-587 .lba-dossiers-lien{
		flex-basis:calc(50% - .75rem);
	}
}
@media (max-width:640px){
	body.page-id-633 .lba-dossiers-lien, body.page-id-635 .lba-dossiers-lien,
	body.page-id-559 .lba-dossiers-lien, body.page-id-623 .lba-dossiers-lien,
	body.page-id-607 .lba-dossiers-lien, body.page-id-587 .lba-dossiers-lien,
	body.page-id-633 .lba-dossiers-lien:first-child, body.page-id-635 .lba-dossiers-lien:first-child,
	body.page-id-559 .lba-dossiers-lien:first-child, body.page-id-623 .lba-dossiers-lien:first-child,
	body.page-id-607 .lba-dossiers-lien:first-child, body.page-id-587 .lba-dossiers-lien:first-child{
		flex-basis:100%;
	}
}

/* --------------------------------------------------------------------------
   6. Texte pilier découpé (post_content transformé le 26/09) : sommaire,
   cartes de notions (paragraphes existants, texte inchangé, juste mis en
   cartes) et listes encadrées — remplace le mur de texte centré signalé par
   Mathias sur /operations-boutique/. Générique aux 6 pages-hub (même classes).
   -------------------------------------------------------------------------- */
.lba-lecture{ max-width:760px; margin:0 auto; }
.lba-hub-sommaire{
	background:var(--fond,#FFFFFF); border:1px solid var(--bordure,#D9D9D9); border-radius:10px;
	padding:1.2rem 1.4rem; margin:0 0 2rem;
}
.lba-hub-sommaire-titre{
	margin:0 0 .6rem; font-family:'Inter',sans-serif; font-weight:700; font-size:13px;
	text-transform:uppercase; letter-spacing:1px; color:var(--gris-texte,#737373);
}
.lba-hub-sommaire ol{ margin:0; padding:0 0 0 1.1rem; columns:2; column-gap:1.4rem; }
.lba-hub-sommaire li{ margin-bottom:.35rem; break-inside:avoid; }
.lba-hub-sommaire a{ color:var(--accent,#006AFF); text-decoration:none; font-size:14.5px; }
.lba-hub-sommaire a:hover{ text-decoration:underline; }
@media (max-width:640px){ .lba-hub-sommaire ol{ columns:1; } }

.lba-hub-grille-notions{
	display:flex; flex-wrap:wrap; gap:1.1rem; margin:1.4rem 0 1.8rem;
}
.lba-hub-carte{
	flex:0 1 calc(50% - .55rem); background:var(--fond,#FFFFFF); border:1px solid var(--bordure,#D9D9D9);
	border-radius:10px; padding:1.1rem 1.2rem;
}
.lba-hub-carte-titre{
	margin:0 0 .4rem; font-family:'Inter',sans-serif; font-weight:700; font-size:15px; color:var(--encre,#1A1A1A);
}
.lba-hub-carte-corps{ margin:0; font-size:14.5px; line-height:1.55; color:var(--gris-texte,#737373); }
@media (max-width:640px){ .lba-hub-carte{ flex-basis:100%; } }

.lba-lecture ul.lba-hub-liste-encadree{
	list-style:none; margin:1.2rem 0; padding:1rem 1.2rem; background:var(--fond-alt,#F2F2F2);
	border-radius:10px; display:flex; flex-direction:column; gap:.55rem;
}
.lba-lecture ul.lba-hub-liste-encadree li{
	position:relative; padding-left:1.5rem; font-size:14.5px; line-height:1.5;
}
.lba-lecture ul.lba-hub-liste-encadree li::before{
	content:""; position:absolute; left:0; top:.35em; width:14px; height:14px;
	border:1.5px solid var(--accent,#006AFF); border-radius:4px;
}