/* ==========================================================================
   Nuance d'intérieur - léger rafraîchissement visuel (Shokola, novembre 2026)
   Chargé après wt-styles.css. Pour revenir à l'apparence précédente :
   retirer la ligne refresh-2026.css dans views/subviews/header.php.
   Rien ne change dans la structure, les textes ni les images.
   ========================================================================== */

:root {
    --ni-rose: #d71d58;
    --ni-rose-fonce: #b8174a;
    --ni-gris: #535456;
    --ni-gris-clair: #a2a3a5;
    --ni-texte: #4b4c4e;
    --ni-filet: #e4e4e6;
}

/* --- Rendu général --- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *:before, *:after { transition: none !important; animation: none !important; } }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
::selection { background: var(--ni-rose); color: #fff; }

/* Focus clavier visible (il était supprimé partout) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--ni-rose); outline-offset: 2px;
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(215, 29, 88, .3); border-radius: 50%; }
input[type="checkbox"]:focus-visible { border-radius: 2px; }

/* --- Textes : un peu plus grands et plus aérés --- */
article p, #tinymce p { font-size: 16px; line-height: 1.65; color: var(--ni-texte); }
article li, #tinymce li { font-size: 16px; line-height: 1.55; color: var(--ni-texte); margin-bottom: 3px; }
#main a, #main a:visited { transition: color .2s ease, background-color .2s ease, border-color .2s ease, opacity .2s ease; }
article p a:hover, article li a:hover { text-decoration: underline; text-underline-offset: 3px; }
article h1, #tinymce h1 { line-height: 1.12; }
article h2, #tinymce h2 { line-height: 1.25; font-size: 24px; }
article h3, #tinymce h3 { line-height: 1.3; font-size: 19px; }
/* Titres justifiés (réglage de l'éditeur) : grands espaces entre les mots, surtout sur mobile */
article h1[style*="justify"], article h2[style*="justify"], article h3[style*="justify"] { text-align: left !important; }

/* --- Menu principal --- */
#menu_1 a { transition: color .2s ease; }
#menu_1 li { transition: border-color .25s ease; }

/* --- Tuiles des sous-menus : pleine largeur, transitions --- */
#subMenu a { transition: background-color .2s ease, transform .2s ease; }
#subMenu a:hover { transform: translateY(-2px); }
@media (min-width: 841px) {
    #subMenu { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); column-gap: 12px; row-gap: 12px; }
}

/* --- Vignettes (prestations, réalisations) : léger zoom au survol --- */
.node_116 .child a, .node_118 .child a { position: relative; }
.node_116 .child img, .node_118 .child img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.node_116 .child a:hover img, .node_118 .child a:hover img { transform: scale(1.05); }
.node_116 .child .title, .node_118 .child .title { z-index: 2; }
.node_116 .child .mask, .node_118 .child .mask { z-index: 1; }

/* --- Listes (témoignages, coups de coeur, Nuance d'intérieur) --- */
#main .child.clear { padding: 18px 0 20px; border-bottom: 1px solid var(--ni-filet); }
#main .child.clear:last-child { border-bottom: 0; }
#main .child.clear h2 { margin: 0 0 6px; }
#main .child .childSousTitre { margin: 0 0 8px; padding: 0; border: 0; color: var(--ni-rose); font-family: 'open_sanscondensed_light', sans-serif; font-weight: 400; font-size: 22px; line-height: 1.2; }

/* --- Accueil --- */
#lastRea h2.homeBloc, #coupCoeur h2.homeBloc { font-family: 'open_sanscondensed_light'; font-size: 30px; line-height: 1.15; font-weight: 400; margin: 0; }
#lastRea h2.homeBloc { position: relative; margin-bottom: 15px; padding-left: 20px; color: var(--ni-gris); }
#lastRea h2.homeBloc:before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 1.15em; background: var(--ni-rose); }
#coupCoeur h2.homeBloc { background: var(--ni-rose); color: #fff; padding: 8px 19px; }
#lastRea a img, #coupCoeur a img { display: block; height: auto; transition: opacity .25s ease; }
#lastRea a:hover img, #coupCoeur a:hover img { opacity: .9; }
#lastRea .viewAll span, #coupCoeur .viewAll span { transition: background-color .2s ease; }
#lastRea .viewAll:hover span, #coupCoeur .viewAll:hover span { background: var(--ni-rose); }
h1.logoH1 { margin: 0; padding: 0; border: 0; font-size: inherit; line-height: inherit; font-weight: inherit; }
h1.logoH1:before { display: none; }

/* --- Formulaire de contact --- */
#mod_content_structure_type_contact .pfbc-label label,
#mod_content_structure_type_contact .pfbc-label { font-family: 'open_sanscondensed_light', sans-serif; font-weight: normal !important; font-size: 16px; color: var(--ni-gris); }
#mod_content_structure_type_contact .pfbc-label strong, #mod_content_structure_type_contact .pfbc-required { color: var(--ni-rose); }
#mod_content_structure_type_contact .pfbc-element { margin-bottom: 12px; }
#mod_content_structure_type_contact input[type="text"],
#mod_content_structure_type_contact input[type="email"],
#mod_content_structure_type_contact input[type="tel"],
#mod_content_structure_type_contact select,
#mod_content_structure_type_contact textarea {
    font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: #333;
    padding: 10px 12px; border: 1px solid #cfd0d2; border-radius: 2px; background: #fff; box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
