/* =========================================================================
   Papeete Coworking — page Domiciliation
   Tout est préfixé .pcw- et scopé sous .pcw-dom pour ne rien casser dans le
   thème codesk (qui charge Bootstrap) ni dans les pages Elementor.
   Direction : fond noir dominant, jaune de marque en accent, blocs jaunes
   arrondis et pastilles-flèches, comme les visuels publicitaires de la marque.
   ========================================================================= */

.pcw-dom {
	--jaune: #fcab0a;
	--jaune-clair: #ffc94d;
	--noir: #0d0d0d;
	--noir-2: #141414;
	--noir-3: #1c1c1c;
	--bord: rgba(255, 255, 255, .12);
	--blanc: #ffffff;
	--gris: #a5a29c;
	--gris-fonce: #6f6c67;

	--r-bloc: 32px;
	--r-carte: 20px;
	--shell: 1240px;

	--police: 'Stem', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

	background: var(--noir);
	color: var(--blanc);
	font-family: var(--police);
	font-size: 17px;
	line-height: 1.65;
	overflow-x: clip; /* garde-fou : aucun débordement horizontal possible */
}

/* Remises à zéro ciblées : le thème impose des styles sur ces éléments.
   Elles passent par :where() pour rester à une spécificité de (0,1,0) — sinon
   `.pcw-dom p` battrait `.pcw-eyebrow` et repeindrait tous les libellés. */
.pcw-dom :where(h1, h2, h3) { font-family: var(--police); color: var(--blanc); margin: 0; line-height: 1.12; letter-spacing: -.02em; }
.pcw-dom :where(p) { margin: 0 0 1.1em; color: var(--gris); }
.pcw-dom :where(p:last-child) { margin-bottom: 0; }
.pcw-dom :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
.pcw-dom :where(img) { display: block; max-width: 100%; height: auto; }
.pcw-dom :where(a) { color: var(--jaune); text-decoration: none; }
.pcw-dom :where(a:hover) { text-decoration: underline; }
.pcw-dom :where(strong) { font-weight: 700; color: var(--blanc); }
.pcw-dom :where(svg) { display: block; }
.pcw-dom :focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; border-radius: 6px; }

.pcw-shell {
	width: 100%;
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 48px);
}

/* ---------- Échelle typographique ---------- */
.pcw-h1 {
	font-size: clamp(34px, 6.4vw, 68px);
	font-weight: 400;
	text-wrap: balance;
}
.pcw-h1 strong { font-weight: 700; }

.pcw-h2 {
	font-size: clamp(27px, 3.9vw, 44px);
	font-weight: 400;
	text-wrap: balance;
}
.pcw-h2 strong { font-weight: 700; }

/* Préfixées par .pcw-dom : ces libellés sont des <p>, et la remise à zéro
   `.pcw-dom p` plus haut est plus spécifique qu'une classe seule. */
.pcw-dom .pcw-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--jaune);
	margin: 0 0 18px;
}
.pcw-dom .pcw-eyebrow--new {
	display: inline-block;
	background: var(--jaune);
	color: var(--noir);
	border-radius: 999px;
	padding: 7px 18px;
	letter-spacing: .1em;
}

.pcw-dom .pcw-lead {
	font-size: clamp(17px, 1.5vw, 20px);
	color: var(--gris);
	max-width: 56ch;
}

/* ---------- Boutons ---------- */
.pcw-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* Les sélecteurs incluent `a` : sans ça, la règle générique `.pcw-dom a`
   ci-dessus l'emporterait en spécificité et repeindrait le texte en jaune —
   invisible sur un bouton jaune. */
.pcw-dom a.pcw-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 15px 30px 15px 20px;
	border-radius: 999px;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid transparent;
	transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pcw-dom a.pcw-btn:hover { text-decoration: none; transform: translateY(-2px); }
.pcw-dom a.pcw-btn span { color: inherit; }

.pcw-dom a.pcw-btn--primary { background: var(--jaune); color: var(--noir); }
.pcw-dom a.pcw-btn--primary:hover { background: var(--jaune-clair); color: var(--noir); }
.pcw-btn--primary .pcw-arrow circle { fill: var(--noir); stroke: none; }
.pcw-btn--primary .pcw-arrow path { stroke: var(--jaune); }

.pcw-dom a.pcw-btn--ghost { background: transparent; color: var(--blanc); border-color: var(--bord); padding-inline: 30px; }
.pcw-dom a.pcw-btn--ghost:hover { border-color: var(--jaune); color: var(--jaune); }

