/* ===========================================================================
   Petit Quartier — ajustements de marque
   ---------------------------------------------------------------------------
   Ce fichier est chargé automatiquement par YOOtheme (LoadThemeHead) et n'est
   jamais écrasé par le personnalisateur. Il porte ce qui relève de l'identité :
   la couleur d'accent et quelques réglages typographiques.
   Le reste — mise en page, contenus, style de base — se règle dans YOOtheme.
   =========================================================================== */

:root {
    --pq-rouge: #e40506;
    --pq-rouge-fonce: #b80405;
    --pq-encre: #1a1a1a;
}

/* --------------------------------------------------------------- accents */

.uk-button-primary {
    background-color: var(--pq-rouge);
    border-color: var(--pq-rouge);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
    background-color: var(--pq-rouge-fonce);
    border-color: var(--pq-rouge-fonce);
}

.uk-link,
a:not([class]) {
    color: var(--pq-rouge-fonce);
    text-underline-offset: 0.2em;
}

.uk-link:hover,
a:not([class]):hover {
    color: var(--pq-rouge);
}

.uk-text-primary {
    color: var(--pq-rouge) !important;
}

.uk-section-primary:not(.uk-preserve-color) {
    background-color: var(--pq-rouge);
}

/* Les icônes de prestations reprennent le rouge de la marque. */
.uk-preserve-width svg [fill]:not([fill="none"]),
.el-image svg [fill]:not([fill="none"]) {
    fill: var(--pq-rouge);
}

/* --------------------------------------------------- titres et lisibilité */

