/* Ajustements d'interface communs à tout le site (inc/ux.php). */

/* Colonnes d'introduction qui accompagnent le défilement (ordinateur, écran assez haut) :
   méthode, FAQ, « ce qui est inclus », pôles de la page Expertise, avis Google. */
@media (min-width: 1024px) and (min-height: 700px) {
	.method__aside,
	.faq__aside,
	.included__aside,
	.hub-pole__head,
	.pole-about__grid > .section-head,
	.reviews__intro {
		position: sticky;
		top: calc(var(--header-h, 4.75rem) + 2rem);
	}
}

/* Pôles (accueil) : chaque carte se dévoile à mesure qu'elle entre par la droite (assets/ux.js). */
.poles--apparition .pole__card { will-change: opacity, transform; transform-origin: 0 50%; }

/* Outils & partenaires : logos plus grands. */
.marquee--tools .tool-logo { zoom: 1.45; }

/* Formulaires : compteur du message. */
.field__compteur { margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--ink-soft); text-align: right; }
.field__compteur.is-limite { color: var(--error, #C4262E); font-weight: 600; }


/* Frise « Derrière chaque projet » (page L'agence) : reprend la méthode de l'accueil (.steps) ;
   l'anneau des points prend la couleur du fond de la section pour couper la ligne proprement. */
.founder .step__dot { box-shadow: 0 0 0 .375rem var(--founder-fond, var(--sable)); }
.steps--frise { margin-top: var(--s-5); }

/* Repères (page L'agence) : la note Google en grand, avec le logo. */
.figure--google dd { display: inline-flex; align-items: center; gap: .6rem; }
.figure__google { display: inline-grid; place-items: center; width: clamp(2.6rem, 4vw, 3.4rem); height: clamp(2.6rem, 4vw, 3.4rem); border-radius: 50%; background: var(--blanc); box-shadow: 0 6px 18px -8px rgba(6, 18, 53, .25); }
.figure__google .google-g { width: 62%; height: 62%; }


/* Réalisations (accueil, « Travaux choisis ») : arrivée en rideau, projet par projet (assets/ux.js).
   La ligne de séparation se dessine de gauche à droite, le nom monte depuis un masque,
   puis l'étiquette et la flèche apparaissent. */
.works--rideau .work { position: relative; animation: none; border-bottom-color: transparent; }
.works--rideau .work::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--line);
	transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.1s var(--ease-out);
}
.works--rideau .work__num,
.works--rideau .work__meta,
.works--rideau .work__arrow { opacity: 0; transform: translateY(.75rem); transition: opacity .7s var(--ease-out), transform .8s var(--ease-out); }
.works--rideau .work__name { clip-path: inset(0 0 100% 0); transform: translateY(45%); transition: clip-path 1s .25s var(--ease-out), transform 1s .25s var(--ease-out); }
.works--rideau .work__num { transition-delay: .15s; }
.works--rideau .work__meta { transition-delay: .6s; }
.works--rideau .work__arrow { transition-delay: .75s; }
.works--rideau .work.is-arrive::after { transform: scaleX(1); }
.works--rideau .work.is-arrive .work__name { clip-path: inset(-10% -2% -20% -2%); transform: none; }
.works--rideau .work.is-arrive :is(.work__num, .work__meta, .work__arrow) { opacity: 1; transform: none; }
/* Une fois arrivés, le survol garde ses propres transitions. */
.works--rideau .work.is-pose :is(.work__num, .work__meta, .work__arrow, .work__name) { transition-delay: 0s; }
.works--rideau .work.is-pose .work__arrow { transition: transform var(--dur-s) var(--ease-out), background-color var(--dur-s), color var(--dur-s), border-color var(--dur-s); }

/* ==========================================================================
   Page Expertise : barre des pôles, trois mises en page distinctes, survols fluides.
   ========================================================================== */

/* Barre des pôles : à cheval entre l'en-tête et le pôle 01 (plus de bande blanche),
   puis accrochée sous l'en-tête pendant la lecture, avec le pôle en cours mis en avant. */
.pole-nav { margin-top: -1.625rem; margin-bottom: -1.625rem; }
.pole-nav__link { transition: background-color .35s var(--ease-out), color .35s, box-shadow .35s; }
.pole-nav__link[aria-current="true"] { background: var(--nuit); color: var(--blanc); }
.pole-nav__link[aria-current="true"] .icon { color: var(--boreal); }
@media (min-width: 768px) {
	.pole-nav { position: sticky; top: calc(var(--header-h, 4.75rem) + .75rem); z-index: 20; pointer-events: none; }
	.pole-nav__link { pointer-events: auto; }
}
.hub-pole { scroll-margin-top: calc(var(--header-h, 4.75rem) + 5rem); }
.hub-pole--creation { padding-top: calc(var(--section) + 1.625rem); }

/* Cartes de service : plus de décalage brusque au survol ; la carte se soulève doucement
   et la flèche avance. */