#mod_content_structure_type_contact select { height: auto; }
#mod_content_structure_type_contact textarea { min-height: 140px; line-height: 1.5; }
#mod_content_structure_type_contact input[type="text"]:focus,
#mod_content_structure_type_contact select:focus,
#mod_content_structure_type_contact textarea:focus { border-color: var(--ni-rose); box-shadow: 0 0 0 3px rgba(215, 29, 88, .12); outline: 0; }
#mod_content_structure_type_contact .pfbc-radio-buttons label { margin-right: 14px; font-family: 'open_sanscondensed_light', sans-serif; font-size: 16px; color: var(--ni-texte); cursor: pointer; }
#mod_content_structure_type_contact .pfbc-radio-buttons input { margin: 0 5px 0 0; vertical-align: -1px; accent-color: var(--ni-rose); }
#mod_content_structure_type_contact .pfbc-buttons button,
#mod_content_structure_type_contact .pfbc-buttons .ui-button {
    background: var(--ni-rose) !important; border: 0 !important; border-radius: 2px; color: #fff !important;
    font-family: 'open_sanscondensed_light', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: .05em;
    padding: 0 !important; cursor: pointer; transition: background-color .2s ease; box-shadow: none !important;
}
#mod_content_structure_type_contact .pfbc-buttons .ui-button-text { padding: 11px 30px !important; }
#mod_content_structure_type_contact .pfbc-buttons button:hover,
#mod_content_structure_type_contact .pfbc-buttons .ui-button:hover { background: var(--ni-rose-fonce) !important; }
#mod_content_structure_type_contact .pfbc-buttons .ui-icon { display: none; }

/* --- Barre d'outils à droite --- */
#float_tool a, #float_tool div { transition: background-color .2s ease; }

/* --- Carrousel des réalisations --- */
#tS2 .owl-item a img { transition: opacity .25s ease; }
#tS2 .owl-item a:hover img { opacity: .88; }

/* --- Pied de page --- */
footer a { transition: color .2s ease, opacity .2s ease; }
footer #Reseaux a:hover { opacity: .7; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 767px) {
    /* Texte justifié : aligné à gauche, plus lisible sur un écran étroit */
    article p[style*="justify"], article div[style*="justify"], article li[style*="justify"], article span[style*="justify"] { text-align: left !important; }
    article p, article li { font-size: 16px; }
    article h1, #tinymce h1 { font-size: 28px; }
    article h2, #tinymce h2 { font-size: 22px; }

    /* Accueil : les 5 prestations en liste lisible au lieu de bandes coupées */
    .kwicks { height: auto !important; max-width: none !important; width: 100% !important; margin: 0 0 10px !important; overflow: visible !important; }
    .kwicks > li {
        position: relative !important; left: auto !important; right: auto !important; top: auto !important;
        width: 100% !important; height: 140px !important; margin: 0 0 8px !important; float: none !important; overflow: hidden !important;
    }
    .kwicks > li img { opacity: 1 !important; width: 100% !important; height: 100% !important; object-fit: cover; position: static; }
    .kwicks > li .title, .kwicks > li.kwicks-expanded .title {
        top: auto !important; bottom: 0; left: 0; width: 100% !important; height: auto !important; box-sizing: border-box;
        padding: 10px 14px !important; background: rgba(83, 84, 86, .88) !important; font-size: 18px;
    }
    .kwicks > li p, .kwicks > li.kwicks-expanded p { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; width: 0 !important; height: 0; overflow: visible; background: none !important; font-size: 0 !important; color: transparent !important; }
    .kwicks .link, .kwicks a.link { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; width: auto !important; height: auto !important; background: transparent !important; font-size: 0 !important; z-index: 3; }

    /* Tableaux de mise en page (coups de coeur...) : hauteur fixe des cellules qui faisait chevaucher texte et image */
    article table td { height: auto !important; }
    #gmap0, #map0, article iframe[src*="google.com/maps"] { width: 100% !important; max-width: 100% !important; }
    article table td > img:first-child, article table td > a:first-child > img { display: block; height: auto; }

    /* Liste des témoignages */
    #main .child .childSousTitre { font-size: 20px; }
}

/* ==========================================================================
   Lisibilité (Shokola, 11/2026) : gris un peu plus foncé là où le contraste
   était insuffisant (texte blanc ou gris clair sur gris clair : 2,5:1 au lieu de 4,5:1 minimum)
   ========================================================================== */
#subMenu a { background-color: #747578; }
#subMenu a:hover, #subMenu a.active { background-color: var(--ni-rose); }
#ariane li, #ariane li a { color: #747578 !important; }
#ariane li a:hover { color: var(--ni-rose) !important; }

/* ==========================================================================
   Impression (bouton « Imprimer ») : la page seule, sans menus ni outils
   ========================================================================== */
@media print {
    #float_tool, #menu_1, #subMenu, #ariane, footer, .realNav, .realAutres, .realAutres ~ *, .viewAll, nav, iframe { display: none !important; }
    /* Photos d'une réalisation : en grille de 3 au lieu du carrousel */
    #tS2 .owl-stage-outer { overflow: visible !important; height: auto !important; }
    #tS2 .owl-stage { transform: none !important; width: auto !important; }
    #tS2 .owl-item { float: none !important; display: inline-block !important; vertical-align: top; width: 32% !important; margin: 0 1% 1% 0 !important; }
    #tS2 .owl-item img { width: 100% !important; height: auto !important; }
    #tS2 .owl-nav, #tS2 .owl-dots, #tS2 .owl-item.cloned { display: none !important; }
    body, #contentWrapper, #main, article { background: #fff !important; color: #000 !important; width: auto !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
    article p, article li { font-size: 11pt; line-height: 1.45; color: #000 !important; }
    article h1, article h2, article h3 { page-break-after: avoid; break-after: avoid; color: #000 !important; }
    img { max-width: 100% !important; page-break-inside: avoid; break-inside: avoid; }
    a, a:visited { color: #000 !important; text-decoration: none; }
    article p a[href^="http"]:after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}