/* ==========================================================
   UW-CORE
   Socle commun au moteur front-office (composants partagés
   par plusieurs modules). Ne rien ajouter ici qui ne serve
   qu'à un seul module — voir assets/css/modules/.
========================================================== */

/* Variables de Maquette_Utah.html (mêmes noms), pour pouvoir coller son CSS
   quasi tel quel dans les modules sans le retraduire à la main. Ne remplacent
   pas --couleur/--couleur2/--couleur3/--couleur4 (couleurs du site, back-office). */
:root {
    --red: #ef2028;
    --ink: #0c1320;
    --muted: #5d6676;
    --bg: var(--fond, #fdfdff); /* --fond = « Fond du site » des Paramètres (includes/css.inc.php), absent = blanc */
    --card: #fff;
    --line: #e0e4ec;
    --night: #0a111c;

    /* .kicker / .kicker.green dans Maquette_Utah.html — réutilisées par plusieurs
       modules (piliers, portfolio), centralisées ici pour ne pas les répéter en dur
       dans chaque fichier CSS de module. */
    --kicker: #9a83ff;
    --kicker-green: #42dcb1;
}

/* Mode sombre (.dark de Maquette_Utah.html, mêmes valeurs) : classe posée sur <html>
   par includes/meta.inc.php + assets/js/modules/theme.js, seulement si « Mode clair /
   sombre » est activé dans Paramètres du menu. Les modules qui utilisent ces variables
   basculent seuls ; les couleurs écrites en dur sont reprises module par module
   (blocs « Mode sombre » en fin de fichier de chaque module). Les fonds de section
   choisis en backoffice (.sec-theme-c1…c4, css.inc.php) ne changent pas. */
html.uw-dark {
    --ink: #f3f5fb;
    --muted: #b5bdcc;
    --bg: var(--fond-sombre, #101721); /* « Fond en mode sombre » (Paramètres, includes/css.inc.php) */
    --card: #19222f;
    --line: #344052;
    --fond: var(--bg); /* le « Fond du site » des Paramètres passe en fond sombre */
    color-scheme: dark;
}

html.uw-dark body {
    color: rgba(243, 245, 251, 0.85);
    background-color: var(--bg);
}

/* Titres : TOUS dans la couleur du texte courant (body ci-dessus), demande client —
   remplace la couleur 2 du backoffice (css.inc.php) et les couleurs de titre propres
   aux modules (!important : passe aussi devant les couleurs posées en inline). */
html.uw-dark h1,
html.uw-dark h2,
html.uw-dark h3,
html.uw-dark h4,
html.uw-dark h5,
html.uw-dark h6,
html.uw-dark [class^='heading-'] {
    color: rgba(243, 245, 251, 0.85) !important;
}

/* ══════════════════════════════════════════════
   BASE — reprise de css/style.css (2026-09-29)
   Uniquement les règles encore utilisées par le front-office, valeurs
   inchangées. Placées en tête de ce fichier pour garder l'ordre de cascade
   d'origine (style.css passait avant le reste du socle et des modules).
   Non reprises car sans effet : couleurs de liens a/a:hover/a:focus
   (écrasées par includes/css.inc.php) et :root{--script} (déjà défini
   par css.inc.php depuis le backoffice).
   ══════════════════════════════════════════════ */

/* Reset */
a:focus,
button:focus {
    outline: none !important;
}

button::-moz-focus-inner {
    border: 0;
}

*:focus {
    outline: none;
}

blockquote {
    padding: 0;
    margin: 0;
    border-left: 0;
}

input,
button,
select,
textarea {
    outline: none;
}

input:-webkit-autofill~label {
    color: #000000 !important;
}

label {
    margin-bottom: 0;
}

p {
    margin: 0;
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

ul li,
ol li {
    display: block;
}

dl {
    margin: 0;
}

dt,
dd {
    line-height: inherit;
}

dt {
    font-weight: inherit;
}

dd {
    margin-bottom: 0;
}

cite {
    font-style: normal;
}

form {
    margin-bottom: 0;
}

address {
    margin-top: 0;
    margin-bottom: 0;
}

figure {
    margin-bottom: 0;
}

html p a:hover {
    text-decoration: none;
}

small,
.small {
    display: block;
    font-size: 12px;
    line-height: 1.5;
}

mark,
.mark {
    padding: 3px 5px;
    color: #ffffff;
    background: #C69F71;
}

code {
    padding: 10px 5px;
    border-radius: 0.2rem;
    font-size: 90%;
    color: #111111;
    background: #edeff4;
}

p [data-toggle='tooltip'] {
    padding-left: .25em;
    padding-right: .25em;
    color: #333;
}

p [style*='max-width'] {
    display: inline-block;
}

::selection {
    background: #333;
    color: #ffffff;
}

/* Liens (la couleur vient de includes/css.inc.php) */
a {
    transition: all 0.3s ease-in-out;
}

a,
a:focus,
a:active,
a:hover {
    text-decoration: none;
}

a[href*='tel'],
a[href*='mailto'] {
    white-space: nowrap;
}

/* Images */
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.img-responsive {
    width: 100%;
}

hr {
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #d7d7d7;
}

.section-title hr {
    border-color: #FC7C2F;
}

.hidden {
    display: none;
}

/* Police script (surtitres) — --script défini dans includes/css.inc.php */
.script {
    display: block;
    font-family: var(--script);
    font-size: 1.6rem;
    margin-bottom: 8px;
}

/* Fond sombre (bandeaux, footer, CTA) : titres en couleur principale */
.context-dark,
.context-dark h1,
.context-dark h2,
.context-dark h3,
.context-dark h4,
.context-dark h5,
.context-dark h6,
.context-dark [class^='heading-'] {
    color: var(--couleur);
}

/* Surtitres avec trait (portfolio, intro 2/3, avis, partenaires / CTA) */
.title-line {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    color: var(--couleur);
    font-size: 1.5rem;
    font-family: var(--script);
    /* Casse saisie respectée (2026-10-09 ; avant : capitalize = majuscule forcée à chaque mot) */
}

.title-line::before {
    content: "";
    width: 40px;
    height: 2px;
    margin-top: 7px;
    background: var(--couleur);
}

.title-line-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    flex-direction: column-reverse;
}

.title-line-cta::before {
    content: "";
    width: 40px;
    height: 2px;
    background: var(--couleur3);
}

.text-wrapper {
    max-width: 700px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 991px) {
    .text-wrapper {
        max-width: 100%;
    }
}

/* Image avec zoom + voile au survol (page générique, fiche produit) */
.imghover {
    position: relative;
    overflow: hidden;
}

.imghover img {
    width: 100%;
    display: block;
    transition: transform .6s ease;
}

.imghover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background .4s ease;
    z-index: 1;
}

.imghover:hover img {
    transform: scale(1.05);
}

.imghover:hover::after {
    background: rgba(0, 0, 0, 0.25);
}

/* Icônes (réseaux sociaux : includes/page_reseau_top|footer.inc.php) */
.icon {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
}

.icon::before {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    font-weight: 400;
    font-style: normal;
    speak: none;
    text-transform: none;
}

.icon-circle {
    border-radius: 50%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.icon-circle i,
.icon-circle i::before {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    display: inline;
    line-height: 1;
}

.icon-circle-md {
    padding: 10px;
    width: 48px;
    height: 48px;
}

.icon-sm {
    font-size: 22px;
    line-height: 28px;
}

/* Mise en page */
.page {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
}

[style*='z-index: 1000;'] {
    z-index: 1101 !important;
}

/* Espacements automatiques entre éléments */
*+p {
    margin-top: 15px;
}

h2+p,
.heading-2+p {
    margin-top: 12px;
}

p+h2,
p+.heading-2 {
    margin-top: 15px;
}

p+p {
    margin-top: 15px;
}

img+p {
    margin-top: 15px;
}

h3+img {
    margin-top: 42px;
}

h3+p {
    margin-top: 28px;
}

*+.row {
    margin-top: 60px;
}

.row+h3,
.row+.heading-3 {
    margin-top: 80px;
}

.row+.row {
    margin-top: 35px;
}

@media (min-width: 1200px) {
    .row+.row {
        margin-top: 60px;
    }
}

/* Sections (padding vertical) */
.section-sm,
.section-md,
.section-lg,
.section-xl {
    padding: 50px 0;
}

@media (max-width: 991.98px) {
    section.section-sm:first-of-type,
    section.section-md:first-of-type,
    section.section-lg:first-of-type,
    section.section-xl:first-of-type,
    section.section-xxl:first-of-type {
        padding-top: 40px;
    }
}

@media (min-width: 768px) {
    .section-sm {
        padding: 60px 0 0px 0px;
    }

    .section-md {
        padding: 70px 0;
    }

    .section-lg {
        padding: 85px 0;
    }

    .section-xl {
        padding: 100px 0;
    }
}

@media (min-width: 992px) {
    .section-md {
        padding: 80px 0 90px;
    }

    .section-lg {
        padding: 100px 0;
    }

    .section-xl {
        padding: 115px 0;
    }
}

@media (min-width: 1200px) {
    .section-lg {
        padding: 115px 0;
    }

    .section-xl {
        padding: 135px 0;
    }
}

/* Message d'information (remplace .alert/.alert-* de Bootstrap) : avertissement
   par défaut, variantes succès / erreur (formulaires de contact). */
.uw-alert {
    padding: 14px 18px;
    border: 1px solid #ffe8a1;
    border-radius: 8px;
    background: #fff8e1;
    color: #6b5200;
    text-align: center;
}

.uw-alert--success {
    border-color: #cde8d2;
    background: #edf7ee;
    color: #245b2a;
}

.uw-alert--error {
    border-color: #f5c2c7;
    background: #fdecec;
    color: #842029;
}

/* Apparition en fondu quand le message est affiché (attribut hidden retiré en JS) */
.uw-alert {
    animation: uw-alert-in .3s ease;
}

@keyframes uw-alert-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Message d'erreur sous un champ de formulaire (remplace text-danger small mt-2),
   rempli par assets/js/modules/contact-form.js — ne prend pas de place s'il est vide. */
.uw-form-error {
    display: block;
    margin-top: .5rem;
    font-size: 12px;
    line-height: 1.5;
    color: #dc3545;
}

.uw-form-error:empty {
    display: none;
}

[aria-invalid="true"] {
    border-color: #dc3545 !important;
}

/* Messages de formulaire (index.php, js/script.js) */
#form-output-global {
    position: fixed;
    bottom: 30px;
    left: 15px;
    z-index: 2000;
    visibility: hidden;
    transform: translate3d(-500px, 0, 0);
    transition: .3s all ease;
}

#form-output-global.active {
    visibility: visible;
    transform: translate3d(0, 0, 0);
}

