/*
Theme Name: JO.H Carrelage
Version: 1.0.9
Requires at least: 6.6
Text Domain: joh-carrelage
*/

:root {
    color-scheme:light;
    --paper:#f8f4eb;
    --sand:#e9dfcd;
    --ink:#29271f;
    --soft:#514b40;
    --clay:#873d2e;
    --olive:#303b30;
    --white:#fffaf1;
    --edge:#766c5e
}

* {
    box-sizing:border-box
}

body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:1.125rem/1.6 system-ui,sans-serif
}

a {
    color:inherit;
    text-underline-offset:.22em
}

a:hover {
    text-decoration-thickness:2px
}

a:focus-visible,summary:focus-visible {
    outline:3px solid currentColor;
    outline-offset:5px;
    border-radius:2px
}

img {
    display:block;
    width:100%;
    height:auto
}

figure,p,h1,h2,h3 {
    margin:0
}

p+p {
    margin-top:1em
}

.wrap {
    width:min(1240px,100% - 2 * clamp(1.25rem,5vw,5rem));
    margin-inline:auto
}

.skip {
    position:absolute;
    left:1rem;
    top:1rem;
    transform:translateY(-200%);
    background:var(--white);
    color:var(--ink);
    padding:.65em;
    z-index:3
}

.skip:focus {
    transform:none
}

.masthead {
    border-bottom:1px solid #cfc3af
}

.top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1.25rem;
    flex-wrap:wrap;
    padding-block:1.05rem
}

.brand {
    display:inline-flex;
    align-items:center;
    gap:.7rem;
    text-decoration:none;
    font-weight:750;
    min-height:44px
}

.brand img {
    width:42px;
    height:42px
}

.top nav {
    display:flex;
    gap:.2rem clamp(.7rem,2.5vw,2rem);
    flex-wrap:wrap
}

.top nav a,
.top nav .joh-services-menu summary {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:1rem
}

.top nav .button {
    color:#fff;
}

.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:clamp(2rem,6vw,6rem);
    padding-block:clamp(2.6rem,6vw,6rem)
}

.hero-copy {
    padding-bottom:1rem
}

.kicker {
    font-size:.87rem;
    font-weight:720;
    letter-spacing:.075em;
    color:var(--clay)
}

h1,h2,h3 {
    font-weight:690;
    line-height:1.06;
    letter-spacing:-.042em;
    text-wrap:balance
}

h1 {
    font-size:clamp(2.7rem,5.3vw,5.3rem);
    margin:.3em 0 .33em
}

h2 {
    font-size:clamp(2.1rem,4vw,3.75rem);
    margin-bottom:.45em
}

h3 {
    font-size:1.45rem;
    margin-bottom:.45em
}

.hero-copy>p:not(.kicker) {
    max-width:34ch;
    color:var(--soft);
    font-size:clamp(1.12rem,1.55vw,1.35rem)
}

.actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.65rem 1.4rem;
    margin-top:1.5rem
}

.button {
    display:inline-flex;
    align-items:center;
    min-height:48px;
    padding:.65em 1.1em;
    background:var(--clay);
    color:var(--white);
    font-size:1rem;
    font-weight:720;
    border-radius:3px;
    text-decoration:none
}

.button:hover {
    background:#642a20;
    text-decoration:underline
}

.button:focus-visible {
    outline-color:var(--ink)
}

.sub-link {
    display:inline-flex;
    align-items:center;
    min-height:44px;
    font-size:1rem;
    font-weight:650
}

.hero figure {
    position:relative
}

.hero figure img {
    aspect-ratio:1.11;
    object-fit:cover;
    object-position:50% 55%;
    border-radius:42% 42% 3px 3px / 31% 31% 3px 3px
}

.caption {
    margin-top:.55rem;
    color:var(--soft);
    font-size:.9rem
}

.experience {
    background:var(--olive);
    color:var(--white);
    padding:1.3rem 0
}

.experience .wrap {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.25rem 2rem
}

.experience strong {
    font-size:1.38rem
}

.experience span {
    color:#f0e5d0
}