.pcw-dom .pcw-note a.pcw-btn { background: var(--noir); color: var(--blanc); }
.pcw-dom .pcw-note a.pcw-btn:hover { background: #262626; color: var(--blanc); }

/* ---------- Pastille-flèche des listes ---------- */
.pcw-arrow {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: .18em;
}
.pcw-arrow circle { fill: none; stroke: currentColor; stroke-width: 1.5; opacity: .35; }
.pcw-arrow path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Dans un bouton, la pastille est pleine : elle doit être franche, jamais
   atténuée par l'opacité qui sert aux puces de liste. */
.pcw-btn .pcw-arrow circle { opacity: 1; }

.pcw-checklist { display: grid; gap: 16px; }
.pcw-checklist li { display: flex; gap: 13px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.pcw-checklist--dark { margin-top: 30px; color: var(--blanc); }
.pcw-checklist--dark .pcw-arrow circle { stroke: var(--jaune); opacity: 1; }
.pcw-checklist--dark .pcw-arrow path { stroke: var(--jaune); }

/* =========================================================================
   HÉROS
   ========================================================================= */
.pcw-hero { position: relative; isolation: isolate; padding: clamp(64px, 11vw, 130px) 0 clamp(56px, 8vw, 96px); }

.pcw-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pcw-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 25% 50%; }
.pcw-hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg, rgba(13, 13, 13, .55) 0%, rgba(13, 13, 13, .82) 45%, rgba(13, 13, 13, .96) 78%),
		linear-gradient(to bottom, rgba(13, 13, 13, .7) 0%, transparent 22%, rgba(13, 13, 13, .95) 100%);
}

.pcw-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

.pcw-hero__copy .pcw-lead { margin-top: 26px; }

/* Le bloc jaune arrondi repris des visuels publicitaires. */
.pcw-hero__card {
	background: var(--jaune);
	color: var(--noir);
	border-radius: var(--r-bloc);
	padding: clamp(28px, 3.4vw, 42px);
	box-shadow: 0 26px 70px rgba(0, 0, 0, .5);
}
.pcw-hero__card .pcw-checklist li { font-weight: 500; }
.pcw-hero__card .pcw-arrow circle { fill: var(--noir); stroke: none; opacity: 1; }
.pcw-hero__card .pcw-arrow path { stroke: var(--jaune); }

/* =========================================================================
   BANDEAU DE REPÈRES
   ========================================================================= */
.pcw-facts { border-block: 1px solid var(--bord); background: var(--noir-2); }
.pcw-facts__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	padding: clamp(32px, 3.6vw, 46px) 0;
}
.pcw-facts__grid li { display: flex; gap: 16px; align-items: flex-start; }

/* Pastille jaune pleine, reprise des puces des visuels publicitaires.
   `flex` plutôt que `grid` : le centrage tient même si une règle extérieure
   venait à modifier le mode de disposition. */
