/*
Theme Name: Parutto25
Theme URI: 
Author: Delphine BRUNET
Author URI: 
Description: Thème sur mesure / clone "Twenty Twnety-Five"
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: parutto25
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/* Structure de base */
/* Masque le débordement horizontal uniquement dans les sections */
:root {
    --wp--preset--font-family-satisfy: 'Satisfy', 'Montserrat', sans-serif;
}

body {
  overflow-x: hidden;
}

.main,
.par-section {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
}
.wp-site-blocks {
    max-width: 100vw;
    width: 100vw;
}
.par-section .par-inner-section {
    height: 90vh;
}

.par-landing-bkgd {
    width: 100vw !important;
}

.par-section2 {
  min-height: unset;       /* supprime min-height: 90vh */
  height: auto;            /* s’adapte à son contenu */
  overflow: visible;       /* pas de scroll interne */
}

.par-section2 .par-inner-section2 {
  height: auto;            /* l’enfant suit la taille du contenu */
}

.par-inner-section2 .parutto-inner-section3,
.par-inner-section2 .par-inner-section4 {
  max-width: 95vw;         /* si besoin de limiter la largeur */
}

/* Pied de page */
footer {
    height: 20vh;
    width: 100%;
}

/* Conteneur des cartes */
.parutto-3cards-container {
    display: flex;
    flex-direction: row;
    height: 100%;
}

/* Cartes */
.parutto-card {
    position: relative;
    opacity: 0;
    height: 100%;
}

.parutto-no-wrap {
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
}

a {
    text-decoration-thickness: 1px !important;
    text-underline-offset: .1em;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
    outline-width: 0 !important;
    outline-style: none !important;
}

/* Contenu des cartes */
.parutto-card-content {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    color: var(--wp--preset--color--base) !important;
    backdrop-filter: blur(20px);
    text-align: center;
    transition: all 0.6s ease;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
    margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
    outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    outline-offset: 0;
}

/* STYLE DU FORMULAIRE */

.p-blur-background {
    backdrop-filter: blur(12px);
}

.wpcf7-form {
    display: flex;
    flex-direction: column;
}

.wpcf7-form .parutto-form-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"] {
    background-color: #fff;
    border: 1px solid #fff;
    color: #223434;
    width: 100%;
    height: 3rem;
}

.wpcf7-form textarea {
    background-color: #fff;
    border: 1px solid #fff;
    color: #223434;
    width: 100% !important;
    height: 10rem;
}

/* Style du bouton "Envoyer" */
div.wp-block-button {
    display: inline-block;
    margin: 0;
}

div.wp-block-button input[type="submit"] {
    font-size: var(--wp--preset--font-size--large);
    background-color: var(--wp--preset--color--accent-1);
    font-family: var(--wp--preset--font-family--montserrat);
    border: 2px solid var(--wp--preset--color--accent-1);
    text-transform: uppercase;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 46px;
    cursor: pointer;
    /* transition: border 0.3s ease; */
}

/* Masque initialement tous les labels et champs */
.wpcf7-form label,
.wpcf7-form-control-wrap {
    opacity: 0;
    transform: translateY(20px);
}

/* Assure que les colonnes du formulaire sont prêtes pour l'animation */
.wp-block-columns {
    opacity: 1;
    /* Les colonnes restent visibles */
}

.parutto-relative {
    position: relative !important;
}

.parutto-absolute {
    position: absolute !important;
    top: 0;
    right: 0;
}

.par-img-slider {
    position: relative;
    overflow: visible;
    min-height: 550px;
}

.par-img-slider figure {
    position: absolute;
}

.par-img-slider figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center center;
}

.wp-block-group.parutto-relative>figure.parutto-truelle {
    position: absolute !important;
    top: 110px;
    right: 25px;
    width: auto;
    height: auto;
    margin: 0;
}