.section {
    padding-block:clamp(3.3rem,7.5vw,7.4rem)
}

.two {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(1.7rem,6vw,6.5rem);
    align-items:start
}

.section .kicker {
    margin-bottom:.65rem
}

.prose p {
    max-width:55ch
}

.prose .sub-link {
    margin-top:1rem;
    color:var(--clay)
}

.turnkey {
    background:var(--sand)
}

.turnkey .note {
    padding:1rem 0 0 1rem;
    border-left:3px solid var(--clay);
    margin-top:1rem
}

.work .intro {
    max-width:52ch;
    margin-bottom:1.8rem
}

.work .two {
    grid-template-columns:1.13fr 1fr;
    gap:clamp(1.4rem,4vw,3.7rem)
}

.work img {
    aspect-ratio:1.6;
    object-fit:cover;
    border-radius:3px
}

.work .two > figure:last-child {
    margin-top:2rem
}

.work figcaption strong {
    display:block;
    color:var(--ink);
    font-size:1.13rem
}

.services {
    border-top:1px solid #cfc3af
}

.service {
    border-top:1px solid var(--edge);
    padding:.95rem 0
}

.service:last-child {
    border-bottom:1px solid var(--edge)
}

.service summary {
    cursor:pointer;
    min-height:44px;
    padding:.4rem 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    font-size:1.15rem;
    font-weight:700;
    list-style:none
}

.service summary::-webkit-details-marker {
    display:none
}

.service summary::after {
    content:"";
    border:solid currentColor;
    border-width:0 2px 2px 0;
    width:8px;
    height:8px;
    transform:rotate(45deg);
    margin-right:.5rem
}

.service[open] summary::after {
    transform:rotate(225deg)
}

.service p {
    color:var(--soft);
    padding:.25rem .5rem .5rem 0
}

.artisan {
    background:var(--sand)
}

.artisan .quote {
    background:var(--paper);
    padding:clamp(1.3rem,4vw,3rem);
    border-top:4px solid var(--clay)
}

.quote strong {
    display:block;
    font-size:1.3rem;
    margin-bottom:.25rem
}

.quote p {
    font-size:1rem
}

.contact {
    background:var(--olive);
    color:var(--white)
}

.contact .kicker {
    color:#f2d9b5
}

.contact-links {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.25rem
}

.contact-links a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
    overflow-wrap:anywhere;
    max-width:100%
}

.contact-links a:first-child {
    font-weight:760;
    font-size:1.55rem
}

.contact-links p {
    margin-bottom:.6rem
}

.foot {
    padding-block:1.5rem;
    color:var(--soft);
    font-size:.91rem
}

.foot strong {
    color:var(--ink)
}

section[id] {
    scroll-margin-top:1rem
}

@media(max-width:760px) {
    .hero,.two,.work .two {
        grid-template-columns:1fr
    }

    .hero figure img {
        aspect-ratio:1.5;
        border-radius:28% 28% 3px 3px / 29% 29% 3px 3px
    }

    .hero-copy {
        padding:0
    }

    .work .two > figure:last-child {
        margin-top:.4rem
    }

    .top {
        gap:.2rem
    }

    .top nav {
        width:100%
    }

    .top nav a,
    .top nav .joh-services-menu summary {
        font-size:.95rem
    }

    .experience .wrap {
        display:block
    }

    .experience span {
        display:block
    }

}

@media(forced-colors:active) {
    .button {
        border:2px solid ButtonText
    }

    .service {
        border-color:CanvasText
    }

}

.screen-reader-text {
    position:absolute;
    width:1px;
    height:1px;
    clip-path:inset(50%);
    overflow:hidden
}

.screen-reader-text:focus {
    clip-path:none;
    width:auto;
    height:auto;
    z-index:10
}

.wp-block-image {
    margin:0
}

.wp-block-image figcaption {
    margin-top:.55rem;
    color:var(--soft);
    font-size:.9rem
}

.wp-block-details>summary {
    display:list-item;
    list-style:revert
}

.wp-block-details>summary::after {
    content:none
}

.joh-locked {
    min-height:60vh
}

