/*
Theme Name: Jo
Theme URI: 
Author: Winseo
Author URI: https://winseo.fr
Description: Thème agence pour le Full Site Editing
Requires at least: 6.5
Tested up to: 6.5
Requires PHP: 8.0
Version: 1.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: capitaine
*/
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
html {
    scroll-behavior: smooth;
}
/* =========================
   Variables communes
   --width-feuilles: clamp(140px, 16vw, 260px);
   --height-feuilles: clamp(180px, 20vw, 320px);
========================= */
:root {
    --img-feuilles-gauche: url("/wp-content/uploads/2026/03/feuilles-gauche.svg");
    --img-points-jaunes: url("/wp-content/uploads/2026/06/points-jaunes.svg");
    --width-feuilles: clamp(85px, 16vw, 260px);
    --height-feuilles: clamp(110px, 20vw, 320px);
    --width-logo-footer: clamp(100px, 10vw, 150px);
    --win-border-img: clamp(5px, 2.273px + 0.568vw, 8px);
}
/********************************************
                    GENERAL 
**********************************************/
.back-to-top {
    position: fixed;
    bottom: var(--wp--preset--spacing--m);
    right: var(--wp--preset--spacing--s);
    width: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    cursor: pointer;
}

.back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    z-index: 9;
}
.back-to-top.is-anchored {
    position: absolute;
    bottom: auto;
}
/*________________ TARGET_____________*/
:target {
    scroll-margin-top: 100px;
}

/*_______ BTN RETOUR EN HAUT_________*/
.win-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.max-20{max-width: 20vw;}
.win-translateY-50{transform: translateY(50%);}
.win-translateY-offset50{transform: translateY(-50%);}
.win-zi-5{z-index:5;position: relative;}
.win-zi-100{z-index:100;position: relative;}
.win-border{border: var(--win-border-img) solid #fff;}
.win-fleche-scroll {
    text-align: center;
    margin-top:0;
}
#first-section{
    margin-top: 0;
}

/*_______ CORE/COLUMNS_________*/
.wp-block-columns{
    row-gap: var(--wp--preset--spacing--m);
    column-gap: var(--wp--preset--spacing--l);
}
/*_______ CORE/DETAILS_________*/
.win-details summary:not(.wp-block-details.is-style-p-list summary){
    padding-bottom: var(--wp--preset--spacing--xs);
    border-bottom: 1px solid var(--wp--preset--color--primary);
}

/*________________ CORE/LINK_____________*/
a[aria-current=page] {
    color:var(--wp--preset--color--primary) !important;
}
a[aria-current=page]:hover{
    font-weight: inherit;
}
.single-realisation .taxonomy-type_realisation{
text-wrap: balance;
max-width: 320px;
}
.taxonomy-type_realisation a {
text-decoration: inherit;
}
/* la carte sert de référent de positionnement */
.wp-block-post .carte-portfolio {
    position: relative;
}

/* le lien recouvre toute la carte */
.carte-lien {
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    font-size: 0;
    /* masque le libellé "Voir le projet" */
    background: transparent;
}

.wp-block-post.a-un-lien .carte-portfolio {
    cursor: pointer;
}
/*________________ HOVER BUTTON _____________
.is-style-alt:hover{background-color: var(--wp--preset--color--secondary);border-color: currentColor;}
.is-style-plein a:hover,.wp-block-buttons:has(.is-style-plein:hover){background-color: var(--wp--preset--color--primary)!important;}
*/
/*________________ CORE/LIST_____________*/

/*ul.wp-block-list li>ul {
    margin-top: 0.5em;
}
/********************************************
                    MENU 
**********************************************/
.wp-block-navigation__submenu-container {
    min-width: 325px !important;
    top: calc(100% + 20px) !important;
    border: none !important;
    box-shadow: none !important;
}
.wp-block-navigation-item.has-child>.wp-block-navigation__submenu-container {
    left: 0 !important;
    right: auto !important;
}
.wp-block-site-logo,
.wp-block-buttons {
    flex-shrink: 0 !important;
}
.wp-block-site-logo img {
    width: 65px !important;
    height: auto !important;
    max-width: none !important;
}
.wp-block-navigation .wp-block-navigation__container {
    row-gap: var(--wp--preset--spacing--xxs) !important;
}
/*________________ MENU MOBILE_____________*/
/* 1. Le sous-menu repasse dans le flux, pleine largeur, sans décalage latéral */
.wp-block-navigation__overlay-container .wp-block-navigation.is-vertical .wp-block-navigation__submenu-container {
  position: static;
  left: auto;
  top: auto;
  width: 100%;
  flex-basis: 100%;
  min-width: 0;
  box-shadow: none;
  background: transparent;   /* enlève le fond blanc du dropdown */
}