.pcw-facts__badge {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	border-radius: 50%;
	background: var(--jaune);
}
.pcw-icon { width: 23px; height: 23px; fill: none; stroke: var(--noir); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pcw-facts__grid b {
	display: block;
	font-size: clamp(16px, 1.35vw, 18px);
	font-weight: 700;
	color: var(--blanc);
	line-height: 1.3;
	margin-bottom: 6px;
}
/* Ciblé sur la classe, jamais sur `span` : la pastille en est un elle aussi, et
   une règle `.pcw-facts__grid span` la repassait en `display: block`, ce qui
   annulait le centrage de son icône. */
.pcw-facts__text { font-size: 14.5px; line-height: 1.5; color: var(--gris); display: block; }

/* =========================================================================
   SECTIONS GÉNÉRIQUES
   ========================================================================= */
.pcw-section { padding: clamp(64px, 9vw, 120px) 0; }
.pcw-section--alt { background: var(--noir-2); }

.pcw-head { max-width: 62ch; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.pcw-head--wide { max-width: 74ch; }
.pcw-head--left { text-align: left; margin-inline: 0; }
.pcw-head .pcw-lead { margin: 22px auto 0; }
.pcw-head .pcw-h2 + p { margin-top: 20px; }
.pcw-head--left .pcw-lead { margin-inline: 0; }

/* Deux colonnes image / texte */
.pcw-split {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.pcw-split--reverse .pcw-split__media { order: 2; }
.pcw-split__media img { border-radius: var(--r-bloc); width: 100%; }

/* =========================================================================
   CARTES DE L'OFFRE
   ========================================================================= */
.pcw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.pcw-card {
	background: var(--noir-3);
	border: 1px solid var(--bord);
	border-radius: var(--r-carte);
	padding: clamp(24px, 2.6vw, 34px);
	transition: border-color .2s ease, transform .2s ease;
}
.pcw-card:hover { border-color: rgba(252, 171, 10, .5); transform: translateY(-3px); }
.pcw-card h3 { font-size: 19px; font-weight: 700; margin-bottom: 12px; }
.pcw-card p { font-size: 15.5px; line-height: 1.6; }

/* =========================================================================
   GESTION ADMINISTRATIVE
   ========================================================================= */
.pcw-admin { position: relative; }
.pcw-admin .pcw-head { text-align: center; }

.pcw-admin__body {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: clamp(32px, 4.5vw, 64px);
	align-items: start;
}

.pcw-steps { display: grid; gap: 4px; }
.pcw-steps li {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr);
	gap: 20px;
	padding: 26px 0;
	border-bottom: 1px solid var(--bord);
}
.pcw-steps li:first-child { padding-top: 0; }
.pcw-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.pcw-steps__num {
	font-size: 15px;
	font-weight: 700;
	color: var(--jaune);
	font-variant-numeric: tabular-nums;
	letter-spacing: .06em;
	padding-top: 3px;
}
.pcw-steps h3 { font-size: 19.5px; font-weight: 700; margin-bottom: 9px; }
.pcw-steps p { font-size: 15.5px; line-height: 1.62; }

.pcw-admin__aside { display: grid; gap: 20px; position: sticky; top: 30px; }

/* Le cadre filaire à grand coin arrondi des visuels publicitaires. */
.pcw-frame { margin: 0; position: relative; padding: 12px; }
.pcw-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, .28);
	border-radius: 8px 8px 8px 56px;
	pointer-events: none;
}
.pcw-frame img { border-radius: 4px 4px 4px 48px; width: 100%; }

.pcw-note {
	background: var(--jaune);
	color: var(--noir);
	border-radius: var(--r-bloc);
	padding: clamp(26px, 3vw, 36px);
}
.pcw-dom .pcw-note__kicker {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(0, 0, 0, .62);
	margin-bottom: 12px;
}
.pcw-dom .pcw-note p { color: rgba(0, 0, 0, .82); font-size: 16px; }
.pcw-note .pcw-btn { margin-top: 22px; }
.pcw-note .pcw-btn .pcw-arrow circle { fill: var(--jaune); stroke: none; }
.pcw-note .pcw-btn .pcw-arrow path { stroke: var(--noir); }

/* =========================================================================
   DÉROULÉ EN 4 ÉTAPES
   ========================================================================= */
.pcw-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px; }
.pcw-flow li { padding: clamp(24px, 2.6vw, 34px); background: var(--noir-3); position: relative; }
.pcw-flow li:first-child { border-radius: var(--r-carte) 0 0 var(--r-carte); }
.pcw-flow li:last-child { border-radius: 0 var(--r-carte) var(--r-carte) 0; }
/* Pastille jaune pleine plutôt qu'un chiffre en filigrane : le numéro d'étape
   porte une information de séquence, il doit se lire. */
.pcw-flow__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--jaune);
	color: var(--noir);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	line-height: 1;
	margin-bottom: 20px;
}
.pcw-flow h3 { font-size: 18.5px; font-weight: 700; margin-bottom: 10px; }
.pcw-flow p { font-size: 15px; line-height: 1.6; }

/* =========================================================================
   POUR QUI
   ========================================================================= */
.pcw-who { display: grid; gap: 22px; margin-top: 34px; }
.pcw-who li { padding-left: 20px; border-left: 2px solid var(--jaune); }
.pcw-who h3 { font-size: 18px; font-weight: 700; margin-bottom: 7px; }
.pcw-who p { font-size: 15.5px; line-height: 1.6; }

/* =========================================================================
   FAQ
   ========================================================================= */