.joh-locked input {
    font:inherit;
    max-width:100%
}

.joh-locked input:focus-visible {
    outline:3px solid var(--clay);
    outline-offset:3px
}

#wpadminbar img {
    width:auto
}

.experience .wrap p {
    margin:0
}

.actions p {
    margin:0
}

.contact-links p {
    margin:0
}

.contact-links p:nth-child(2) a {
    font-size:1.55rem;
    font-weight:760
}

.contact-links p:first-child a,.contact-links p:last-child a {
    font-size:inherit;
    font-weight:inherit
}

/* Pied de page, pages de prestations et carrousel */

.joh-footer {
    background:#303b30;
    color:#fffaf1;
    padding:clamp(2rem,5vw,4rem) 0;
}

.joh-footer-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2rem;
}

.joh-social {
    display:flex;
    gap:.5rem;
    margin:.65rem 0 .25rem;
}

.joh-social a {
    width:44px;
    justify-content:center;
    border-radius:50%;
    border:1px solid rgba(255,250,241,.35);
}

.joh-social a:hover, .joh-social a:focus-visible {
    background:#fffaf1;
    color:#303b30;
}

.joh-footer-brand {
    font-weight:750;
    font-size:1.25rem;
}

.joh-footer nav p {
    font-weight:750;
    color:#f2d9b5;
}

.joh-footer ul {
    list-style:none;
    margin:.6rem 0 0;
    padding:0;
}

.joh-footer a {
    display:inline-flex;
    align-items:center;
    min-height:44px;
}

.joh-fiche {
    max-width:820px;
}

.joh-fiche h2 {
    font-size:clamp(1.5rem,3vw,2.2rem);
    margin:1.3em 0 .35em;
}

@media(max-width:700px) {
    .joh-footer-grid {
        grid-template-columns:1fr;
        gap:1rem;
    }

}

.joh-service-hero {
    background:var(--sand);
    padding:clamp(2rem,6vw,5rem) 0
}

.joh-service-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(1.5rem,5vw,5rem);
    align-items:center
}

.joh-service-grid h1 {
    font-size:clamp(2.5rem,5vw,4.8rem)
}

.joh-service-grid img {
    aspect-ratio:1.2;
    object-fit:cover;
    border-radius:42% 42% 5px 5px / 30% 30% 5px 5px
}

.joh-service-material {
    min-height:15rem;
    background:var(--olive);
    color:var(--white);
    border-radius:4px;
    padding:2rem;
    display:grid;
    align-content:center;
    font-size:clamp(1.4rem,3vw,2.6rem)
}

.joh-service-copy {
    max-width:1040px;
    padding-block:clamp(2rem,5vw,4.5rem);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:0 clamp(2rem,5vw,4.5rem);
}

.joh-service-copy > * {
    grid-column:1 / -1;
    min-width:0;
}

.joh-service-copy > p:first-child {
    padding:clamp(1.2rem,3vw,2.4rem);
    background:var(--sand);
    border-inline-start:4px solid var(--clay);
    border-radius:0 8px 8px 0;
    color:var(--ink);
    font-size:clamp(1.15rem,2vw,1.4rem);
    margin-block-end:1.25rem;
}

.joh-service-copy > h2 {
    font-size:clamp(1.5rem,2.55vw,2rem);
    line-height:1.15;
    margin:0;
    padding-block-start:1rem;
    text-wrap:pretty;
}

.joh-service-copy > h2 + p {
    color:var(--soft);
    line-height:1.7;
    margin:0;
    padding-block:.45rem 1.65rem;
    max-width:76ch;
}

.joh-service-copy > .wp-block-gallery {
    margin:0 0 1.75rem;
    padding:clamp(.6rem,1.5vw,1rem);
    background:var(--sand);
    border-radius:8px;
}

.joh-service-copy > .wp-block-gallery.columns-1 {
    width:min(100%,38rem);
    justify-self:center;
}

.joh-service-copy > h3 {
    margin:0 0 .8rem;
    font-size:1.2rem;
    color:var(--olive);
}