/* 2. On autorise le <li> à faire passer le sous-menu sous le bouton */
.wp-block-navigation__overlay-container .wp-block-navigation.is-vertical .wp-block-navigation-item.has-child {
  flex-wrap: wrap;
}
/*________________ TAILLE ICON HAMBURGER_____________*/
.wp-block-navigation__responsive-container-open svg{
    width: 40px;
    height: 40px;
}
.wp-block-navigation__overlay-container .wp-block-navigation__container {
    row-gap: var(--wp--preset--spacing--s) !important;
}

/* =========================
   Separateur de Colonnes
========================= */
.separator-3col{gap:var(--wp--preset--spacing--s) 0;}
.separator-3col .wp-block-column:not(:last-child) {
    border-right: 1px solid var(--wp--preset--color--primary);
    padding-right:var(--wp--preset--spacing--s);
}
.separator-3col .wp-block-column:not(:first-child){
    padding-left: var(--wp--preset--spacing--s);
}
@media (max-width: 767px) {
    .separator-3col .wp-block-column:not(:last-child){
        border-right: none;
        padding-right: 0;
    }
    .separator-3col .wp-block-column:not(:first-child) {
        padding-left: 0;
    }
}
/* =========================
   FOOTER Separateur de Colonnes
========================= */
footer .separator-3col::before{
    content: "";
        display: block;
        width: var(--width-logo-footer);
        height: var(--width-logo-footer);
        background: center / contain no-repeat url(/wp-content/uploads/logo-graphiste-engagee.svg);
        position: absolute;
        top: 0;
        left: var(--wp--preset--spacing--s);
        transform: translateY(-50%);
}
footer .separator-3col{
    position: relative;
    padding-top: var(--width-logo-footer);
    overflow: visible;
}
/* =========================
   Deco TITRE
========================= */
/* Classe commune (toutes les variations) */
.wp-block-heading.is-style-symbole-vert::before,
.wp-block-heading.is-style-symbole-teal::before {
    content: '';
    display: block;
    width: clamp(48px, 5vw, 72px);
    height: clamp(12px, 1.25vw, 18px);
    background: center/contain no-repeat;
    margin-bottom: 1.2em;
}
/* Image spécifique */
.wp-block-heading.is-style-symbole-vert::before {
    background-image: url("/wp-content/uploads/symbole-vert.svg");
}
.wp-block-heading.is-style-symbole-teal::before {
    background-image: url("/wp-content/uploads/symbole-teal.svg");
}
.wp-block-heading.has-text-align-center.is-style-symbole-vert::before,
.wp-block-heading.has-text-align-center.is-style-symbole-teal::before
{ margin:0 auto 1.2em}

/* petites capitales */
.is-style-small-caps,
.single-realisation .is-style-list li {
    font-variant: all-small-caps;
}
h4+p, h4+details {
    margin-block-start: var(--wp--preset--spacing--xs) !important;
}
/* =========================
   Onglet
========================= */
.wp-block-easy-tabs-block-tabs-inner .wp-block-easy-tabs-block-tab-contents{
    padding: var(--win-border-img);
}
/* =========================
   Page A PROPOS
========================= */
.liste-trefles h3 {
    position: relative;
    font-size: var(--wp--preset--font-size--s);
}
.liste-trefles h3::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 0;
    width: 1rem;
    height: 1rem;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transform-origin: center;
    background-image: url("data:image/svg+xml;utf8,<svg width='26' height='27' viewBox='0 0 26 27' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M-1.90735e-06 25.9594V25.9788L0.0600376 27C1.46095 26.6693 8.08525 25.1132 16.7809 23.4696C31.3203 20.7367 26.8775 4.82564 15.7702 8.93957C19.1925 -2.3713 -0.500326 -4.0052 0.840544 10.1942C1.49097 17.0604 0.48031 23.4696 -1.90735e-06 25.9594Z' fill='%23009999'/></svg>");
}
.liste-trefles h3:nth-of-type(4n+1)::before {
    transform: rotate(0deg);
}
.liste-trefles h3:nth-of-type(4n+2)::before {
    transform: rotate(90deg);
}
.liste-trefles h3:nth-of-type(4n+3)::before {
    transform: rotate(180deg);
}
.liste-trefles h3:nth-of-type(4n+4)::before {
    transform: rotate(270deg);
}