.pcw-faq {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.pcw-faq .pcw-head { margin-bottom: 0; }

/* Occupe le vide sous le titre de la colonne de gauche. */
.pcw-faq__media { margin: 36px 0 0; }
.pcw-faq__media img { border-radius: var(--r-carte); width: 100%; }
.pcw-faq__media figcaption { font-size: 14px; line-height: 1.5; color: var(--gris-fonce); margin-top: 12px; max-width: 34ch; }

.pcw-faq__list { display: grid; }
.pcw-faq details { border-bottom: 1px solid var(--bord); }
.pcw-faq details:first-child { border-top: 1px solid var(--bord); }

.pcw-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	font-size: 17.5px;
	font-weight: 500;
	color: var(--blanc);
	list-style: none;
	transition: color .18s ease;
}
.pcw-faq summary::-webkit-details-marker { display: none; }
.pcw-faq summary:hover { color: var(--jaune); }

.pcw-faq summary svg {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	padding: 8px;
	border: 1px solid var(--bord);
	border-radius: 50%;
	fill: none;
	stroke: var(--jaune);
	stroke-width: 2;
	stroke-linecap: round;
	transition: transform .25s ease, background-color .25s ease;
}
.pcw-faq details[open] summary svg { transform: rotate(45deg); background: rgba(252, 171, 10, .14); }

.pcw-faq__answer { padding: 0 0 24px; max-width: 62ch; }
.pcw-faq__answer p { font-size: 16px; }

/* =========================================================================
   APPEL FINAL
   ========================================================================= */
.pcw-cta { position: relative; isolation: isolate; padding: clamp(64px, 9vw, 120px) 0; }
.pcw-cta__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pcw-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.pcw-cta__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(85deg, rgba(13, 13, 13, .95) 30%, rgba(13, 13, 13, .78) 100%);
}
.pcw-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: clamp(36px, 5vw, 72px);
	align-items: center;
}

.pcw-contact { display: grid; gap: 2px; background: var(--bord); border-radius: var(--r-carte); overflow: hidden; }
.pcw-contact li { background: var(--noir-2); padding: 20px 26px; }
.pcw-contact span {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gris-fonce);
	margin-bottom: 6px;
}
.pcw-contact b { font-size: 16.5px; font-weight: 500; color: var(--blanc); line-height: 1.45; }
.pcw-contact a { color: var(--blanc); }
.pcw-contact a:hover { color: var(--jaune); }

/* =========================================================================
   APPARITION AU DÉFILEMENT (le JS ajoute .is-in)
   ========================================================================= */
.pcw-dom [data-reveal] { opacity: 0; transform: translateY(22px); }
.pcw-dom [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1); }

@media (prefers-reduced-motion: reduce) {
	.pcw-dom [data-reveal],
	.pcw-dom [data-reveal].is-in { opacity: 1; transform: none; transition: none; }
	.pcw-btn:hover,
	.pcw-card:hover { transform: none; }
}

/* =========================================================================
   ADAPTATIONS — testées à 320, 360, 390, 430, 768, 1024, 1280 et 1440 px
   ========================================================================= */
@media (max-width: 1024px) {
	.pcw-hero__inner,
	.pcw-admin__body,
	.pcw-cta__inner,
	.pcw-faq { grid-template-columns: minmax(0, 1fr); }

	.pcw-split { grid-template-columns: minmax(0, 1fr); }
	.pcw-split--reverse .pcw-split__media { order: 0; }

	.pcw-admin__aside { position: static; }
	.pcw-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.pcw-flow li,
	.pcw-flow li:first-child,
	.pcw-flow li:last-child { border-radius: var(--r-carte); }
	.pcw-flow { gap: 12px; }

	.pcw-hero__bg img { object-position: 30% 50%; }
}

@media (max-width: 620px) {
	.pcw-dom { font-size: 16px; }
	.pcw-facts__grid { grid-template-columns: minmax(0, 1fr); }
	.pcw-facts__badge { width: 40px; height: 40px; }
	.pcw-icon { width: 20px; height: 20px; }

	.pcw-steps li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.pcw-steps__num { padding-top: 0; }

	.pcw-actions { gap: 10px; }
	.pcw-btn { width: 100%; justify-content: center; padding-inline: 22px; }

	.pcw-head { text-align: left; margin-inline: 0; }
	.pcw-head .pcw-lead { margin-inline: 0; }
	.pcw-eyebrow--new { padding: 6px 14px; }

	.pcw-frame::before { border-radius: 8px 8px 8px 40px; }
	.pcw-frame img { border-radius: 4px 4px 4px 34px; }

	.pcw-contact li { padding: 17px 20px; }
}