/* Les étapes se modifient dans les groupes de blocs de chaque prestation. */
.joh-service-steps {
    margin-block:0 2rem;
}

.joh-service-steps > .wp-block-group__inner-container {
    display:grid;
    gap:1rem;
}

.joh-service-step {
    padding:clamp(1.25rem,3vw,2rem);
    background:var(--white);
    border:1px solid #ded4c1;
    border-radius:14px;
}

.joh-service-step h2 {
    margin:0 0 .65rem;
    font-size:clamp(1.3rem,2.2vw,1.65rem);
    line-height:1.18;
    color:var(--olive);
    text-wrap:pretty;
}

.joh-service-step p {
    color:var(--soft);
    line-height:1.65;
}

@media (min-width: 800px) {
    .joh-service-steps > .wp-block-group__inner-container {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

.joh-service-copy>p:last-child a {
    display:inline-block;
    margin-top:1rem;
    background:var(--clay);
    color:var(--white);
    padding:.7em 1.1em;
    border-radius:3px
}

@media(max-width:760px) {
    .joh-service-grid {
        grid-template-columns:1fr
    }

}

.joh-carousel-controls {
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
    padding-top:1.5rem
}

.joh-carousel-controls[hidden],.joh-slide[hidden] {
    display:none
}

.joh-carousel-controls button {
    font:inherit;
    min-height:44px;
    padding:.35rem .85rem;
    border:1px solid var(--edge);
    border-radius:3px;
    background:transparent;
    color:var(--ink);
    cursor:pointer
}

.joh-carousel-controls [aria-pressed=true] {
    background:var(--olive);
    color:var(--white)
}

.joh-carousel-controls button:focus-visible {
    outline:3px solid var(--clay);
    outline-offset:3px
}

.joh-carousel .joh-slide {
    padding-top:clamp(1.5rem,4vw,4rem)
}

.joh-slide h1,.joh-slide h2 {
    font-size:clamp(2.5rem,5vw,4.8rem);
    margin:.3em 0
}

.joh-slide-material {
    aspect-ratio:1.11;
    display:grid;
    place-items:center;
    text-align:center;
    padding:1rem;
    color:#fffaf1;
    border-radius:42% 42% 3px 3px / 31% 31% 3px 3px;
    background:#69503a;
    font-size:clamp(1.2rem,3vw,2.2rem);
    font-weight:700
}

.joh-slide-piscine {
    background:#315b5b
}

.joh-carousel .joh-carousel-controls button.joh-rotation {
    width:44px;
    min-height:44px;
    padding:0;
    border:1px solid #cfc3af;
    border-radius:50%;
    font-size:.95rem;
    text-decoration:none;
    line-height:1;
}

.joh-carousel .joh-carousel-controls button.joh-rotation:hover {
    background:var(--sand);
}

.joh-carousel .hero-copy > p:not(.kicker) {
    max-width:52ch;
    font-size:clamp(1rem,1.35vw,1.18rem);
}

/* Galeries de réalisations et visionneuse */

.joh-photo-gallery {
    margin-block:3rem 1rem;
    border-top:1px solid var(--edge);
    padding-top:1rem
}

.joh-photo-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:1rem;
    margin-top:1.2rem
}

.joh-photo-grid a {
    display:block;
    background:#f0ebdf;
    border-radius:8px;
    overflow:hidden;
    color:inherit;
    text-decoration:none
}

.joh-photo-grid img {
    display:block;
    width:100%;
    aspect-ratio:4/3;
    height:auto;
    object-fit:cover
}

.joh-photo-grid span {
    display:block;
    padding:.65rem .8rem;
    font-weight:650;
    font-size:.95rem
}

.joh-photo-grid a:hover span {
    text-decoration:underline
}

.joh-photo-dialog {
    box-sizing:border-box;
    width:min(96vw,1024px);
    max-width:96vw;
    max-height:96dvh;
    border:0;
    border-radius:14px;
    padding:clamp(.65rem,2vw,1.25rem);
    background:#211f1b;
    color:#fffaf1
}

.joh-photo-dialog::backdrop {
    background:#171713db
}

.joh-photo-dialog img {
    display:block;
    width:100%;
    height:min(65dvh,740px);
    object-fit:contain
}

.joh-photo-bar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.5rem;
    margin-block:.45rem
}

