/* Immo TK — « Carnet d'agence ». Rules, grids and page components; colours and type come from theme.json. */
html{font-size:100%}
:root{--immotk-rule:1px solid var(--wp--preset--color--anthracite);--immotk-rule-soft:1px solid var(--wp--preset--color--rule)}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:where(p,li){text-wrap:pretty}
:where(h1,h2,h3){text-wrap:balance}
img{max-width:100%;height:auto}
.immotk-kicker{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--wp--preset--color--gold-text);font-weight:500;margin:0}
/* Links: never underlined. Running text: gold-text + 600 (theme.json). Action links: 600, spaced, followed by the line arrow that nudges right */
a,a:hover{text-decoration:none}
.immotk-link-arrow,.immotk-kicker a{color:var(--wp--preset--color--gold-text);font-weight:600;letter-spacing:.02em;text-decoration:none}
.immotk-link-arrow::after,.immotk-kicker a::after{content:"";display:inline-block;width:1.1em;height:1.1em;margin-left:.35em;vertical-align:-.2em;background-color:currentColor;-webkit-mask:url(icons/arrow.svg) center/contain no-repeat;mask:url(icons/arrow.svg) center/contain no-repeat;transition:transform .15s ease-out}
.immotk-link-arrow:hover::after,.immotk-link-arrow:focus-visible::after,.immotk-kicker a:hover::after,.immotk-kicker a:focus-visible::after,.immotk-mission:hover .immotk-link-arrow::after{transform:translateX(4px)}
.immotk-link-arrow:hover,.immotk-kicker a:hover{color:var(--wp--preset--color--anthracite)}
/* Keyboard focus, every link and button */
a:focus-visible,button:focus-visible,.wp-element-button:focus-visible,input[type=submit]:focus-visible{outline:2px solid var(--wp--preset--color--gold-text);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.immotk-link-arrow::after,.immotk-kicker a::after{transition:none}}
.wp-block-button.is-style-outline>.wp-block-button__link{background:transparent;color:var(--wp--preset--color--anthracite);border:1px solid var(--wp--preset--color--anthracite)}

/* Header */
.immotk-header{border-bottom:var(--immotk-rule);background:var(--wp--preset--color--cream)}
.immotk-header .wp-block-site-logo img{width:auto;max-height:52px}
.immotk-header .wp-block-navigation a{text-decoration:none;font-weight:inherit;color:var(--wp--preset--color--anthracite)}
.immotk-header .wp-block-navigation a:hover{color:var(--wp--preset--color--gold-text)}

