/* MISE EN PAGE — les ossatures qui encadrent le contenu.
   Barre de progression, en-tête fixe, menu, tiroir mobile, pied de page, tampon.
   Les composants réutilisables sont dans components.css. */

/* ══ EN-TÊTE ══ */
.progress { position: fixed; inset: 0 auto auto 0; height: 2px; width: 0; background: var(--lime); z-index: 200; }
.hdr { position: fixed; inset: 0 0 auto; z-index: 150; padding-block: 15px; border-bottom: 1px solid transparent;
	transition: padding .3s var(--out), background-color .3s var(--soft-e), border-color .3s var(--soft-e); }
.hdr.stuck { padding-block: 9px; background: rgba(252,253,250,.85);
	backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-color: var(--line); }
.hdr .wrap { display: flex; align-items: center; gap: 26px; }
/* Entre 861 px — où le menu réapparaît — et 940 px, la rangée ne tenait pas :
   le logo était le seul élément à pouvoir rétrécir, et comme sa hauteur est
   imposée, il se retrouvait écrasé horizontalement (86 px de large pour 46 de
   haut au lieu de 132). Le défaut existait déjà avant qu'on agrandisse le logo.
   Deux verrous : le logo ne rétrécit plus, et les intitulés du menu ne se
   coupent plus en deux lignes — c'est ce qui faisait passer l'en-tête à 85 px. */
.brand { flex: none; }
.brand img { height: 46px; width: auto; transition: height .3s var(--out); }
.brand:active { transform: scale(.98); transition: transform .1s var(--out); }
.hdr.stuck .brand img { height: 39px; }
.menu { display: flex; gap: 26px; list-style: none; margin-left: auto; }
.menu a { position: relative; font-size: .93rem; font-weight: 500; color: var(--muted); padding-block: 4px; white-space: nowrap; transition: color .18s var(--soft-e); }
/* La place manque tout juste sur cette plage : le menu s'y resserre, plutôt
   que d'écraser le logo ou de déborder. Au-delà, il reprend sa taille. */
@media (min-width: 861px) and (max-width: 1000px) {
	.hdr .wrap { gap: 16px; }
	.menu { gap: 17px; }
	.menu a { font-size: .88rem; }
}
.menu a::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1.5px; background: var(--lime-deep);
	transform: scaleX(0); transform-origin: left; transition: transform .28s var(--out); }
.menu a[aria-current] { color: var(--ink); }
/* Lien en ligne : un enfoncement par mise à l'échelle demanderait un
   display: inline-block, qui décale la ligne de base de tout le menu.
   L'appui se marque par la couleur, comme le survol. */
.menu a:active { color: var(--lime-deep); }
@media (hover: hover) and (pointer: fine) { .menu a:hover { color: var(--ink); } }
.menu a[aria-current]::after { transform: scaleX(1); }
.hdr-cta { display: flex; align-items: center; gap: 13px; }
.burger { display: none; width: 42px; height: 42px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: none; cursor: pointer; position: relative; }
.burger { transition: background-color .2s var(--soft-e), border-color .2s var(--soft-e), transform .1s var(--out); }
.burger:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .burger:hover { background: var(--soft); border-color: var(--ink); } }
.burger i { position: absolute; left: 11px; right: 11px; height: 1.5px; background: var(--ink); transition: transform .3s var(--out), opacity .2s var(--soft-e); }
.burger i:nth-child(1) { top: 15px; } .burger i:nth-child(2) { top: 20px; } .burger i:nth-child(3) { top: 25px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
/* visibility, et pas seulement translateX : sans elle le tiroir fermé
   reste dans l'ordre de tabulation, et le focus clavier disparaît dans un
   panneau hors écran. Elle bascule en fin de transition, comme pour le voile. */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(360px, 86vw); z-index: 149; background: var(--card);
	border-left: 1px solid var(--line); padding: 96px 32px 40px; display: flex; flex-direction: column;
	transform: translateX(100%); visibility: hidden;
	transition: transform .38s cubic-bezier(.32,.72,0,1), visibility .38s; }
.drawer.open { transform: translateX(0); visibility: visible; box-shadow: -24px 0 60px -34px rgba(22,32,26,.45); }
.drawer a { font-size: 1.08rem; font-weight: 500; padding-block: 14px; border-bottom: 1px solid var(--line);
	transition: color .2s var(--soft-e), transform .1s var(--out); }
.drawer a:active { transform: scale(.99); }
@media (hover: hover) and (pointer: fine) { .drawer a:not(.btn):hover { color: var(--lime-deep); } }
.drawer .btn { margin-top: 24px; justify-content: center; }
/* Logo du tiroir : il remplace celui de l'en-tête, masqué tant que le menu
   est ouvert. Calé sur la marge des liens, et centré sur la croix : 38 px
   du haut avec l'en-tête au repos (15 + 46 / 2), 30 px une fois collé
   (9 + 42 / 2). */