.parutto-truelle img {
    /* Optionnel : pour t'assurer que l'image ne dépasse pas de sa figure */
    display: block;
    max-width: 100%;
    height: auto;
    z-index: 1 !important;
}

.parutto-z-index-up {
    z-index: 10 !important;
}

.parutto-gradient-map {
    position: relative;
    display: inline-block;
}

.parutto-gradient-map .parutto-image-card {
    display: block;
    width: 100%;
    transition: all 0.3s ease;
}

.parutto-gradient-map:hover::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right,
            #F5B169,
            /* Couleur foncée vert #223434 */
            #F5B169
            /* Même couleur pour un effet monochrome jaune #F5B169  */
        );
    mix-blend-mode: color;
    /* ou 'color' selon l'effet souhaité */
    pointer-events: none;
}

.parutto-card {
    position: relative;
    opacity: 0;
}

.parutto-card-content {
    position: absolute;
    bottom: 0px;
    /* Ajuste cette valeur pour positionner verticalement */
    left: 50%;
    /* Positionne le début du contenu au milieu */
    transform: translateX(-50%);
    /* Décale de -50% pour centrer parfaitement */
    width: 100%;
    /* ou une largeur fixe comme 80% si nécessaire */
    max-width: 100%;
    /* Limite la largeur maximale pour éviter les débordements */
    margin: 0 auto;
    /* Centre horizontalement (redondant avec transform, mais utile pour certains cas) */
    color: var(--wp--preset--color--base) !important;
    -webkit-backdrop-filter: blur(30px) grayscale(60%);
    backdrop-filter: blur(30px) grayscale(60%);
    /* Safari */
    text-align: center;
    /* Centre le texte à l'intérieur du contenu */
    transition: all 0.6s ease;
}

.parutto-gradient-map .parutto-card-content:hover {
    /* backdrop-filter: blur(80px); */
    background: linear-gradient(to right,
            #F5B169,
            /* Couleur foncée vert #223434 */
            #F5B169
            /* Même couleur pour un effet monochrome jaune #F5B169  */
        );
}

.parutto-3cards-container {
    display: flex;
    flex-direction: row;
}

/* Animations initiales */
.animate-title,
.parutto-landing-batir,
.parutto-landing-partenaire,
.parutto-landing-description {
    transform: translate(0, 50px);
    opacity: 0;
}

.parutto-landing-bouton,
.parutto-exp-bouton {
    opacity: 0;
    transform: scale(2);
}

.par-pin-details-section {
    height: auto;
    max-height: none;
}

.par-title-move-up,
.par-title-exp-move-up,
.par-title-real-move-up {
    opacity: 0;
    transform: translate(0, 50px);
}

.par-details details {
    padding: 1.2rem 1.5rem;
    border-radius: 12px;
    background-color: var(--wp--preset--color--base);
    transition: background-color 0.4s ease;
    transform-origin: center left;
    will-change: transform, opacity;
}

.par-details details summary {
    cursor: pointer;
}

/* état inactif */
.par-details details {
    opacity: 0.35;
}

/* état actif */
.par-details details.is-active {
    background-color: var(--wp--preset--color--accent-2);
    opacity: 1;
}

/* texte */
.par-details details p {
    color: var(--wp--preset--color--contrast);
}

/* couleur par défaut */
.par-details details summary {
    color: var(--wp--preset--color--contrast);
    transition: color 0.3s ease;
}

/* quand le bloc est actif */
.par-details details.is-active summary {
    color: var(--wp--preset--color--contrast);
}

/* optionnel : renforcer la hiérarchie */
.par-details details.is-active summary {
    font-weight: 600;
}

/* garder le texte lisible */
.par-details details.is-active p {
    color: var(--wp--preset--color--contrast);
}

.par-par-exp {
    opacity: 0;
    transform: translateX(100%);
}

/* Fade in image */
.par-fade-in img {
    opacity: 0;
    transform: scale(0.96);
    will-change: opacity, transform;
}