@media (min-width: 576px) {
    #form-output-global {
        left: 30px;
    }
}

.snackbars {
    padding: 9px 16px;
    margin-left: auto;
    margin-right: auto;
    color: #ffffff;
    text-align: left;
    background-color: #151515;
    border-radius: 0;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15);
    font-size: 14px;
}

.snackbars p span:last-child {
    padding-left: 14px;
}

@media (min-width: 576px) {
    .snackbars {
        max-width: 540px;
        padding: 12px 15px;
        font-size: 15px;
    }
}

/* Bouton retour en haut (couleurs dans includes/css.inc.php) */
.ui-to-top {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 1090;
    width: 60px;
    height: 60px;
    font-size: 20px;
    line-height: 56px !important;
    overflow: hidden;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;
    /* Toujours en bas à droite, mais caché tout en haut, hors de l'écran (-100vh) :
       en apparaissant il descend depuis le haut de la page jusqu'à sa place, et
       repart vers le haut en disparaissant (avant : il montait depuis le bas).
       visibility retardée à la disparition pour laisser l'animation se jouer. */
    transform: translate3d(0, -100vh, 0);
    visibility: hidden;
    transition: transform .7s cubic-bezier(.22, .8, .3, 1), background .3s ease, visibility 0s linear .7s;
}