.drawer .d-logo { position: absolute; left: 32px; top: 20px; padding: 0; border: 0; line-height: 0; }
.drawer .d-logo img { height: 36px; width: auto; }
.hdr.stuck ~ .drawer .d-logo { top: 12px; }
.scrim { position: fixed; inset: 0; z-index: 148; background: rgba(22,32,26,.32); opacity: 0; visibility: hidden;
	transition: opacity .3s var(--soft-e), visibility .3s; }
.scrim.open { opacity: 1; visibility: visible; }
/* Menu ouvert : l'en-tête reste au-dessus du tiroir, pour garder le bouton de
   fermeture, mais le logo passait alors par-dessus le panneau, et le fond
   blanc de l'en-tête collé barrait le voile. Les deux s'effacent le temps
   du menu. */
.brand img { transition: height .3s var(--out), opacity .2s var(--soft-e); }
.menu-ouvert .brand { visibility: hidden; }
.menu-ouvert .brand img { opacity: 0; }
.menu-ouvert .hdr.stuck { background: transparent; border-color: transparent;
	-webkit-backdrop-filter: none; backdrop-filter: none; }
@media (max-width: 860px) {
	.menu, .hdr-cta .btn { display: none; }
	/* Le menu porte le margin-left: auto qui repousse tout à droite. Une fois
	   masqué, c'est au bloc d'action de le reprendre : le poser sur le bouton
	   lui-même ne sert à rien, il est seul dans un conteneur à sa taille. */
	.hdr-cta { margin-left: auto; }
	.burger { display: block; }
}

/* ══ RIDEAU DE CHARGEMENT ══
   Repris du site Karine Coaching : le logo, une fiche de paie qui se remplit
   ligne par ligne jusqu'au net à payer, puis le rideau remonte et découvre la
   page. Il n'existe que si le script de tête a posé .ld sur <html>.
   En position absolue et non fixe : un élément fixe en haut de page teinte
   les barres de Safari sur iPhone, qui repassent ensuite au clair d'un coup.
   Plus haut que l'écran, de 240 px et de l'écart entre les hauteurs d'écran
   large et réduite, pour que rien n'apparaisse quand la barre d'adresse se
   replie ; le contenu reste centré sur la partie visible. */
.loader { display: none; }
.ld .loader { position: absolute; top: 0; left: 0; z-index: 400; width: 100%;
	height: calc(100vh + 240px); height: calc(100lvh + 240px);
	padding-bottom: calc(100vh - 100svh + 240px); padding-bottom: calc(100lvh - 100svh + 240px);
	display: grid; place-items: center; background: var(--forest);
	transition: translate .95s cubic-bezier(.76,0,.24,1);
	animation: ldFilet 0s 4.5s forwards; }
@keyframes ldFilet { to { visibility: hidden; } }
html.is-loading { overflow: hidden; }
.loader-in { display: flex; flex-direction: column; align-items: center; gap: 34px;
	transition: translate .8s cubic-bezier(.76,0,.24,1), opacity .5s var(--soft-e); }
/* Le rideau monte d'un seul bloc, bord droit. Une découpe aux coins arrondis
   ouvrait le bas des deux côtés à la fois, et se lisait comme un volet plutôt
   que comme un écran qui s'en va. La page, déjà composée dessous, remonte de
   quelques dizaines de pixels dans le même mouvement. */
.is-out.loader { translate: 0 -100%; }
.ld main { transition: translate 1.15s cubic-bezier(.22,1,.36,1); }
.is-loading main { translate: 0 70px; }
.is-out .loader-in { translate: 0 -60px; opacity: 0; }

.ld-logo { height: 64px; width: auto; animation: ldMonte .7s var(--out) both; }
.fiche { width: 108px; height: auto; overflow: visible; filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
	animation: ldMonte .7s var(--out) .12s both; }
@keyframes ldMonte { from { opacity: 0; translate: 0 14px; } }
.fiche rect, .fiche path { transform-box: fill-box; }
.f-papier { fill: var(--card); }
.f-tete { fill: var(--forest); }
.f-date { fill: var(--soft-2); }
.f-filet { fill: none; stroke: var(--line-2); stroke-width: 1.2; stroke-linecap: round;
	stroke-dasharray: 76; stroke-dashoffset: 76; animation: ldTrait .5s cubic-bezier(.22,1,.36,1) .44s forwards; }
@keyframes ldTrait { to { stroke-dashoffset: 0; } }
.f-ligne .f-l { fill: var(--line-2); }
/* La transparence est dans la couleur, pas dans opacity : l'entrée anime
   opacity jusqu'à 1, et les montants passaient plus foncés avant de pâlir. */