.hub-card { transition: box-shadow .5s var(--ease-out), border-color .5s var(--ease-out), background-color .5s var(--ease-out); }
.hub-card:hover { transform: none; box-shadow: var(--shadow-m); }
.hub-pole--creation .hub-card:hover { background: rgba(241, 240, 255, .1); border-color: rgba(48, 213, 200, .45); }
.hub-card__more .icon { transition: transform .5s var(--ease-out); }
.hub-card:hover .hub-card__more .icon,
.hub-card:focus-visible .hub-card__more .icon { transform: translateX(.35rem); }

/* Les trois pôles alternent : présentation à gauche (01, 03) ou à droite (02). */
@media (min-width: 1024px) {
	.hub-pole--visibilite .hub-pole__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.hub-pole--visibilite .hub-pole__head { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
	.hub-card, .hub-card__more .icon { transition: none; }
}

/* ==========================================================================
   Envoi d'un formulaire réussi : voile « Demande envoyée » (assets/merci.js).
   1. le voile s'ouvre en cercle depuis le bouton d'envoi ; 2. l'anneau puis la coche se dessinent ;
   3. le titre et le message apparaissent ; 4. la page Merci reprend le même voile et l'efface.
   ========================================================================== */
html.has-envoi-voile { overflow: hidden; }
.envoi-voile,
.merci-voile { color: #fff; text-align: center; }
.envoi-voile {
	position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
	background: radial-gradient(40rem 30rem at 50% 40%, rgba(78, 108, 255, .28), transparent 70%), var(--nuit-950);
	clip-path: circle(0 at var(--x, 50%) var(--y, 50%));
	transition: clip-path .75s cubic-bezier(.65, 0, .35, 1);
}
.envoi-voile.is-ouvert { clip-path: circle(150vmax at var(--x, 50%) var(--y, 50%)); }
.envoi-voile__contenu { display: grid; justify-items: center; gap: .6rem; padding: 1.5rem; }
.envoi-voile__coche { width: 5.5rem; height: 5.5rem; margin-bottom: .6rem; overflow: visible; }
.envoi-voile__anneau { fill: none; stroke: #30D5C8; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; filter: drop-shadow(0 0 10px rgba(48, 213, 200, .6)); }
.envoi-voile__trait { fill: none; stroke: #fff; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.envoi-voile__titre { margin: 0; font: 800 clamp(1.6rem, 3.5vw, 2.4rem) / 1.1 var(--f-display); letter-spacing: -.02em; }
.envoi-voile__texte { margin: 0; font-size: 1.05rem; color: var(--on-dark-soft); }

/* Étapes, dans le voile du formulaire uniquement (celui de la page Merci est déjà « terminé »). */
.envoi-voile .envoi-voile__anneau,
.envoi-voile .envoi-voile__trait { stroke-dasharray: 1; stroke-dashoffset: 1; }
.envoi-voile .envoi-voile__titre,
.envoi-voile .envoi-voile__texte { opacity: 0; transform: translateY(12px); }
.envoi-voile.is-ouvert .envoi-voile__anneau { animation: envoi-trace .65s .6s cubic-bezier(.65, 0, .35, 1) forwards; }
.envoi-voile.is-ouvert .envoi-voile__trait { animation: envoi-trace .4s 1.15s var(--ease-out) forwards; }
.envoi-voile.is-ouvert .envoi-voile__titre { animation: envoi-texte .5s 1.35s var(--ease-out) forwards; }
.envoi-voile.is-ouvert .envoi-voile__texte { animation: envoi-texte .5s 1.5s var(--ease-out) forwards; }
@keyframes envoi-trace { to { stroke-dashoffset: 0; } }
@keyframes envoi-texte { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.envoi-voile { clip-path: none; opacity: 0; transition: opacity .25s; }
	.envoi-voile.is-ouvert { opacity: 1; }
	.envoi-voile .envoi-voile__anneau, .envoi-voile .envoi-voile__trait { stroke-dashoffset: 0; animation: none; }
	.envoi-voile .envoi-voile__titre, .envoi-voile .envoi-voile__texte { opacity: 1; transform: none; animation: none; }
}

/* Réalisations : parallaxe douce (assets/ux.js) ; la grille garde de la marge pour la colonne décalée. */
.is-parallaxe > li { will-change: transform; }
@media (min-width: 1024px) {
	.is-parallaxe { padding-block: 2.5rem; }
}

/* Réalisations : le filtre tient sur une ligne sur grand écran, comme celui du Blog
   (types de site à gauche, nombre de réalisations à droite). */
.page--realisations .filters { margin-bottom: var(--s-6); }
.page--realisations .filters .type-filter__count { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-soft); white-space: nowrap; }
@media (min-width: 1024px) {
	.page--realisations .filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
	.page--realisations .filters__group { flex-wrap: nowrap; }
}

/* Blog : le filtre tient sur une ligne sur grand écran (thèmes à gauche, recherche à droite). */
@media (min-width: 1024px) {
	.blog .filters { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }
	.blog .filters__group { flex-wrap: nowrap; min-width: 0; }
	.blog .filters > .search-form { flex: 0 1 26rem; min-width: 18rem; margin: 0; }
}