/* Home: hero. Full bleed; the text column starts on the 1200px wide size like every other section, the photo bleeds to the right edge */
.immotk-hero{--immotk-gutter:max(var(--wp--style--root--padding-left,1.25rem),calc((100% - 1200px) / 2));display:grid;grid-template-columns:var(--immotk-gutter) minmax(0,1fr) minmax(0,1fr);border-bottom:var(--immotk-rule)}
.immotk-hero__text{grid-column:2;padding:clamp(2rem,5vw,4.5rem) var(--wp--preset--spacing--40) clamp(2rem,5vw,4.5rem) 0;border-right:var(--immotk-rule);display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.immotk-hero__text h1{margin:.75rem 0 1rem}
.immotk-hero__photo{grid-column:3;margin:0;min-height:420px}
.immotk-hero__photo img{width:100%;height:100%;object-fit:cover;display:block}

/* Home: the 4 missions. A full-width row of 4 equal cells between two anthracite rules, separated by soft rules.
   Each cell stacks three parts: a flat anthracite band with the title, the photo edge to edge (no veil), a flat gold band
   with the line and « Découvrir » in black on the luminous gold-band. The whole cell is the « Découvrir » link */
.wp-block-group.immotk-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:0;border-bottom:var(--immotk-rule)}
.immotk-hero~.wp-block-group.immotk-cols{margin-top:0}
.immotk-cols>*{margin:0}
.wp-block-group.immotk-mission{position:relative;display:flex;flex-direction:column;background:var(--wp--preset--color--anthracite)}
.wp-block-group.immotk-mission+.immotk-mission{border-left:var(--immotk-rule-soft)}
.immotk-mission>*,.immotk-mission__band>*{margin:0}
.immotk-mission .immotk-mission__title{background:var(--wp--preset--color--anthracite);color:var(--wp--preset--color--white);line-height:1.2;padding:.5rem 1rem}
.immotk-mission .immotk-mission__photo{flex:1 1 auto;position:relative;min-height:0;aspect-ratio:3/2}
.immotk-mission .immotk-mission__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.immotk-mission .immotk-mission__band{background:var(--wp--preset--color--gold-band);color:#000;padding:.4rem 1rem .45rem}
.immotk-mission__band p{font-size:.85rem;white-space:nowrap;line-height:1.3;margin:0}
.immotk-mission .immotk-link-arrow,.immotk-mission .immotk-link-arrow:hover{color:#000;font-weight:600}
.immotk-mission .immotk-link-arrow::before{content:"";position:absolute;inset:0}
.immotk-mission .immotk-link-arrow:focus-visible{outline:2px solid #000;outline-offset:3px}
/* Desktop fold: header + hero + missions fill the window on load. The row takes what the hero (its content, ≥ 420px) leaves,
   between 220 and 360px (the hero grows past that); in each cell the photo takes what the two bands leave */
:root{--immotk-header-h:85px}
@media (min-width:901px){
	.immotk-header{box-sizing:border-box;height:var(--immotk-header-h)}
	.wp-block-group.immotk-fold{display:flex;flex-direction:column;min-height:calc(100svh - var(--immotk-header-h) - var(--wp-admin--admin-bar--height,0px))}
	.immotk-fold>*{margin-block:0}
	.immotk-fold>.immotk-hero{flex:1 0 auto;min-height:420px}
	.immotk-fold .immotk-hero__text{padding-block:clamp(1.25rem,4svh,4.5rem);gap:1.5rem}
	.immotk-fold .immotk-hero__photo{min-height:0}
	.immotk-fold>.immotk-cols{flex:1000 1 0;min-height:220px;max-height:360px}
	.immotk-fold .immotk-mission__photo{aspect-ratio:auto}
}
/* The row follows the width of the content that holds it (full width on the home page, 720px on /missions/) */
.wp-block-post-content{container-type:inline-size}
@container (max-width:900px){
	.wp-block-group.immotk-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
	.wp-block-group.immotk-mission:nth-child(odd){border-left:0}
	.wp-block-group.immotk-mission:nth-child(-n+2){border-bottom:var(--immotk-rule-soft)}
}
@container (max-width:600px){
	.wp-block-group.immotk-cols{grid-template-columns:1fr}
	.wp-block-group.immotk-mission{border-left:0}
	.immotk-mission .immotk-mission__title,.immotk-mission .immotk-mission__band{padding-inline:var(--wp--style--root--padding-left,1.25rem)}
	.immotk-mission .immotk-mission__photo{aspect-ratio:16/9}
	.wp-block-group.immotk-mission:not(:last-child){border-bottom:var(--immotk-rule-soft)}
}

/* Sale steps */
.immotk-steps{list-style:none;margin:var(--wp--preset--spacing--40) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:var(--immotk-rule)}
.immotk-steps li{padding:1.5rem 1.1rem;border-right:var(--immotk-rule-soft)}
.immotk-steps li:last-child{border-right:0}
.immotk-steps svg{width:56px;height:56px;color:#a88f11;margin-bottom:.75rem}
.immotk-steps strong{display:block;font-family:var(--wp--preset--font-family--serif);font-size:1.15rem;font-weight:600;margin-bottom:.3rem}

/* Sections */
.immotk-section{padding-block:var(--wp--preset--spacing--50);border-bottom:var(--immotk-rule)}
.immotk-section>h2:first-child,.immotk-section>.immotk-kicker+h2{margin-top:.5rem}
.immotk-person{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--wp--preset--spacing--50)}
.immotk-section:has(+ .immotk-final){border-bottom:0}
.immotk-section + .immotk-final{margin-block-start:0}
.immotk-final{background:var(--wp--preset--color--anthracite);color:var(--wp--preset--color--white)}
.immotk-final h2{color:var(--wp--preset--color--white)}
.immotk-final a:not(.wp-block-button__link){color:var(--wp--preset--color--white);font-weight:500}
.immotk-final a:focus-visible{outline-color:var(--wp--preset--color--white)}
.immotk-final .wp-block-button__link{background:var(--wp--preset--color--white);color:var(--wp--preset--color--anthracite)}

/* Agency contact list (shortcode [immotk_contact]) */
.immotk-contact{list-style:none;margin:0;padding:0}
.immotk-contact li{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem 0;border-bottom:var(--immotk-rule-soft)}
.immotk-contact svg{flex:none;margin-top:.15rem;color:var(--wp--preset--color--gold-text)}
.immotk-contact a{color:var(--wp--preset--color--gold-text);font-weight:500}
.immotk-contact a:hover{color:var(--wp--preset--color--anthracite)}

/* Page title band */
.immotk-band{border-bottom:var(--immotk-rule);padding-block:var(--wp--preset--spacing--50) var(--wp--preset--spacing--40)}
.immotk-band h1{margin:.5rem 0 0}

/* Theme photos placed in page content (all 3:2): reserve their height before loading (no layout shift) */
.wp-block-image:not(.immotk-hero__photo,.immotk-mission__photo) img[src*="/themes/immotk/assets/img/"]{aspect-ratio:3/2;object-fit:cover;width:100%;height:auto}

/* Mission pages */
.mission-lead{font-size:1.2rem;line-height:1.55}
.mission-questions{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2rem;border-top:var(--immotk-rule-soft)}
.mission-questions li{padding:.8rem 0;border-bottom:var(--immotk-rule-soft)}
.mission-commitments{list-style:none;padding:0}
.mission-commitments li{position:relative;padding:.45rem 0 .45rem 1.8rem}
.mission-commitments li::before{content:"";position:absolute;left:.2rem;top:.95rem;width:.7rem;height:.38rem;border-left:1.5px solid var(--wp--preset--color--gold-text);border-bottom:1.5px solid var(--wp--preset--color--gold-text);transform:rotate(-45deg)}
.mission-note{border-left:2px solid var(--wp--preset--color--gold);padding:.25rem 0 .25rem 1.25rem}
.mission-note h3{margin:0 0 .3rem}

/* Forms (Contact Form 7) */
.wpcf7 label{display:block;font-size:.9rem;font-weight:500;margin-bottom:1rem}
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],.wpcf7 select,.wpcf7 textarea{display:block;width:100%;box-sizing:border-box;margin-top:.35rem;padding:.7rem .8rem;border:1px solid var(--wp--preset--color--anthracite);border-radius:0;background:var(--wp--preset--color--white);font:inherit;color:inherit}
.wpcf7 input:focus-visible,.wpcf7 select:focus-visible,.wpcf7 textarea:focus-visible{outline:2px solid var(--wp--preset--color--gold-text);outline-offset:2px}
.wpcf7 input[type=submit]{background:var(--wp--preset--color--anthracite);color:var(--wp--preset--color--white);border:0;border-radius:2px;padding:.85rem 1.4rem;font:500 .875rem/1 var(--wp--preset--font-family--sans);cursor:pointer}
.wpcf7 .wpcf7-list-item{margin:0}

/* Parent theme search form (404) and Vectelia Immo boxes: square corners (spec: 0 to 2px) */
.wp-block-search__input,.wp-block-search__button,.vimmo-grid__waiting,.vimmo-card,.vimmo-gallery__all,.vimmo-visit{border-radius:2px}
/* Vectelia Immo buttons in the theme style; the home section shows the 3 latest without paging (link to /biens/ below) */
.vimmo-filters button,.vimmo-visit button[type=submit]{background:var(--wp--preset--color--anthracite);color:var(--wp--preset--color--white);border:0;border-radius:2px;padding:.85rem 1.4rem;font:500 .875rem/1 var(--wp--preset--font-family--sans);cursor:pointer}
.immotk-featured .vimmo-grid__pages{display:none}

/* Legal page (classic content of page 7) */
.immotk-legal h2{font-size:1.6rem;margin:2.4em 0 .8em;padding-bottom:.35em;border-bottom:1px solid var(--wp--preset--color--gold);scroll-margin-top:110px}
.immotk-legal h3{font-size:1.2rem;margin:1.8em 0 .5em}
.immotk-legal h4{font-size:1rem;margin:1.4em 0 .4em}
.immotk-legal ol[type=a]{list-style-type:lower-alpha}
.immotk-legal .legal-id{display:grid;grid-template-columns:minmax(0,15em) 1fr;gap:.55em 1.4em;margin:0 0 1.5em;padding:1.4em 1.6em;background:var(--wp--preset--color--white);border:var(--immotk-rule-soft);border-left:2px solid var(--wp--preset--color--gold)}
.immotk-legal .legal-id dt{font-weight:500}
.immotk-legal .legal-id dd{margin:0}
.immotk-legal .legal-toc{margin:0 0 1em;padding:1em 1.4em;border:var(--immotk-rule-soft)}
.immotk-legal .legal-toc p{margin:0 0 .4em;font-weight:500}
.immotk-legal .legal-signature{margin-top:2em;font-style:italic}

/* Footer */
.immotk-footer{border-top:var(--immotk-rule);font-size:.875rem}
.immotk-footer a{color:var(--wp--preset--color--gold-text);font-weight:500}
.immotk-footer a:hover{color:var(--wp--preset--color--anthracite)}
.immotk-footer .wp-block-list{list-style:none;margin:0;padding:0}
.immotk-footer .wp-block-list li{padding:.55rem 0;border-bottom:var(--immotk-rule-soft)}

@media (max-width:900px){
	.immotk-hero{grid-template-columns:var(--wp--style--root--padding-left,1.25rem) minmax(0,1fr) var(--wp--style--root--padding-right,1.25rem)}
	.immotk-hero__text{border-right:0;padding-right:0}
	.immotk-hero__photo{grid-column:1 / -1;min-height:260px;border-top:var(--immotk-rule)}
	.immotk-steps{grid-template-columns:1fr}
	.immotk-steps li{border-right:0;border-bottom:var(--immotk-rule-soft);display:grid;grid-template-columns:56px 1fr;gap:0 1rem}
	.immotk-steps svg{grid-row:span 2;margin:0}
	.immotk-person{grid-template-columns:1fr}
	.mission-questions{grid-template-columns:1fr}
}
@media (max-width:600px){
	.immotk-legal .legal-id{grid-template-columns:1fr;gap:.1em;padding:1.1em 1.2em}
	.immotk-legal .legal-id dd{margin-bottom:.6em}
}

/* Buttons with a line icon (theme icon files as masks, so the core/button markup stays plain). Filled and outline buttons share
   the same 1px border, so they have the same box; in the hero the two sit in equal columns */
.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--wp--preset--color--anthracite);line-height:1.2;box-sizing:border-box}
.immotk-final .wp-block-button__link{border-color:var(--wp--preset--color--white)}
.has-icon-house>.wp-block-button__link::before,.has-icon-mail>.wp-block-button__link::before{content:"";flex:none;width:18px;height:18px;background-color:currentColor;-webkit-mask:var(--immotk-btn-icon) center/contain no-repeat;mask:var(--immotk-btn-icon) center/contain no-repeat}
.has-icon-house{--immotk-btn-icon:url(icons/house.svg)}
.has-icon-mail{--immotk-btn-icon:url(icons/mail.svg)}
.immotk-hero .wp-block-buttons.wp-block-buttons{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;width:max-content;max-width:100%}
.immotk-hero .wp-block-button,.immotk-hero .wp-block-button__link{width:100%}
@media (max-width:600px){
	.immotk-hero .wp-block-buttons.wp-block-buttons{grid-template-columns:1fr;width:100%}
	.immotk-mission__band p{white-space:normal}
}
.wp-block-button__link.wp-element-button,.wp-block-button.is-style-outline>.wp-block-button__link.wp-element-button{padding:.85rem 1.4rem;font-size:var(--wp--preset--font-size--small);font-weight:500}