.ui-to-top:hover {
    background: var(--couleur2);
    text-decoration: none;
}

.ui-to-top:focus {
    color: #ffffff;
}

.ui-to-top.active {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition: transform .7s cubic-bezier(.22, .8, .3, 1), background .3s ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .ui-to-top,
    .ui-to-top.active {
        transition: none;
    }
}

@media (min-width: 576px) {
    .ui-to-top {
        right: 40px;
        bottom: 40px;
    }
}

/* Swiper — règles de l'ancien thème, gardées ici (et non dans carousel.css)
   pour rester chargées AVANT assets/css/vendor/swiper-bundle.min.css,
   comme quand elles étaient dans style.css : le vendor garde la priorité. */
.swiper-container {
    display: flex;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    height: auto;
    width: 100%;
    z-index: 1;
    flex-shrink: 0;
}

.swiper-wrapper {
    position: relative;
    z-index: 1;
    display: flex;
    align-self: stretch;
    align-items: stretch;
    width: 100%;
    height: auto;
    min-height: inherit;
    transition-property: transform;
    box-sizing: content-box;
}

.swiper-container-android .swiper-slide,
.swiper-wrapper {
    transform: translate3d(0, 0, 0);
}

.swiper-container .swiper-notification {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    opacity: 0;
    z-index: -1000;
}