.f-ligne .f-r { fill: rgba(138,147,128,.6); }
/* La fiche s'écrit comme on la lit : de gauche à droite, puis de haut en bas.
   Sur une ligne, le libellé part d'abord, de la gauche ; le montant le suit
   100 ms plus tard depuis le bord droit, comme un chiffre aligné à droite ;
   la ligne suivante démarre 80 ms après, avant que la précédente ait fini
   (chevauchement). Chaque trait arrive
   vite et freine (ralenti en fin de course), avec un dépassement d'un ou deux
   pour cent avant de se poser. L'en-tête passe avant le filet, le filet avant
   les lignes, et le net à payer s'allume pendant que les dernières s'écrivent. */
.fiche .f-l, .fiche .f-r { transform-origin: left center;
	animation: ldBarre .42s cubic-bezier(.2,1.1,.36,1) both;
	animation-delay: calc(.52s + var(--k, 0) * .08s); }
.fiche .f-r { transform-origin: right center; animation-delay: calc(.62s + var(--k, 0) * .08s); }
@keyframes ldBarre { from { transform: scaleX(0); opacity: 0; } 35% { opacity: 1; } }
/* Le net à payer, en dernier, dans la couleur d'accent. */
.f-net .f-fond { fill: var(--lime); transform-origin: center; animation: ldNet .5s cubic-bezier(.2,1.14,.36,1) 1.02s both; }
.f-net .f-l, .f-net .f-r { fill: var(--forest); }
.f-net .f-l { animation-delay: 1.18s; }
.f-net .f-r { animation-delay: 1.28s; }
@keyframes ldNet { from { opacity: 0; transform: scale(.86); } }

/* ══ PIED DE PAGE ══ */
footer { background: var(--forest); color: var(--on-dark-2); padding-top: clamp(3.25rem,5.5vw,4.75rem); }
.f-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr; gap: 38px; padding-bottom: 40px; border-bottom: 1px solid var(--on-dark-3); }
@media (max-width: 860px) { .f-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
/* Sur une seule colonne, le pied faisait mille pixels de haut : douze liens
   empilés qu'on parcourt après avoir déjà tout lu. Les deux listes tiennent
   côte à côte — ce sont des libellés courts — et seuls l'identité et les
   réseaux gardent toute la largeur. */
@media (max-width: 560px) {
	.f-top { grid-template-columns: 1fr 1fr; gap: 28px 22px; }
	.f-top > div:first-child, .f-top > div:last-child { grid-column: 1 / -1; }
}
.f-top img.lg { height: 44px; width: auto; }
.f-top .about { margin-top: 17px; max-width: 32ch; font-size: .92rem; line-height: 1.6; }
footer h2 { line-height: 1.6; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #fff; margin-bottom: 15px; }
footer ul { list-style: none; display: flex; flex-direction: column; gap: 9px; }
footer ul a { display: inline-block; font-size: .91rem; transition: color .2s var(--soft-e), transform .1s var(--out); }
footer ul a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { footer ul a:hover { color: var(--lime); } }
.soc { display: flex; flex-direction: column; gap: 10px; }
.soc a { display: flex; align-items: center; gap: 11px; font-size: .89rem;
	transition: color .2s var(--soft-e), transform .1s var(--out); }
.soc a:active { transform: scale(.99); }
.soc .ic { width: 33px; height: 33px; border-radius: 9px; background: rgba(255,255,255,.07); display: grid; place-items: center; flex: none;
	transition: background-color .2s var(--soft-e), color .2s var(--soft-e); }
@media (hover: hover) and (pointer: fine) {
	.soc a:hover { color: #fff; }
	.soc a:hover .ic { background: var(--lime); color: var(--forest); }
}
.soc .ic svg { width: 16px; height: 16px; }
/* Au doigt, ces liens ne faisaient que 23 px de haut pour 9 px d'écart : on
   vise entre deux lignes plus qu'on ne vise un lien. La hauteur passe à 45 px
   sans bouger l'interligne, en échangeant l'écart contre du rembourrage. */
@media (max-width: 860px) {
	footer ul { gap: 0; }
	footer ul a { padding-block: 11px; }
	.soc { gap: 4px; }
	.soc a { padding-block: 5px; }
}
.f-btm { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-block: 21px; font-size: .82rem; }
/* Dernier numéro de la page, et le seul que l'on voit une fois arrivé en bas :
   il doit s'appeler d'une pression, pas se recopier à la main. */
/* Le lien est en ligne : son rembourrage vertical agrandit la zone tactile
   (17 px de haut sinon) sans rien déplacer autour. */
.f-btm a { padding-block: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
	text-decoration-thickness: 1px; text-decoration-color: var(--on-dark-3);
	transition: color .2s var(--soft-e), text-decoration-color .2s var(--soft-e); }
@media (hover: hover) and (pointer: fine) {
	.f-btm a:hover { color: var(--lime); text-decoration-color: var(--lime); }
}
/* Crédit du site : sa propre ligne, sous le copyright, plus petit et plus
   effacé que les coordonnées de la société. */
.f-btm .credit { flex-basis: 100%; margin-top: -6px; font-size: .74rem; color: var(--on-dark-2); opacity: .75; }
.f-btm .credit a { font-weight: 500; }