/* Slide depuis la droite */
.par-slide-from-right {
    opacity: 0;
    transform: translateX(60px);
    will-change: opacity, transform;
}

.par-close-quote img {
    transform: rotate(180deg);
}

.par-citation-contenaire {
    position: relative;
    min-height: 350px;
}

.par-post-it-container {
    position: relative;
    /* très important pour que les post-it absolute soient positionnés par rapport à ce conteneur */
    width: 100%;
    height: 100%;
    font-family: var(--wp--preset--font-family-satisfy) !important;
}

.par-post-it:nth-child(3n) {
    background: #ffd6d6;
}

.par-post-it:nth-child(3n+1) {
    background: #dff5ff;
}

.par-post-it {
    position: absolute;
    color: #223434 !important;
    width: 200px;
    height: 200px;
    padding: 2rem;
    background: #fff7a8;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.15),
        0 1px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: grab;
}

.par-post-it::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: #d22;
    /* couleur punaise */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.par-avis-slider {
    position: absolute;
    /* width: 700px; */
    /* height: 200px; */
    perspective: 100px;
    top: 10vh;
    right: 0;
    /* transform: translateX(-50%); */
    list-style: none;
}

.par-avis-slider li {
    position: absolute;
    aspect-ratio: 2/3;
    width: 700px;
    height: 200px;
    background-color: var(--wp--preset--color--accent-3);
    border: dotted 1px white;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2rem;
    cursor: pointer;
}

/* Quote d’ouverture */
.par-avis-slider li::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 20px;

    width: 40px;
    height: 40px;

    background-image: url("https://parutto01.fr/wp-content/uploads/2026/01/quote.png");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.4;
    pointer-events: none;
}

/* Quote de fermeture */
.par-avis-slider li::after {
    content: "";
    position: absolute;
    bottom: 15px;
    right: 20px;

    width: 40px;
    height: 40px;

    background-image: url("https://parutto01.fr/wp-content/uploads/2026/01/quote.png");
    background-repeat: no-repeat;
    background-size: contain;

    transform: rotate(180deg);
    /* inversion pour fermeture */
    opacity: 0.4;
    pointer-events: none;
}

.par-avis-slider li:nth-child(1) {
    right: 0;
    top: 0;
}

.par-avis-slider li:nth-child(2) {
    right: 20px;
    top: 20px;
}

.par-avis-slider li:nth-child(3) {
    right: 40px;
    top: 40px;
}

.par-avis-slider li:nth-child(4) {
    right: 60px;
    top: 60px;
}

.par-avis-slider li:nth-child(5) {
    right: 80px;
    top: 80px;
}

.par-avis-slider li:nth-child(6) {
    right: 100px;
    top: 100px;
}

.par-avis-slider li:nth-child(7) {
    right: 120px;
    top: 120px;
}

.par-avis-slider li:nth-child(8) {
    right: 140px;
    top: 140px;
}

.par-avis-slider li:nth-child(9) {
    right: 160px;
    top: 160px;
}

.par-avis-slider li:nth-child(10) {
    right: 180px;
    top: 180px;
}

.par-avis-slider li:nth-child(11) {
    right: 200px;
    top: 200px;
}

.par-avis-slider li:nth-child(12) {
    right: 220px;
    top: 220px;
}

.parutto-hidden {
    display: none;
}

.wp-block-details p {
    overflow: hidden;
}

.wp-block-details summary {
    cursor: pointer;
}

.wp-block-details[open] summary::after {
    transform: rotate(90deg);
}


/******************************************/
/************** Responsive ****************/
/******************************************/