.swiper-pagination {
    position: absolute;
    display: block;
    text-align: center;
    transition: .3s;
    transform: translate3d(0, 0, 0);
    z-index: 10;
}

.swiper-pagination.swiper-pagination-hidden {
    opacity: 0;
}

.swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 100%;
    background: rgba(255, 255, 255, 0.6);
    transition: .2s;
}

.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active,
.swiper-pagination .swiper-pagination-bullet:hover {
    background: white;
}

.swiper-pagination.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
}

.swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════════════
   TYPOGRAPHIE — BODY
   Déplacé depuis css/style.css (2026-09-29), valeurs inchangées. Note :
   ce font-family "Poppins" masque la police backoffice posée sur html{}
   (includes/css.inc.php) pour tout le texte courant — seuls h1-h5 et p la
   reçoivent directement (règle !important du même fichier). Préexistant.
   ══════════════════════════════════════════════ */
/* Texte courant comme la maquette validée (font: 15px/1.7, poids normal, sans resserrement des
   lettres) — 2026-10-08. Avant : line-height 1.66667, font-weight 300, letter-spacing -0.03em. */
body {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 1.7;
    font-weight: 400;
    color: rgba(21, 21, 21, 0.8);
    background-color: var(--fond, #ffffff); /* « Fond du site » (Paramètres), blanc si non réglé */
    -webkit-text-size-adjust: none;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* ══════════════════════════════════════════════
   TYPOGRAPHIE — H1-H6
   Déplacé depuis css/style.css (2026-09-11). La couleur (var(--couleur2))
   reste dans includes/css.inc.php (règle pilotée par les couleurs
   backoffice, hors périmètre de ce fichier). Le font-family "Playfair
   Display" ci-dessous est déjà écrasé pour h1-h5 (pas h6) par la police
   backoffice ($police, !important, includes/css.inc.php) — comportement
   préexistant conservé tel quel.
   ══════════════════════════════════════════════ */
h1,
h2,
h3,
h4,
h5,
h6,
[class^='heading-'] {
    font-family: "Playfair Display", serif;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: 400;
    letter-spacing: 0;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
[class^='heading-'] a {
    color: inherit;
}

/* h1 / h2 : taille unique pour tout le site (valeurs de Maquette_Utah.html).
   Les modules ne redéfinissent plus la taille de leurs titres — une variante
   éventuelle passe par une classe dédiée, jamais par un h2 retaillé. */
h1,
.heading-1 {
    font-size: clamp(35px, 3.55vw, 51px);
    line-height: 1.2;
    letter-spacing: -2px;
}

h2,
.heading-2 {
    font-size: 30px;
    line-height: 1.25;
    letter-spacing: -.045em;
}

@media (max-width: 800px) {
    h2,
    .heading-2 {
        font-size: 25px;
    }
}

h2.heading-font,
.heading-2.heading-font {
    font-weight: 400;
    letter-spacing: -0.03em;
    text-transform: capitalize;
}

h3,
.heading-3 {
    font-size: 24px;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    h3,
    .heading-3 {
        font-size: 36px;
        line-height: 1.33333;
    }
}

h3.heading-font,
.heading-3.heading-font {
    font-weight: 600;
    letter-spacing: -0.03em;
}

h4,
.heading-4 {
    font-size: 22px;
    line-height: 1.5;
}

@media (min-width: 1200px) {
    h4,
    .heading-4 {
        font-size: 24px;
        line-height: 1.2;
    }
}

h5,
.heading-5 {
    font-size: 18px;
    line-height: 1.05556;
}

h6,
.heading-6 {
    font-size: 15px;
    line-height: 1.06667;
}

.heading-font + .heading-font {
    margin-top: 20px;
}

.heading-font + h2.heading-font {
    margin-top: 35px;
}

/* Titre de section (h2 d'en-tête de chaque module) : prend la taille h2 par
   défaut ci-dessus, cette classe ne sert qu'à l'alignement (modificateurs). */

/* Section de module : padding vertical commun à tous les modules de
   l'accueil (valeur .portfolio de Maquette_Utah.html). Les modules ne
   définissent plus leur propre padding — exceptions assumées : slider/hero,
   compteur, réassurance, CTA, intro 2/3 (mises en page pleine hauteur/bandeau). */
.uw-section {
    padding: 45px 0 45px;
}

/* Alignement : par défaut à gauche (pas de classe nécessaire) — ajouter le
   modificateur qui correspond à la disposition du module. */
.uw-section-title--center {
    text-align: center;
}

.uw-section-title--right {
    text-align: right;
}

/* Remplace .container (Bootstrap) : même formule que .wrap dans Maquette_Utah.html.
   N'affecte que la largeur/le centrage du conteneur — .row/.col-* de Bootstrap à
   l'intérieur continuent de fonctionner normalement (bootstrap.css reste chargé). */
.uw-wrap {
    max-width: 1240px;
    width: calc(100% - 96px);
    margin: auto;
}

@media (max-width: 1150px) {
    .uw-wrap {
        width: calc(100% - 64px);
    }
}

@media (max-width: 800px) {
    .uw-wrap {
        width: calc(100% - 40px);
    }
}

/* Fond sombre partagé (ex: Maquette_Utah.html .dark-section) : réutilisé par plusieurs
   sections dark (piliers, et plus tard méthode). Le padding/positionnement reste au
   module (ex: .uw-pilier-section), qui s'ajoute à côté de cette classe dans le markup. */
.uw-dark-section {
    background:
        radial-gradient(ellipse at 50% 70%, #17202a 0, transparent 65%),
        #0a1422;

    color: #fff;
}

/* Bouton unique du site — .uw-btn (base, comme .btn dans Maquette_Utah.html)
   + .uw-btn-primary (comme .btn.red) / .uw-btn-outline (comme .btn seul,
   sans .red : fond clair, c'est le style "par défaut" de la maquette).
   Couleur du primaire volontairement dynamique (var(--couleur), pas --red
   fixe) : ce projet sert de base réutilisée pour de futurs sites clients,
   chacun avec sa propre couleur de marque configurée en backoffice — voir
   [[feedback-uw-engine-architecture]] pour la distinction generale entre
   couleurs fixes maquette (design ponctuel) et --couleur* (identité client). */
.uw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;

    padding: 15px 21px;

    border-radius: var(--btn-radius, 7px);

    font-size: 14px;

    text-decoration: none;

    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease;
}

.uw-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px #1112;
}

/* Icône dans un .uw-btn (ex: <i class="fas fa-utensils">) : hérite la couleur
   du texte du bouton plutôt que la couleur par défaut d'une police d'icône
   (souvent invisible sur un fond .uw-btn-primary coloré). */
.uw-btn i {
    color: inherit;
}

.uw-btn-primary {
    color: #fff;
    background: var(--couleur);
    border: 1px solid var(--couleur);
}

.uw-btn-primary:hover {
    color: #fff;
}

.uw-btn-outline {
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
}

/* Mode sombre : boutons principaux en couleur 2 (demande client), survol compris.
   html.uw-dark + :hover = plus fort que les couleurs propres à un module
   (ex : boutons noirs du blog, actualite.css). */
html.uw-dark .uw-btn-primary,
html.uw-dark .uw-btn-primary:hover {
    color: #fff;
    background: var(--couleur2);
    border-color: var(--couleur2);
}

/* Mode sombre : bouton secondaire transparent + contour clair (comme .btn.ghost de la maquette),
   contour en couleur 2 au survol */
html.uw-dark .uw-btn-outline,
html.uw-dark .uw-btn-outline:hover {
    color: var(--ink);
    background: transparent;
    border-color: rgba(243, 245, 251, .3);
}

html.uw-dark .uw-btn-outline:hover {
    border-color: var(--couleur2);
}

@media (prefers-reduced-motion: reduce) {
    .uw-btn,
    .uw-btn:hover {
        transition: none;
        transform: none;
    }
}