h1, h2, h3, .uk-h1, .uk-h2, .uk-h3 {
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1, .uk-h1 {
    line-height: 1.1;
}

/* Chapô : un gris qui reste lisible sur fond clair comme sur fond sombre. */
.uk-text-lead {
    font-weight: 400;
    line-height: 1.55;
}

.uk-light .uk-text-lead {
    color: rgba(255, 255, 255, 0.85);
}

/* ------------------------------------------------------------ navigation */

.uk-navbar-nav > li > a {
    font-size: 0.9375rem;
    letter-spacing: 0.02em;
    text-transform: none;
}

.uk-navbar-nav > li.uk-active > a {
    color: var(--pq-rouge);
}

/* Le logo garde sa hauteur sans écraser la barre sur petits écrans. */
.uk-logo img {
    max-height: 90px;
    width: auto;
}

@media (max-width: 639px) {
    .uk-logo img {
        max-height: 68px;
    }
}

/* ---------------------------------------------------------- galerie */

/* Cadrage homogène des visuels de maquettes, quel que soit leur format. */
.uk-gallery .el-image,
.el-item .el-image {
    object-fit: cover;
}

/* ------------------------------------------------------------- pied */

.tm-footer {
    font-size: 0.9375rem;
}

.tm-footer h4,
.tm-footer .uk-h5 {
    margin-bottom: 0.5rem;
}

/* ------------------------------------------------- confort de lecture */

/* Sur mobile, on évite que les sections « large » mangent tout l'écran. */
@media (max-width: 639px) {
    .uk-section-large {
        padding-top: 50px;
        padding-bottom: 50px;
    }
}

/* Respecte le réglage système de réduction des animations. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===========================================================================
   Formulaire de contact
   ---------------------------------------------------------------------------
   Joomla produit un balisage Bootstrap (.control-group / .form-control) que le
   thème ne connaît pas. On l'aligne sur l'allure des champs UIkit plutôt que
   de réécrire le rendu des champs, qui changerait à chaque mise à jour.
   =========================================================================== */

.com-contact__form .control-group {
    margin-bottom: 1.25rem;
}

.com-contact__form .control-label label {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.com-contact__form .star {
    color: var(--pq-rouge);
}

/* La ligne « * Champ requis » est une simple mention, pas un champ. */
.com-contact__form .field-spacer .control-label label {
    font-weight: 400;
    color: #777;
}

.com-contact__form .field-spacer .red {
    color: var(--pq-rouge);
    font-weight: 400;
}

.com-contact__form .form-control {
    width: 100%;
    max-width: 100%;
    padding: 0 10px;
    height: 44px;
    border: 1px solid #e5e5e5;
    border-radius: 0;
    background: #fff;
    color: #1a1a1a;
    font: inherit;
    transition: border-color 0.15s ease-in-out;
    -webkit-appearance: none;
}

.com-contact__form textarea.form-control {
    height: auto;
    min-height: 170px;
    padding: 10px;
    line-height: 1.6;
    resize: vertical;
}

.com-contact__form .form-control:focus {
    outline: none;
    border-color: var(--pq-rouge);
}

/* Retour de validation Joomla. */
.com-contact__form .form-control.invalid,
.com-contact__form .invalid .form-control {
    border-color: var(--pq-rouge);
}

.com-contact__form .invalid label,
.com-contact__form label.invalid {
    color: var(--pq-rouge);
}

/* Case « recevoir une copie » : case et libellé sur la même ligne. */
.com-contact__form input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    vertical-align: -2px;
    accent-color: var(--pq-rouge);
}

.com-contact__form .form-check,
.com-contact__form .controls > fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

.com-contact__form legend.uk-legend {
    margin-bottom: 1rem;
}

/* Coordonnées : mêmes proportions que le formulaire en regard. */
.com-contact address {
    font-style: normal;
    line-height: 1.7;
}

/* Case à cocher : Joomla place le libellé au-dessus comme pour un champ texte.
   On remet la case avant son libellé, sur une seule ligne. */
.com-contact__form .control-group:has(.form-check) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

.com-contact__form .control-group:has(.form-check) .control-label label {
    margin-bottom: 0;
    font-weight: 400;
}

/* ===========================================================================
   Proposition « planche d'architecte »
   ---------------------------------------------------------------------------
   Vocabulaire emprunté au dessin technique : cartouche vertical dans la marge,
   sections numérotées, filets fins, grande échelle typographique. Le rouge ne
   sert qu'à l'annotation — numéros et boutons — jamais aux aplats.

   Ces classes ne servent que sur la page de proposition ; elles n'affectent
   pas les autres pages.
   =========================================================================== */

/* --- cartouche vertical dans la marge ------------------------------------ */

.tm-section-title {
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #9a9a9a;
}

.uk-light .tm-section-title,
.uk-section-secondary .tm-section-title {
    color: rgba(255, 255, 255, 0.55);
}

/* --- surtitre du bandeau ------------------------------------------------- */

.pq-surtitre {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
}

/* --- repère de section : « 02 ——— L'atelier » ---------------------------- */

.pq-repere {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.pq-repere-num {
    font-weight: 600;
    color: var(--pq-rouge);
}

/* Le filet prolonge le numéro comme une ligne de cote. */
.pq-repere-num::after {
    content: '';
    display: inline-block;
    width: 3.5rem;
    height: 1px;
    margin-left: 0.9rem;
    vertical-align: middle;
    background: currentColor;
    opacity: 0.55;
}

.pq-repere-txt {
    color: #8a8a8a;
}

.uk-section-secondary .pq-repere-txt,
.uk-light .pq-repere-txt {
    color: rgba(255, 255, 255, 0.6);
}

/* --- bandeau de chiffres, en chevauchement ------------------------------- */

.pq-bandeau-chiffres {
    position: relative;
    z-index: 2;
}

.pq-chiffre {
    margin: 0;
    font-size: clamp(2.75rem, 6vw, 4.25rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.pq-chiffre-intitule {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.pq-chiffre-precision {
    margin: 0.45rem 0 0;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
}

/* Filet de séparation entre les chiffres, façon tableau de cotes. */
@media (min-width: 960px) {
    .pq-bandeau-chiffres .uk-grid > div + div {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
}

/* --- prestations : la grille lit comme une nomenclature ------------------ */

.pq-planche-prestations .el-meta {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.18em;
    color: var(--pq-rouge);
}

/* --- titres de grande échelle ------------------------------------------- */

.uk-section-xlarge h2,
.uk-section-large h2 {
    letter-spacing: -0.02em;
}

/* Intertitre de colonne : plus discret qu'un h3, il sépare deux récits
   parallèles sans ajouter de niveau dans la hiérarchie des titres. */
.pq-intertitre {
    margin: 0 0 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--pq-rouge);
}

/* Ligne de copyright : `uk-text-muted` donne du noir à 50 % d'opacité, soit
   3,92:1 sur le gris du pied de page, sous le seuil AA de 4,5:1 pour du texte
   courant. Ce gris-ci tient 6,4:1 tout en restant secondaire. */
.pq-copyright {
    color: #5a5a5a;
}

/* ---------------------------------------------------------------------------
   Bandeaux des pages intérieures
   ---------------------------------------------------------------------------
   Voile sombre dégradé par-dessus la photo de fond, pour que le texte blanc
   reste lisible quelle que soit la clarté de l'image.

   Il passe par cette classe et non par le champ CSS de la section : avec une
   image de fond, YOOtheme n'enveloppe pas la section dans un conteneur
   positionné, donc le sélecteur `.el-element` qui fonctionne sur le bandeau
   vidéo de l'accueil ne correspond ici à rien.
   --------------------------------------------------------------------------- */

.pq-bandeau {
    position: relative;
}

.pq-bandeau::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(16, 16, 18, 0.40) 0%,
        rgba(16, 16, 18, 0.35) 45%,
        rgba(16, 16, 18, 0.85) 100%
    );
    pointer-events: none;
}

/* Le contenu repasse au-dessus du voile. */
.pq-bandeau > * {
    position: relative;
    z-index: 1;
}

/* ---------------------------------------------------------------------------
   Mouvement au défilement : garde d'accessibilité
   ---------------------------------------------------------------------------
   La parallaxe d'UIkit applique ses transformations en JavaScript, en style
   en ligne : la règle `prefers-reduced-motion` plus haut, qui neutralise les
   animations CSS, ne l'atteint pas. On annule donc explicitement les
   transformations et on rend visible ce que les révélations masquent, pour
   les personnes qui ont demandé moins d'animations dans leur système.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    [uk-parallax],
    [data-uk-parallax],
    .uk-parallax,
    .uk-grid-parallax > * {
        transform: none !important;
    }

    [uk-scrollspy] > *,
    [data-uk-scrollspy] > *,
    .uk-scrollspy-inview,
    [class*='uk-animation-'] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Galerie : lisibilité du titre au survol
   ---------------------------------------------------------------------------
   Les styles d'incrustation proposés par le thème rendent ici un fond
   entièrement transparent : le titre blanc se retrouvait posé à même la photo,
   illisible sur les maquettes claires.

   Un dégradé montant depuis le bas garantit le contraste quelle que soit
   l'image, et se lit mieux qu'un aplat uniforme : la photo reste visible.
   --------------------------------------------------------------------------- */

.pq-galerie .uk-overlay {
    background: linear-gradient(
        0deg,
        rgba(16, 16, 18, 0.88) 0%,
        rgba(16, 16, 18, 0.55) 45%,
        rgba(16, 16, 18, 0.10) 100%
    );
}

.pq-galerie .el-title {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}