/* Tablette */
@media (min-width: 768px) and (max-width: 1023px) {
    .par-post-it {
        width: 150px;
        height: 150px;
        font-size: 0.75rem;
    }

    .wp-block-group.parutto-relative>figure.parutto-truelle {
        top: 115px;
        right: -54px;
    }

	.par-grue-mobile {
		 background-image: url(https://parutto01.fr/wp-content/uploads/2026/02/MOBILE-grue-Parutto.jpg) !important;
	}
/*     .par-landing-bkgd {
        background-position: 27% 0%
    } */
}

/* Mobile */
@media (max-width: 767px) {
    .wp-block-navigation__responsive-close {
        padding: 3rem;
    }
	#wp-block-themeisle-blocks-advanced-columns-2c60bc77 {
		 background-image: url(https://parutto01.fr/wp-content/uploads/2026/02/MOBILE-grue-Parutto.jpg) !important;
	}
	.par-title-bkg{
		backdrop-filter: blur(12px);
	}
	.parutto-landing-title-bloc {
		max-width: 55vw;
	}
  .parutto-landing-bouton {
    width: 100%;
  }
.par-section .par-section2 .par-inner-section {
    height: auto;
}
	
	.par-section2 {
  min-height: auto; /* ou simplement retire min-height */
  overflow: visible; /* pour éviter l’ascenseur interne */
}
	.par-inner-section2 .parutto-inner-section3 .par-inner-section4 {
    max-width: 95vw;
} 

  .parutto-landing-bouton .wp-block-button__link {
    display: inline-block;
    width: 100%;
    text-align: center;

    /* règles IMPORTANTES */
    white-space: normal !important;     /* autorise retour à la ligne */
    word-break: keep-all !important;    /* interdit la coupure de mots */
    overflow-wrap: normal !important;   /* pas de casse sauvage */

    line-height: 1.3;
    padding: 14px 18px;
  }
    .par-landing-bkgd {
        padding-left: 10vw !important;
        padding-right: 0vw !important;
        background-position: 0% center !important;
    }

    .par-logo {
        width: 80px;
    }

    .parutto-landing-batir {
        font-size: var(--wp--preset--font-size--x-large) !important;
    }

    .parutto-landing-partenaire {
        font-size: var(--wp--preset--font-size--large) !important;
    }

    div.p-form-row {
        flex-direction: column;
        gap: 10px;
    }

    .wp-container-core-group-is-layout-d4530fce {
        align-items: start;
    }

    .wp-block-group.parutto-relative>figure.parutto-truelle {
        position: relative !important;
    }

    .parutto-gradient-map .parutto-card-content {
        background: linear-gradient(to right, #F5B169, #F5B169);
    }

    .par-avis-slider li:nth-child(1) {
        right: 0;
        top: 0;
    }

    .par-avis-slider {
        width: 300px;
        height: 300px;
        perspective: 100px;
        top: 0vh;
        right: 0;
        /* transform: translateX(0%); */
    }

    .par-avis-slider li {
        width: 300px;
        height: 300px;
    }

    .par-avis-slider li:nth-child(2) {
        right: 10px;
        top: 10px;
    }

    .par-avis-slider li:nth-child(3) {
        right: 20px;
        top: 20px;
    }

    .par-avis-slider li:nth-child(4) {
        right: 30px;
        top: 30px;
    }

    .par-avis-slider li:nth-child(5) {
        right: 40px;
        top: 40px;
    }

    .par-avis-slider li:nth-child(6) {
        right: 50px;
        top: 50px;
    }

    .par-avis-slider li:nth-child(7) {
        right: 60px;
        top: 60px;
    }

    .par-avis-slider li:nth-child(8) {
        right: 70px;
        top: 70px;
    }

    .par-avis-slider li:nth-child(9) {
        right: 80px;
        top: 80px;
    }

    .par-avis-slider li:nth-child(10) {
        right: 90px;
        top: 90px;
    }

    .par-avis-slider li:nth-child(11) {
        right: 100px;
        top: 100px;
    }

    .par-avis-slider li:nth-child(12) {
        right: 110px;
        top: 120px;
    }

    .parutto-hidden {
        display: none;
    }

    .par-post-it {
        width: 100px;
        height: 100px;
        font-size: 0.65rem;
        padding: 0.5rem;
    }
}