/* =========================
   Section HERO
========================= */
.hero-johana{padding-left:5%;padding-right:5%;}
.hero-johana .home-100{min-height: calc(100vh - 192px);
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
.hero-johana .fleche img{
    position: absolute !important;
    top: calc(70% - 20px);
}
.hero-johana h1:not(.home .hero-johana h1){margin-bottom: var(--wp--preset--spacing--l);}
.hero-title {
    display: inline-block;
    font-size: var(--wp--preset--font-size--xl);
    line-height: var(--wp--custom--line-height--regular);
}
/** top hero page legales **/
.page-template-default .hero-johana .has-light-background-color{
    padding-top:calc(var(--height-feuilles) + 10rem) !important;
}
/* feuilles et point */

/* =========================
   Base commune décors
========================= */

.hero-johana,
.section-deco {
    position: relative;
}

.hero-johana::before,
.hero-johana::after,
.section-deco::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
}
.wp-block-easy-tabs-block-tabs-inner .wp-block-columns{z-index:5;}
/* =========================
   HERO JOHANA
========================= */
/* Feuilles à gauche */
.hero-johana::before {
    left: 0rem;
    bottom: 12rem;
    width: var(--width-feuilles);
    height: var(--height-feuilles);
    background-image: var(--img-feuilles-gauche);
    background-position: left bottom;
    z-index: 1;
}

/* Points jaunes à droite */
.hero-johana::after {
    right: 0;
    bottom: 3rem;
    /*width: clamp(90px, 10vw, 170px);
    height: clamp(90px, 10vw, 170px);*/
    width: clamp(55px, 10vw, 170px);
        height: clamp(55px, 10vw, 170px);
    background-image: var(--img-points-jaunes);
    background-position: right bottom;
    z-index: 0;
}

/* =========================
   SECTION DECO
========================= */
/*.section-deco {
    padding-top: var(--wp--preset--spacing--s);
}*/
.section-deco::after {
    width: var(--width-feuilles);
    height: var(--height-feuilles);
    background-image: var(--img-feuilles-gauche);
    z-index: 0;
}
/* Variante : en haut à droite */
.section-deco.deco-top-right::after {
    top: 0;
    right: 0;
    background-position: top left;
    transform: rotate(180deg);
}
/* Variante : en haut à gauche */
.section-deco.deco-top-left::after {
    top: -70px;
    left: 0;
    background-position: top left;
}
/* Variante : milieu */
.section-deco.deco-bottom-right::after {
    bottom: 0;
    right: 0;
    background-position: bottom left;
    transform: rotate(180deg);
}

/*.single-realisation .wp-block-post-content>*+* {
    margin-block-start: var(--wp--preset--spacing--xxl);
}*/

/********************************************
                   COOKIES
**********************************************/

/********************************************
                   RESPONSIVE 
**********************************************/
@media (width < 1680px) {
    .is-layout-constrained>.alignwide {
        width: 80vw;
    }
}
@media (width < 1281px) {
    .responsive-grid {
            grid-template-columns: repeat(3, 1fr);
    }
}
@media (width > 1024px) {
    .hide-on-desktop {
        display: none !important;
    }
}
@media (width < 1025px) {
    .hide-on-tablet {
        display: none !important;
    }
    .win-margin-mobile {
        padding-left: 10vw !important;
        padding-right: 10vw !important;
    }
    .win-center-mobile {
        text-align: center;
        margin: auto !important;
    }
    .win-reverse {
        -webkit-flex-direction: column-reverse;
        -ms-flex-direction: column-reverse;
        flex-direction: column-reverse;
    }
    .responsive-grid {
             grid-template-columns: repeat(2, 1fr);
    }
    .hero-johana .fleche img {
        position: inherit !important;
        width: 28px;
    }
    .hero-johana h1 {
        margin-bottom: inherit !important;
    }
}
@media (width < 600px) {
    .responsive-grid{
        grid-template-columns: repeat(1, 1fr);
    }
    .hide-on-mobile {
        display: none !important;
    }
}