.joh-photo-bar button {
    font:inherit;
    border:1px solid #a7a093;
    border-radius:6px;
    min-width:44px;
    min-height:44px;
    background:transparent;
    color:inherit;
    cursor:pointer
}

.joh-photo-bar button:hover {
    background:#48443b
}

.joh-photo-dialog p {
    margin:.5rem 0 0;
    text-align:center;
    color:inherit
}

.joh-photo-dialog :focus-visible,.joh-photo-grid a:focus-visible {
    outline:3px solid #d48b66;
    outline-offset:3px
}

@media(max-width:540px) {
    .joh-photo-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:.65rem
    }

}

/* Mosaïque des réalisations sur l’accueil */

#realisations .joh-mosaic {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    gap:26px 30px;
    margin-top:38px;
    align-items:start
}

#realisations .joh-mosaic > .wp-block-group__inner-container {
    display:contents
}

#realisations .joh-project {
    margin:0;
    grid-column:span 5;
    min-width:0
}

#realisations .joh-project:nth-child(4n+1),#realisations .joh-project:nth-child(4n+4) {
    grid-column:span 7
}

#realisations .joh-project img {
    display:block;
    width:100%;
    height:clamp(220px,29vw,420px);
    object-fit:cover;
    object-position:50% 65%;
    border-radius:3px;
    filter:brightness(1.07) saturate(.94)
}

#realisations .joh-project:nth-child(2) img {
    filter:brightness(1.19) saturate(.92);
    object-position:50% 67%
}

#realisations .joh-project figcaption {
    margin:0;
    padding:11px 0 0;
    text-align:left;
    font-size:1rem;
    color:inherit
}

#realisations .joh-project figcaption a {
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:inherit;
    text-decoration:none;
    font-weight:650
}

#realisations .joh-project figcaption a:hover {
    text-decoration:underline
}

@media(max-width:650px) {
    #realisations .joh-mosaic {
        grid-template-columns:1fr;
        gap:22px;
        margin-top:24px
    }

    #realisations .joh-mosaic .joh-project {
        grid-column:1
    }

    #realisations .joh-project img {
        height:auto;
        aspect-ratio:4/3
    }

}

.joh-devis-action {
    margin-block: 1.5rem 0;
}

.joh-footer-credit {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:0 1rem;
    margin-block-start:1rem;
    padding-block-start:.45rem;
    border-block-start:1px solid rgba(255,250,241,.3);
    color:#f0e5d0;
    font-size:.875rem;
}

.joh-services-menu {
    position:relative;
    align-self:stretch;
    display:grid;
    align-content:center;
}

.joh-services-menu summary {
    text-decoration:underline;
    text-underline-offset:.22em;
    display:flex;
    align-items:center;
    gap:.45rem;
    min-height:44px;
    cursor:pointer;
    list-style:none;
}

.joh-services-menu summary::-webkit-details-marker {
    display:none;
}

.joh-services-menu summary::after {
    content:"";
    width:.42em;
    height:.42em;
    border:solid currentColor;
    border-width:0 1.5px 1.5px 0;
    transform:translateY(-.1em) rotate(45deg);
}

.joh-services-menu[open] summary {
    color:var(--clay);
}

.joh-services-menu ul {
    position:absolute;
    z-index:20;
    inset-block-start:100%;
    inset-inline-start:0;
    width:min(19rem, calc(100vw - 2.5rem));
    margin:0;
    padding:.35rem;
    list-style:none;
    background:var(--white);
    border:1px solid #ded4c1;
    border-radius:10px;
    box-shadow:0 12px 30px rgba(41,39,31,.14);
}

.top .joh-services-menu li a {
    width:100%;
    padding:.45rem .7rem;
    border-radius:6px;
    text-decoration:none;
}

.top .joh-services-menu li a:hover,
.top .joh-services-menu li a:focus-visible {
    background:var(--sand);
}