/*!
Theme Name: Lamour
Theme URI: http://underscores.me/
Author: popcorn communication
Author URI: http://www.popcorn-communication.com
Description: Thème de base Popcorn Communication
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: lamour
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Lamour is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/* Base content
	 ========================================================================== */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
}
body.unset {
    overflow: hidden;
}
main {
    display: block;
}
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
}
pre {
    font-family: monospace, monospace;
    font-size: 1em;
}
a {
    background-color: transparent;
    text-decoration: none;
    transition: 0.3s;
}
a:hover {
    transition: 0.3s;
}
abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}
b,
strong {
    font-weight: bolder;
}
code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}
small {
    font-size: 80%;
}
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: 0.5em;
    vertical-align: top;
}
img {
    border-style: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button,
input {
    overflow: visible;
}
button,
select {
    text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}
fieldset {
    padding: 0.35em 0.75em 0.625em;
}
legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal;
}
progress {
    vertical-align: baseline;
}
textarea {
    overflow: auto;
}
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
[type="search"] {
    -webkit-appearance: textfield;
    outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit;
}
details {
    display: block;
}
summary {
    display: list-item;
}
template,
[hidden] {
    display: none;
}
*,
*::before,
*::after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
body,
button,
input,
select,
optgroup,
textarea {
    color: var(--color-text);
    font-family: var(--font-text);
    font-size: 1rem;
    line-height: 1.5;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    clear: both;
    font-family: var(--font-title);
    font-weight: 700; /* Alfarn 2 "Regular" est servie en 700 par Adobe Fonts */
}
p {
    margin-bottom: 1.5em;
}
dfn,
cite,
em,
i {
    font-style: italic;
}
blockquote {
    margin: 0 1.5em;
}
address {
    margin: 0 0 1.5em;
}
pre {
    background: #eee;
    font-family: "Courier 10 Pitch", courier, monospace;
    line-height: 1.6;
    margin-bottom: 1.6em;
    max-width: 100%;
    overflow: auto;
    padding: 1.6em;
}
code,
kbd,
tt,
var {
    font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}
abbr,
acronym {
    border-bottom: 1px dotted #666;
    cursor: help;
}
mark,
ins {
    background: #fff9c0;
    text-decoration: none;
}
big {
    font-size: 125%;
}
body {
    background: #fff;
}
hr {
    background-color: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em;
}
ul,
ol {
    margin: 0 0 1.5em 3em;
}
ul {
    list-style: disc;
}
ul li {
    margin-bottom: 4px;
}
ol {
    list-style: decimal;
}
li > ul,
li > ol {
    margin-bottom: 0;
    margin-left: 1.5em;
}
dt {
    font-weight: 700;
}
dd {
    margin: 0 1.5em 1.5em;
}
embed,
iframe,
object {
    max-width: 100%;
}
img {
    height: auto;
    max-width: 100%;
}
figure {
    margin: 1em 0;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
}
a {
    color: var(--color-primary);
}
a:hover,
a:focus,
a:active {
    filter: brightness(0.85);
}
a:focus {
    outline: thin dotted;
}
a:hover,
a:active {
    outline: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #bbb;
    border-radius: 3px;
    background: #e6e6e6;
    color: rgba(0, 0, 0, 0.8);
    line-height: 1;
    padding: 0.6em 1em 0.4em;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
    border-color: #ccc #bbb #aaa;
}
button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
    border-color: #aaa #bbb #bbb;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
    color: #666;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
    color: #111;
}
select {
    border: 1px solid #ccc;
}
textarea {
    width: 100%;
}
.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
    margin: 0 0 1.5em;
}
.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
    display: flex;
}
.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
    flex: 1 0 50%;
}
.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
    text-align: end;
    flex: 1 0 50%;
}
.sticky {
    display: block;
}
.updated:not(.published) {
    display: none;
}
.page-content,
.entry-content,
.entry-summary {
    margin: 1.5em 0 0;
}
.page-links {
    clear: both;
    margin: 0 0 1.5em;
}
.comment-content a {
    word-wrap: break-word;
}
.bypostauthor {
    display: block;
}
.widget {
    margin: 0 0 1.5em;
}
.widget select {
    max-width: 100%;
}
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
.custom-logo-link {
    display: inline-block;
}
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}
.wp-caption-text {
    text-align: center;
}
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1.5em;
}
.gallery-item {
    display: inline-block;
    text-align: center;
    width: 100%;
}
.gallery-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}
.gallery-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}
.gallery-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}
.gallery-columns-5 {
    grid-template-columns: repeat(5, 1fr);
}
.gallery-columns-6 {
    grid-template-columns: repeat(6, 1fr);
}
.gallery-columns-7 {
    grid-template-columns: repeat(7, 1fr);
}
.gallery-columns-8 {
    grid-template-columns: repeat(8, 1fr);
}
.gallery-columns-9 {
    grid-template-columns: repeat(9, 1fr);
}
.gallery-caption {
    display: block;
}
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
    display: none;
}
.infinity-end.neverending .site-footer {
    display: block;
}
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}
.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}
#primary[tabindex="-1"]:focus {
    outline: 0;
}
.alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1.5em;
}
.alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.5em;
}
/* début style Popcorn ------------------------------------------------------------------------------------------ */
/* ------------------------------------------- polices */
/* Titres : Alfarn 2, chargée via Adobe Fonts (kit enqueue dans functions.php) */
/* Textes : Niramit Regular / Bold */
@font-face {
    font-family: "Niramit";
    src:
        url("fonts/Niramit-Regular.woff2") format("woff2"),
        url("fonts/Niramit-Regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Niramit";
    src:
        url("fonts/Niramit-Bold.woff2") format("woff2"),
        url("fonts/Niramit-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
/* ------------------------------------------ variables */
:root {
    /* couleurs */
    --color-primary: #364b9b; /* Bleu clair Lamour OK */
    --color-secondary: #2a2c65; /* Bleu foncé Lamour OK */
    --color-accent: #e5412b; /* rouge lamour OK */
    --color-text: #3a3a3a; /* gris */
    --color-white: #ffffff;
    --color-border-light: #cfd6dc; /* Light Gray (pagination) */
    /* couleurs des dégradés sur images */
    --color-overlay-blue: #3b68b0;
    --color-overlay-dark: #161615;

    /* polices */
    --font-title: "alfarn-2", sans-serif;
    --font-text: "Niramit", sans-serif;

    /* tailles de texte (desktop maquette -> mobile) */
    --fs-title-xl: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); /* 40px */
    --fs-title-l: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); /* 28px */
    --fs-title-m: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 20px */
    --fs-title-s: 1.125rem; /* 18px */
    --fs-lead: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem); /* 20px */
    --fs-text: 1rem; /* 16px */
    --fs-small: 0.875rem; /* 14px */
    --fs-xsmall: 0.75rem; /* 12px */

    /* mise en page : maquette 1440px, contenu 1344px */
    --container-width: 1344px;
    --gutter: 48px;
}
/* breakpoints : tablette <= 1024px, mobile <= 767px */
@media (max-width: 1024px) {
    :root {
        --gutter: 32px;
    }
}
@media (max-width: 767px) {
    :root {
        --gutter: 16px;
    }
}

/* ------------------------------------------ base Lamour */
body {
    background: var(--color-white);
    line-height: 1.3;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 0.5em;
    line-height: 1.2;
}
.container {
    width: 100%;
    max-width: calc(var(--container-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* titres (classes réutilisables, indépendantes de la balise h1/h2...) */
.title-xl {
    font-size: var(--fs-title-xl);
}
.title-l {
    font-size: var(--fs-title-l);
}
.title-m {
    font-size: var(--fs-title-m);
}
.title-s {
    font-size: var(--fs-title-s);
    text-transform: uppercase;
}
.title-xl,
.title-l,
.title-m,
.title-s {
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}
.text-lead {
    font-size: var(--fs-lead);
    color: var(--color-primary);
}
.text-accent {
    color: var(--color-accent);
}
.text-primary {
    color: var(--color-primary);
}

/* boutons : 38px de haut, Niramit Bold 12px majuscules */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 38px;
    padding: 10px 24px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    font-family: var(--font-text);
    font-size: var(--fs-xsmall);
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: 0.3s;
}
.btn:hover,
.btn:focus {
    filter: none;
}
/* contour blanc, sur photo ou fond bleu */
.btn--outline {
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn--outline:hover,
.btn--outline:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
/* fond bleu plein */
.btn--primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}
.btn--primary:hover,
.btn--primary:focus {
    background: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}
/* fond bleu translucide + contour blanc (ex. "Parler de mon projet") */
.btn--glass {
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);
    border-color: var(--color-white);
    color: var(--color-white);
}
.btn--glass:hover,
.btn--glass:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* lien souligné suivi d'une flèche (ex. "Découvrir nos vérandas →") */
.link-arrow {
    font-size: var(--fs-xsmall);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.link-arrow::after {
    content: "→";
    display: inline-block; /* évite que la flèche soit soulignée */
    margin-left: 0.4em;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.3s;
}
.link-arrow:hover::after,
.link-arrow:focus::after {
    transform: translateX(3px);
}

/* -------------------------------- animations */
/* « translate » (et non « transform ») et des animations (et non des transitions) :
   ne gênent ni les transform ni les transitions de survol déjà présentes sur les éléments */
@keyframes lamour-fade-up {
    from {
        opacity: 0;
        translate: 0 30px;
    }
}
/* bandeau qui se déroule de gauche à droite (titres sur fond bleu) */
@keyframes lamour-wipe {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}
@keyframes lamour-fade {
    from {
        opacity: 0;
    }
}

/* au défilement (js/reveal.js) : masqué puis révélé, avec un décalage pour enchaîner les éléments */
[data-reveal]:not(.is-revealed) {
    opacity: 0;
}
[data-reveal].is-revealed {
    animation: lamour-fade-up 0.8s ease var(--reveal-delay, 0s) backwards;
}
/* bloc « Et si on parlait de votre projet ? » : l'encadré rouge arrive de la droite */
@keyframes lamour-slide-left {
    from {
        opacity: 0;
        translate: 100% 0;
    }
}
.contact-cta .contact-cta__callback.is-revealed {
    animation: lamour-slide-left 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}

/* premiers écrans : au chargement de la page, les éléments les uns après les autres
   (uniquement si le visiteur n'a pas demandé à réduire les animations) */
@media (prefers-reduced-motion: no-preference) {
    .gamme-hero__title-main,
    .gamme-hero__title-tag,
    .hero__surtitle,
    .hero__title,
    .post-hero__topic,
    .post-hero__title {
        animation: lamour-wipe 0.8s cubic-bezier(0.65, 0, 0.35, 1) var(--intro-delay, 0s) backwards;
    }
    .gamme-hero__heading,
    .gamme-hero__text,
    .gamme-hero__link,
    .gamme-hero__baseline,
    .gamme-hero__button,
    .hero__text,
    .hero__buttons,
    .blog-hero__title,
    .blog-hero__text {
        animation: lamour-fade-up 0.8s ease var(--intro-delay, 0s) backwards;
    }
    .gamme-hero__image,
    .post-hero__media,
    .hero__image {
        animation: lamour-fade 1s ease var(--intro-delay, 0s) backwards;
    }
}
/* pages gamme : titre, étiquette, accroche, texte, lien, puis les photos une à une */
.gamme-hero__title-main { --intro-delay: 0.1s; }
.gamme-hero__title-tag { --intro-delay: 0.5s; }
.gamme-hero__heading { --intro-delay: 0.85s; }
.gamme-hero__text { --intro-delay: 1s; }
.gamme-hero__link { --intro-delay: 1.15s; }
.gamme-hero__baseline { --intro-delay: 1.3s; }
.gamme-hero__image:nth-child(1) { --intro-delay: 0.2s; }
.gamme-hero__image:nth-child(2) { --intro-delay: 0.35s; }
.gamme-hero__image:nth-child(3) { --intro-delay: 0.5s; }
.gamme-hero__image:nth-child(4) { --intro-delay: 0.65s; }
.gamme-hero__image:nth-child(5) { --intro-delay: 0.8s; }
.gamme-hero__image:nth-child(6) { --intro-delay: 0.95s; }
.gamme-hero__button { --intro-delay: 1.2s; }
/* accueil */
.hero__surtitle { --intro-delay: 0.3s; }
.hero__title { --intro-delay: 0.6s; }
.hero__text { --intro-delay: 1s; }
.hero__buttons { --intro-delay: 1.15s; }
/* articles et Notre entreprise : photo, étiquette, titre */
.post-hero__topic { --intro-delay: 0.3s; }
.post-hero__title { --intro-delay: 0.6s; }
/* guide, réalisations, contact */
.blog-hero__title { --intro-delay: 0.1s; }
.blog-hero__text { --intro-delay: 0.3s; }

/* --------------------------------------------------- header */
/* menu complet au-delà de 1300px, menu burger en dessous */
.site-header {
    position: relative;
    z-index: 100;
    background: var(--color-white);
}
/* barre d'annonce */
.site-header__announcement {
    background: var(--color-secondary);
    color: var(--color-white);
}
.site-header__announcement-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 24px;
    min-height: 45px;
    margin: 0;
    padding: 8px var(--gutter);
    font-size: var(--fs-small);
    text-align: center;
}
.site-header__announcement-link {
    font-size: var(--fs-xsmall);
    color: var(--color-white);
    text-decoration: underline;
}
.site-header__announcement-link:hover,
.site-header__announcement-link:focus {
    filter: none;
    text-decoration: none;
}
/* logo + menu */
.site-header__main {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding-top: 13px;
}
.site-header__logo a {
    display: block;
    line-height: 0;
}
.site-header__logo .custom-logo {
    display: block;
    width: 283px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 283 / 54;
}
/* menu principal */
#primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
#primary-menu li {
    margin: 0;
}
#primary-menu > li {
    --menu-accent: var(--color-primary);
    --submenu-bg: var(--color-primary);
    position: relative;
}
/* Contact : classe CSS "menu-item--accent" ajoutée dans Apparence > Menus */
#primary-menu > li.menu-item--accent {
    --menu-accent: var(--color-accent);
    --submenu-bg: var(--color-accent);
}
/* baseline : le bas du texte est aligné sur le bas du carré et de l'icône */
#primary-menu > li > a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text);
}
/* carré devant chaque entrée */
#primary-menu > li > a::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--menu-accent);
}
/* icône "3 traits" des entrées avec sous-menu */
#primary-menu > li.menu-item-has-children > a::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 10px;
    margin-left: 1px;
    background: repeating-linear-gradient(to bottom, var(--menu-accent) 0 2px, transparent 2px 4px);
}
.main-navigation a:hover,
.main-navigation a:focus {
    filter: none;
}
/* entrées parentes sans lien (voir inc/template-functions.php) */
#primary-menu > li > a:not([href]) {
    cursor: pointer;
}
/* contour de focus seulement au clavier, pas au clic */
#primary-menu a:focus:not(:focus-visible) {
    outline: none;
}
#primary-menu > li > a:hover,
#primary-menu > li > a:focus,
#primary-menu > li.current-menu-item > a,
#primary-menu > li.current-menu-ancestor > a {
    color: var(--menu-accent);
}
/* sous-menus */
#primary-menu .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}
#primary-menu .sub-menu li {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}
#primary-menu .sub-menu a {
    display: block;
    padding: 16px 31px;
    background: var(--submenu-bg);
    font-family: var(--font-title);
    font-size: 1rem;
    font-weight: 700;
    line-height: 16px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--color-white);
    transition: background-color 0.3s;
}
#primary-menu .sub-menu a:hover,
#primary-menu .sub-menu a:focus,
#primary-menu .sub-menu .current-menu-item > a {
    background: var(--color-secondary);
}
/* bouton burger */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
}
.menu-toggle__bar {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-primary);
    transition:
        transform 0.3s,
        opacity 0.3s;
}
.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
    opacity: 0;
}
.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 1301px) {
    .main-navigation {
        margin-right: clamp(0px, 100vw - 1357px, 83px);
        padding-bottom: 15px;
    }
    #primary-menu {
        display: flex;
        gap: clamp(16px, 2.1vw, 30px);
    }
    /* le padding-top fait la jonction entre le lien et le bas du header */
    #primary-menu .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 236px;
        padding-top: 15px;
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.3s,
            visibility 0.3s;
    }
    /* dernière entrée : sous-menu aligné à droite pour ne pas sortir de l'écran */
    #primary-menu > li:last-child > .sub-menu {
        left: auto;
        right: 0;
    }
    #primary-menu > li:hover > .sub-menu,
    #primary-menu > li.focus > .sub-menu,
    #primary-menu > li.is-open > .sub-menu,
    #primary-menu > li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 1300px) {
    .site-header__main {
        align-items: center;
        padding-block: 10px;
    }
    .site-header__logo .custom-logo {
        width: 200px;
    }
    .menu-toggle {
        display: flex;
    }
    /* panneau du burger : se déroule de haut en bas */
    #primary-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 100%);
        overflow-y: auto;
        padding: 8px var(--gutter) 24px;
        background: var(--color-white);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        visibility: hidden;
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path 0.4s ease,
            visibility 0s linear 0.4s;
    }
    .main-navigation.toggled #primary-menu {
        visibility: visible;
        clip-path: inset(0 0 -40px 0);
        transition:
            clip-path 0.4s ease,
            visibility 0s;
    }
    #primary-menu > li > a {
        padding: 14px 0;
        border-bottom: 1px solid color-mix(in srgb, var(--color-text) 15%, transparent);
    }
    /* sous-menus en accordéon (classe .is-open gérée par navigation.js) :
       la 2e ligne de la grille passe de 0fr à 1fr pour animer la hauteur */
    #primary-menu > li.menu-item-has-children {
        display: grid;
        grid-template-rows: auto 0fr;
        transition: grid-template-rows 0.4s ease;
    }
    #primary-menu > li.menu-item-has-children.is-open {
        grid-template-rows: auto 1fr;
    }
    #primary-menu .sub-menu {
        min-height: 0;
        overflow: hidden;
        padding: 0;
        visibility: hidden;
        transition:
            padding 0.4s ease,
            visibility 0s linear 0.4s;
    }
    #primary-menu > li.is-open > .sub-menu {
        padding: 8px 0 12px;
        visibility: visible;
        transition:
            padding 0.4s ease,
            visibility 0s;
    }
    #primary-menu .sub-menu li {
        box-shadow: none;
        border-bottom: 1px solid color-mix(in srgb, var(--color-secondary) 40%, transparent);
    }
    #primary-menu .sub-menu a {
        padding: 14px 24px;
        white-space: normal;
    }
}
@media (max-width: 767px) {
    .site-header__logo .custom-logo {
        width: 170px;
    }
    .site-header__announcement-text {
        gap: 2px 12px;
        padding-block: 6px;
    }
}

/* --------------------------------------------------- accueil : premier écran */
/* image 1344x635 dans le container, contenu calé en bas */
.hero {
    margin-top: 18px;
}
.hero__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 635px;
    padding-bottom: 46px;
    overflow: hidden;
    background: var(--color-primary);
    color: var(--color-white);
}
.hero__image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* dégradé bleu en produit sur le bas de l'image */
.hero__inner::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    height: 248px;
    background: linear-gradient(to top, var(--color-overlay-blue), transparent);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.hero__heading {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 55px;
}
/* bandeaux en bloc (pas en flex, sinon les espaces autour du « & » disparaissent) :
   57px et 74px de haut sur desktop */
.hero__surtitle {
    margin: 0;
    padding: 9px 33px;
    background: var(--color-secondary);
    font-size: clamp(1.125rem, 0.75rem + 1.6vw, 1.875rem);
    line-height: 1.3;
}
.hero__title {
    margin: 0 0 0 192px;
    padding: 13px 34px;
    background: var(--color-primary);
    font-size: var(--fs-title-xl);
    line-height: 1.2;
    color: var(--color-white);
}
.hero__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px 40px;
    padding: 0 93px 0 38px;
}
.hero__text {
    margin: 0;
    font-size: var(--fs-lead);
}
.hero__buttons {
    display: flex;
    flex-wrap: wrap;
    flex-shrink: 0;
    gap: 16px 30px;
}

@media (max-width: 1100px) {
    .hero__title {
        margin-left: 96px;
    }
    .hero__footer {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 32px;
    }
    .hero__inner::after {
        height: 60%;
    }
}
@media (max-width: 767px) {
    .hero {
        margin-top: 0;
    }
    .hero__inner {
        min-height: 560px;
        padding-bottom: 32px;
    }
    .hero__heading {
        margin-bottom: 32px;
    }
    .hero__surtitle {
        padding: 8px 16px;
    }
    .hero__title {
        margin-left: 16px;
        padding: 10px 16px;
    }
    .hero__footer {
        padding: 0 16px;
    }
    .hero__buttons {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .hero__inner::after {
        height: 75%;
    }
}

/* --------------------------------------------------- accueil : nos solutions (onglets + carrousel) */
.projects {
    padding: 67px 0 92px;
    overflow-x: clip; /* la photo suivante dépasse à droite sans créer de scroll */
}
.projects__intro {
    text-align: center;
}
.projects__title {
    margin: 0 0 30px;
}
.projects__title-highlight {
    display: block;
    color: var(--color-secondary);
}
.projects__text {
    max-width: 722px;
    margin: 0 auto;
}
/* zone du carrousel : 1025px comme la photo de la maquette */
.projects__slider {
    width: min(1025px, 100% - 2 * var(--gutter));
    margin: 63px auto 0;
}
/* onglets */
.projects__tabs {
    display: flex;
    gap: 21px;
    overflow-x: auto;
    scrollbar-width: none;
}
.projects__tabs::-webkit-scrollbar {
    display: none;
}
.projects__tab {
    flex-shrink: 0;
    height: 22px;
    padding: 0 5px;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-primary) 40%, transparent);
    font-family: var(--font-title);
    font-size: var(--fs-title-s);
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
    color: var(--color-primary);
    cursor: pointer;
    transition:
        background-color 0.3s,
        color 0.3s;
}
.projects__tab:hover,
.projects__tab:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 60%, transparent);
}
.projects__tab[aria-selected="true"] {
    background: var(--color-primary);
    color: var(--color-white);
}
/* flèches */
.projects__arrows {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    margin: 10px 0 21px;
}
.projects__arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    cursor: pointer;
    transition:
        background-color 0.3s,
        opacity 0.3s;
}
.projects__arrow:hover:not(:disabled),
.projects__arrow:focus-visible {
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);
}
.projects__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}
.projects__arrow--prev img {
    transform: rotate(180deg);
}
.projects__arrows:has(.projects__arrow[hidden]) {
    visibility: hidden;
}
/* photos */
.projects__track {
    display: flex;
    gap: 35px;
    transition: transform 0.5s ease;
}
.projects__slide {
    position: relative;
    flex: 0 0 100%;
    aspect-ratio: 1025 / 556;
    margin: 0;
    overflow: hidden;
    background: var(--color-primary);
}
.projects__slide:not(.is-active) {
    cursor: pointer;
}
.projects__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* dégradé sombre en bas de la photo */
.projects__slide::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 154px;
    background: linear-gradient(to top, var(--color-overlay-dark), transparent);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.projects__caption {
    position: absolute;
    right: 40px;
    bottom: 30px;
    left: 40px;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 40px;
    font-size: var(--fs-small);
    color: var(--color-white);
    transition: opacity 0.3s;
}
.projects__slide:not(.is-active) .projects__caption {
    opacity: 0;
}
.projects__caption .link-arrow {
    font-weight: 700;
    color: var(--color-white);
}
.projects__caption .link-arrow:hover,
.projects__caption .link-arrow:focus {
    filter: none;
}
/* points de pagination */
.projects__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 27px;
}
.projects__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.3s;
}
.projects__dot.is-active,
.projects__dot:hover {
    opacity: 1;
}

@media (max-width: 767px) {
    .projects {
        padding: 48px 0 64px;
    }
    .projects__title {
        margin-bottom: 20px;
    }
    .projects__slider {
        margin-top: 40px;
    }
    .projects__tabs {
        gap: 12px;
    }
    .projects__track {
        gap: 16px;
    }
    .projects__slide {
        aspect-ratio: 4 / 3;
    }
    .projects__slide::after {
        height: 70%;
    }
    .projects__caption {
        right: 16px;
        bottom: 16px;
        left: 16px;
    }
}

/* --------------------------------------------------- accueil : inspiration (encadré sur photo bleutée) */
.inspiration {
    padding-bottom: 123px;
}
.inspiration__inner {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    padding: 104px 24px 76px;
    overflow: hidden;
    background: var(--color-primary);
    text-align: center;
}
/* photo à 50 % sur le fond bleu */
.inspiration__image {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}
.inspiration__box {
    width: 607px;
    max-width: 100%;
    padding: 38px 24px 38px;
    background: var(--color-white);
}
.inspiration__title {
    max-width: 496px;
    margin: 0 auto 27px;
    color: var(--color-text);
}
.inspiration__text {
    max-width: 575px;
    margin: 0 auto 25px;
}
.inspiration__text p {
    margin: 0;
}
.inspiration__text strong {
    font-weight: 700;
}
.inspiration__lead {
    margin: 0;
}

@media (max-width: 767px) {
    .inspiration {
        padding-bottom: 64px;
    }
    .inspiration__inner {
        gap: 32px;
        padding: 48px 16px;
    }
    .inspiration__box {
        padding: 32px 20px;
    }
}

/* --------------------------------------------------- accueil : besoin de conseils (guide) */
.guide {
    padding-bottom: 97px;
}
/* page gamme : le bloc est suivi directement du bloc contact */
.guide--before-cta {
    padding-bottom: 133px;
}
/* image 282px + texte 655px, centrés */
.guide__inner {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 76px;
}
.guide__media {
    position: relative;
    flex: 0 0 282px;
    height: 309px;
    overflow: hidden;
    background: var(--color-primary);
}
.guide__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* dégradé bleu en bas + carrés bleus sur les bords gauche et droit */
.guide__media::before,
.guide__media::after {
    content: "";
    position: absolute;
    pointer-events: none;
}
.guide__media::before {
    right: 0;
    bottom: 0;
    left: 0;
    height: 104px;
    background: linear-gradient(to top, var(--color-overlay-blue), transparent);
    mix-blend-mode: multiply;
}
/* carrés de 28 x 27px, un tous les 47px. Au survol du bouton, ils grandissent
   (bandes jusqu'à 50% de large, carrés jusqu'à 47px de haut) et couvrent toute l'image. */
@property --guide-square-w {
    syntax: "<length-percentage>";
    inherits: false;
    initial-value: 28px;
}
@property --guide-square-h {
    syntax: "<length>";
    inherits: false;
    initial-value: 27px;
}
.guide__media::after {
    --guide-square-w: 28px;
    --guide-square-h: 27px;
    inset: 0;
    background:
        repeating-linear-gradient(to bottom, var(--color-primary) 0 var(--guide-square-h), transparent var(--guide-square-h) 47px) left top / var(--guide-square-w) 100% no-repeat,
        repeating-linear-gradient(to bottom, var(--color-primary) 0 var(--guide-square-h), transparent var(--guide-square-h) 47px) right top / var(--guide-square-w) 100% no-repeat;
    transition:
        --guide-square-w 0.5s ease,
        --guide-square-h 0.5s ease;
}
.guide__media:has(.guide__button:hover, .guide__button:focus-visible)::after {
    --guide-square-w: 50.5%;
    --guide-square-h: 47px;
}
.guide__button {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
/* le bouton garde sa couleur au survol : c'est le fond qui s'anime */
.guide__button.btn--primary:hover,
.guide__button.btn--primary:focus {
    background: var(--color-primary);
    border-color: var(--color-primary);
}
.guide__content {
    flex: 0 1 655px;
}
.guide__title {
    margin: 0;
    line-height: 1.1;
}
.guide__subtitle {
    margin: 0 0 23px;
    color: var(--color-text);
}
/* questions : un trait gris entre chaque ligne, « + » rouge devant */
.guide__questions {
    max-width: 451px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
}
.guide__question {
    position: relative;
    margin: 0;
    padding: 0 0 0 36px;
    border-top: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
    line-height: 31px;
}
.guide__question::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 13px;
    width: 15px;
    height: 15px;
    background:
        linear-gradient(var(--color-accent), var(--color-accent)) center / 15px 1px no-repeat,
        linear-gradient(var(--color-accent), var(--color-accent)) center / 1px 15px no-repeat;
    transition: rotate 0.3s ease;
}
/* survol d'une question : toute la ligne est cliquable, le « + » tourne, le texte glisse et passe en bleu.
   Le décalage se fait en échangeant les paddings : la zone cliquable reste en place et le texte ne se recoupe pas. */
.guide__question:has(a:hover, a:focus-visible)::before {
    rotate: 90deg;
}
.guide__question a {
    display: block;
    padding-right: 8px;
    color: inherit;
    text-decoration: none;
    transition:
        color 0.3s ease,
        padding 0.3s ease;
}
.guide__question a:hover,
.guide__question a:focus {
    filter: none;
    padding-right: 0;
    padding-left: 8px;
    color: var(--color-primary);
}
.guide__text p {
    margin: 0;
}
.guide__text strong {
    font-weight: 700;
}

@media (max-width: 1100px) {
    .guide__inner {
        gap: 40px;
    }
}
@media (max-width: 767px) {
    .guide {
        padding-bottom: 64px;
    }
    .guide__inner {
        flex-direction: column;
        align-items: center;
        gap: 32px;
    }
    .guide__media {
        flex-basis: auto;
        width: 282px;
        max-width: 100%;
    }
    .guide__content {
        flex-basis: auto;
        width: 100%;
    }
    .guide__question {
        padding-block: 4px;
        line-height: 1.5;
    }
}

/* --------------------------------------------------- accueil : présentation (logo entre deux photos) */
/* pleine largeur : photo collée au bord gauche | texte | photo collée au bord droit, décalée de 79px */
.about {
    display: grid;
    grid-template-columns: 1fr minmax(445px, 608px) 1fr;
    align-items: start;
    padding-bottom: 114px;
}
.about__media {
    height: 462px;
    overflow: hidden;
    background: var(--color-primary);
}
.about__media--right {
    grid-column: 3;
    margin-top: 79px;
}
.about__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about__media--left .about__image {
    object-position: 40% center;
}
.about__content {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 79px 24px 0;
    text-align: center;
}
.about__logo {
    display: block;
    width: 283px;
    max-width: 100%;
    height: auto;
    margin-bottom: 38px;
}
.about__text {
    max-width: 405px;
}
.about__text p {
    margin: 0;
}
.about__text strong {
    font-weight: 700;
}
.about__link {
    margin-top: 40px;
    font-weight: 700;
    color: var(--color-primary);
}

/* tablette / mobile : texte au-dessus, les deux photos côte à côte en dessous */
@media (max-width: 1100px) {
    .about {
        grid-template-columns: 1fr 1fr;
        column-gap: 8px;
        row-gap: 48px;
        padding-bottom: 80px;
    }
    .about__content {
        grid-column: 1 / -1;
        padding: 0 var(--gutter);
    }
    .about__media {
        grid-row: 2;
        height: auto;
        aspect-ratio: 416 / 462;
    }
    .about__media--right {
        grid-column: 2;
        margin-top: 40px;
    }
}
@media (max-width: 767px) {
    .about {
        row-gap: 32px;
        padding-bottom: 64px;
    }
    .about__logo {
        width: 220px;
        margin-bottom: 24px;
    }
    .about__media--right {
        margin-top: 24px;
    }
}

/* --------------------------------------------------- accueil : avis clients (widget Trustindex) */
.reviews {
    padding-bottom: 90px;
}
.reviews__title {
    margin: 0 0 46px;
    text-align: center;
    color: var(--color-text);
}
/* zone des cartes de la maquette : 1210px centrés (3 cartes d'environ 392px) */
.reviews__widget {
    max-width: 1210px;
    min-height: 200px;
    margin-inline: auto;
}

@media (max-width: 767px) {
    .reviews {
        padding-bottom: 64px;
    }
    .reviews__title {
        margin-bottom: 24px;
    }
}

/* --------------------------------------------------- page gamme : premier écran (templates/gamme.php) */
/* texte à gauche, grille de photos 783 x 635px à droite ; les bandeaux du titre débordent sur les photos */
.gamme-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 783px;
    min-height: 635px;
    margin-top: 18px;
}
.gamme-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.gamme-hero__title {
    position: relative;
    margin: 54px 0 0;
    font-weight: 400;
}
.gamme-hero__title-main {
    display: inline-block;
    padding: 13px 34px;
    background: var(--color-primary);
    font-family: var(--font-title);
    font-size: var(--fs-title-xl);
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-white);
}
.gamme-hero__title-tag {
    position: absolute;
    top: 100%;
    left: 467px;
    padding: 9px 30px;
    background: var(--color-secondary);
    font-family: var(--font-text);
    font-size: clamp(1.125rem, 0.75rem + 1.6vw, 1.875rem);
    font-weight: 400;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--color-white);
}
.gamme-hero__heading {
    max-width: 330px;
    margin: 38px 0 0;
}
.gamme-hero__heading-highlight {
    display: block;
    color: var(--color-secondary);
}
.gamme-hero__text {
    max-width: 440px;
    margin: 34px 0 0 42px;
}
.gamme-hero__text p {
    margin: 0 0 1em;
}
.gamme-hero__text p:last-child {
    margin-bottom: 0;
}
.gamme-hero__text strong {
    font-weight: 700;
}
.gamme-hero__link {
    margin: 22px 0 0 41px;
    font-weight: 700;
    color: var(--color-primary);
}
.gamme-hero__baseline {
    margin: auto 0 0;
    padding: 24px 0 16px;
}
/* grille 2 x 3 : cases de 389 x 208px, 6px / 5px d'espace */
.gamme-hero__gallery {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 208px;
    gap: 5px 6px;
    align-content: start;
}
.gamme-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gamme-hero__button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* petit desktop : la grille de photos se réduit */
@media (max-width: 1300px) {
    .gamme-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 52%);
    }
    .gamme-hero__gallery {
        grid-auto-rows: auto;
    }
    .gamme-hero__image {
        aspect-ratio: 389 / 208;
        height: auto;
    }
}
/* tablette / mobile : texte puis photos */
@media (max-width: 1100px) {
    .gamme-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: 0;
    }
    .gamme-hero__title {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-top: 24px;
    }
    .gamme-hero__title-main {
        white-space: normal;
    }
    .gamme-hero__title-tag {
        position: static;
        margin-left: 40px;
    }
    .gamme-hero__heading {
        max-width: none;
    }
}
@media (max-width: 767px) {
    .gamme-hero {
        margin-top: 0;
        gap: 32px;
    }
    .gamme-hero__title-main {
        padding: 10px 16px;
    }
    .gamme-hero__title-tag {
        margin-left: 16px;
        padding: 6px 16px;
    }
    .gamme-hero__heading {
        margin-top: 28px;
    }
    .gamme-hero__text,
    .gamme-hero__link {
        margin-left: 0;
    }
    .gamme-hero__text {
        margin-top: 20px;
    }
    .gamme-hero__gallery {
        gap: 4px;
    }
}

/* --------------------------------------------------- bloc texte + image (templates/gamme.php, réutilisable) */
/* image 734 x 467px + texte 500px ; image à gauche par défaut, à droite avec --image-right */
.media-text {
    display: grid;
    grid-template-columns: 734px minmax(0, 500px);
    column-gap: 92px;
    align-items: start;
    padding-top: 144px;
}
.media-text--image-right {
    grid-template-columns: minmax(0, 500px) 734px;
    justify-content: space-between;
}
.media-text--image-right .media-text__media {
    order: 2;
}
.media-text:last-child {
    padding-bottom: 94px;
}
.media-text__media {
    aspect-ratio: 734 / 467;
    overflow: hidden;
    background: var(--color-primary);
}
.media-text__media--contain {
    background: none;
}
.media-text__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.media-text__media--contain .media-text__image {
    object-fit: contain;
}
.media-text__title {
    margin: 0 0 20px;
}
.media-text__title-highlight {
    color: var(--color-secondary);
}
.media-text__title-highlight--break {
    display: block;
}
.media-text__text p {
    margin: 0 0 10px;
}
.media-text__text p:last-child {
    margin-bottom: 0;
}
.media-text__text strong {
    font-weight: 700;
}
/* accroche rouge précédée du picto Lamour (70 x 39px) */
.media-text__tagline {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 51px 0 0;
    font-weight: 700;
    color: var(--color-accent);
}
.media-text__tagline img {
    flex-shrink: 0;
    width: 70px;
    height: auto;
}

@media (max-width: 1300px) {
    .media-text,
    .media-text--image-right {
        grid-template-columns: minmax(0, 734fr) minmax(0, 500fr);
        column-gap: 6%;
    }
    .media-text--image-right {
        grid-template-columns: minmax(0, 500fr) minmax(0, 734fr);
    }
}
/* tablette / mobile : image au-dessus, texte en dessous */
@media (max-width: 1100px) {
    .media-text,
    .media-text--image-right {
        grid-template-columns: 1fr;
        row-gap: 32px;
        padding-top: 96px;
    }
    .media-text__media,
    .media-text--image-right .media-text__media {
        order: -1;
    }
    .media-text:last-child {
        padding-bottom: 80px;
    }
}
@media (max-width: 767px) {
    .media-text,
    .media-text--image-right {
        row-gap: 24px;
        padding-top: 64px;
    }
    .media-text:last-child {
        padding-bottom: 64px;
    }
}

/* --------------------------------------------------- page gamme : points forts techniques */
.features {
    padding-top: 94px;
    padding-bottom: 44px;
    text-align: center;
}
.features__title {
    max-width: 587px;
    margin: 0 auto 30px;
}
.features__intro {
    max-width: 722px;
    margin: 0 auto;
}
.features__intro p {
    margin: 0;
}
.features__intro strong {
    font-weight: 700;
}
/* 3 colonnes de 375px, la première et la dernière à ~20px des bords */
/* flex centré : une rangée incomplète (ex. 7e point fort seul) reste centrée */
.features__list {
    --features-gap: 82px;
    --features-cols: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px var(--features-gap);
    margin: 62px 0 0;
    padding: 0 20px;
    list-style: none;
}
.features__list > .features__item {
    flex: 0 0 min(375px, (100% - (var(--features-cols) - 1) * var(--features-gap)) / var(--features-cols));
}
/* état « survolé » (affiché par défaut : mobile, clavier) :
   toit (18px) / picto (34px) / barre (10px) / titre / description */
.features__item {
    --features-move: 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 223px;
    margin: 0;
    outline-offset: 8px;
}
.features__roof {
    width: 49px;
    height: 18px;
    background: var(--color-primary);
    clip-path: polygon(50% 0, 100% 43.6%, 100% 100%, 50% 56.4%, 0 100%, 0 43.6%);
}
.features__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    margin-top: 4px;
}
.features__icon-img {
    display: block;
    width: auto;
    max-width: 40px;
    height: 34px;
}
.features__bar {
    width: 49px;
    height: 10px;
    margin-top: 5px;
    background: var(--color-primary);
}
.features__item-title {
    margin: 30px 0 0;
    font-family: var(--font-text);
    font-size: var(--fs-title-m);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary);
}
.features__item-text {
    margin-top: 16px;
    font-size: var(--fs-small);
}
.features__item-text p {
    margin: 0;
}
.features__item-text strong {
    font-weight: 700;
}
.features__roof,
.features__icon,
.features__bar,
.features__item-title,
.features__item-text {
    transition: transform var(--features-move), opacity var(--features-move);
}

/* état replié, uniquement avec une souris : la maison se referme autour du titre
   (toit descendu de 49px, barre passée sous le titre, picto et description masqués) */
@media (hover: hover) and (min-width: 768px) {
    .features__item:not(:hover):not(:focus-within) .features__roof {
        transform: translateY(49px);
    }
    .features__item:not(:hover):not(:focus-within) .features__icon {
        opacity: 0;
        transform: translateY(30px) scale(0.6);
    }
    .features__item:not(:hover):not(:focus-within) .features__bar {
        transform: translateY(90px);
    }
    .features__item:not(:hover):not(:focus-within) .features__item-title {
        transform: translateY(-19px);
    }
    .features__item:not(:hover):not(:focus-within) .features__item-text {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@media (max-width: 1100px) {
    .features__list {
        --features-gap: 32px;
        --features-cols: 2;
        row-gap: 48px;
        padding: 0;
    }
}
@media (max-width: 767px) {
    .features {
        padding-top: 64px;
        padding-bottom: 48px;
    }
    .features__list {
        --features-cols: 1;
        row-gap: 40px;
        margin-top: 40px;
    }
    .features__item {
        min-height: 0;
    }
    .features__item-title {
        margin-top: 20px;
    }
}

/* --------------------------------------------------- page gamme : certifications */
/* « Les engagements Lamour » : pleine largeur entre deux traits gris ;
   4 colonnes (titre + texte, puis logo 189 x 101px aligné en bas), traits verticaux entre les logos */
.certifications {
    margin-bottom: 110px;
    padding: 73px 0 88px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    text-align: center;
}
.certifications__title {
    margin: 0 0 61px;
}
.certifications__title-highlight {
    color: var(--color-secondary);
}
.certifications__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 311px));
    justify-content: center;
    gap: 48px 45px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.certifications__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}
.certifications__content {
    flex-grow: 1;
}
.certifications__heading {
    margin: 0 0 10px;
    font-family: var(--font-text);
    font-size: var(--fs-title-m);
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary);
}
.certifications__text {
    margin: 0;
    font-size: var(--fs-small);
}
.certifications__media {
    width: 189px;
    max-width: 100%;
    height: 101px;
    margin-top: 25px;
}
.certifications__link {
    display: block;
    height: 100%;
}
.certifications__logo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
/* trait vertical de 79px entre deux logos (au milieu de l'espace entre colonnes) */
.certifications__item + .certifications__item::before {
    content: "";
    position: absolute;
    bottom: 11px;
    left: -23px;
    width: 1px;
    height: 79px;
    background: rgba(0, 0, 0, 0.1);
}

/* tablette : 2 colonnes */
@media (max-width: 1100px) {
    .certifications__list {
        grid-template-columns: repeat(2, minmax(0, 311px));
    }
    .certifications__item:nth-child(odd)::before {
        content: none;
    }
}
/* mobile : 1 colonne, sans traits verticaux */
@media (max-width: 767px) {
    .certifications {
        margin-bottom: 64px;
        padding: 48px 0;
    }
    .certifications__title {
        margin-bottom: 32px;
    }
    .certifications__list {
        grid-template-columns: minmax(0, 311px);
        row-gap: 40px;
    }
    .certifications__item + .certifications__item::before {
        content: none;
    }
    .certifications__media {
        margin-top: 16px;
    }
}

/* --------------------------------------------------- page gamme : pièces à imaginer */
/* titre à gauche, fixe (sticky) à 80px du haut pendant le défilement des pièces à droite */
.rooms {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    column-gap: 150px;
    padding-bottom: 119px;
}
.rooms__aside {
    position: sticky;
    top: 80px;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}
body.admin-bar .rooms__aside {
    top: 112px;
}
.rooms__picto {
    display: block;
    width: 98px;
    height: auto;
    margin-bottom: 28px;
}
.rooms__title {
    max-width: 337px;
    margin: 0;
}
.rooms__link {
    margin-top: 21px;
    font-weight: 700;
    color: var(--color-primary);
}
/* une pièce : photo 551 x 413px à droite, bandeau bleu qui déborde dessus, texte à gauche */
.rooms__item {
    position: relative;
    min-height: 413px;
}
.rooms__item + .rooms__item {
    margin-top: 40px;
}
.rooms__image {
    position: absolute;
    top: 0;
    right: 0;
    width: min(551px, 100% - 200px);
    height: 413px;
    object-fit: cover;
}
.rooms__label {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin: 27px 0 0;
    padding: 5px 15px;
    background: var(--color-primary);
    font-family: var(--font-text);
    font-size: var(--fs-title-m);
    font-weight: 700;
    line-height: 28px;
    color: var(--color-white);
}
.rooms__text {
    position: relative;
    z-index: 1;
    width: 188px;
    margin: 57px 0 0;
    font-size: var(--fs-small);
    text-align: right;
}

@media (max-width: 1300px) {
    .rooms {
        grid-template-columns: 300px minmax(0, 1fr);
        column-gap: 60px;
    }
}
/* tablette / mobile : plus de sticky, titre au-dessus, pièces empilées */
@media (max-width: 1100px) {
    .rooms {
        grid-template-columns: 1fr;
        row-gap: 40px;
        padding-bottom: 80px;
    }
    .rooms__aside,
    body.admin-bar .rooms__aside {
        position: static;
        align-items: flex-start;
        text-align: left;
    }
    .rooms__title {
        max-width: none;
    }
    .rooms__item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-height: 0;
    }
    .rooms__label {
        order: -1;
        margin: 0 0 -19px 16px;
    }
    .rooms__image {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 551 / 413;
    }
    .rooms__text {
        width: auto;
        margin-top: 16px;
        text-align: left;
    }
}
@media (max-width: 767px) {
    .rooms {
        padding-bottom: 64px;
    }
    .rooms__picto {
        width: 70px;
        margin-bottom: 16px;
    }
    .rooms__label {
        margin: 0 16px -16px 12px;
        padding: 6px 12px;
        font-size: 1rem;
        line-height: 1.3;
    }
}

/* --------------------------------------------------- page gamme : inspirez-vous (carrousel de réalisations) */
/* bandeau bleu pleine largeur ; la rangée de photos commence à 119px du bord et déborde à droite */
.showcase {
    margin-bottom: 141px;
    padding: 69px 0 57px;
    overflow-x: clip;
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
}
.showcase__title {
    max-width: 857px;
    margin: 0 auto 25px;
    color: var(--color-white);
}
.showcase__text {
    max-width: 770px;
    margin: 0 auto;
}
.showcase__viewport {
    margin-top: 44px;
}
/* photos de 388 x 245px, 19px d'écart */
.showcase__track {
    display: flex;
    gap: 19px;
    margin: 0;
    padding: 0 0 0 71px;
    list-style: none;
    transition: transform 0.5s ease;
}
.showcase__item {
    flex: 0 0 388px;
    margin: 0;
}
.showcase__link {
    position: relative;
    display: block;
    height: 245px;
    overflow: hidden;
    background: var(--color-secondary);
}
.showcase__link:hover,
.showcase__link:focus {
    filter: none;
}
.showcase__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.showcase__link:hover .showcase__image,
.showcase__link:focus-visible .showcase__image {
    transform: scale(1.05);
}
/* nom de la réalisation : lu par les lecteurs d'écran, non affiché (comme la maquette) */
.showcase__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
/* flèches à droite sous les photos, bouton centré un peu plus bas */
.showcase__footer {
    position: relative;
    padding-top: 53px;
}
.showcase__arrows {
    position: absolute;
    top: 29px;
    right: 73px;
    display: flex;
    gap: 18px;
}
.showcase__arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-white);
    cursor: pointer;
    transition: opacity 0.3s;
}
.showcase__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}
.showcase__arrow--prev img {
    transform: rotate(180deg);
}

@media (max-width: 1100px) {
    .showcase {
        margin-bottom: 96px;
    }
    .showcase__track {
        padding-left: 0;
    }
    .showcase__arrows {
        right: 0;
    }
}
@media (max-width: 767px) {
    .showcase {
        margin-bottom: 64px;
        padding: 48px 0;
    }
    .showcase__viewport {
        margin-top: 32px;
    }
    .showcase__item {
        flex-basis: 85%;
    }
    .showcase__link {
        height: auto;
        aspect-ratio: 388 / 245;
    }
    /* sur mobile : flèches centrées sous les photos, bouton en dessous */
    .showcase__footer {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        gap: 24px;
        padding-top: 24px;
    }
    .showcase__arrows {
        position: static;
    }
}

/* --------------------------------------------------- notre guide : bandeau (home.php) */
/* encadré bleu 1344 x 201px, titre et texte centrés */
.blog-hero {
    margin-top: 20px;
}
.blog-hero__inner {
    padding: 43px 24px;
    background: var(--color-primary);
    color: var(--color-white);
    text-align: center;
}
.blog-hero__title {
    margin: 0 0 15px;
    font-family: var(--font-title);
    font-size: var(--fs-title-xl);
    font-weight: 700;
    line-height: 1.2;
}
.blog-hero__text {
    max-width: 655px;
    margin: 0 auto;
    font-size: var(--fs-lead);
}

/* bandeau avec titre seul (Nos réalisations) : 201px de haut */
.blog-hero--title .blog-hero__inner {
    display: grid;
    place-items: center;
    min-height: 201px;
}
.blog-hero--title .blog-hero__title {
    margin: 0;
}

/* --------------------------------------------------- notre guide : filtres par sujet */
/* bloc de 878px centré : libellé souligné d'un trait bleu, étiquettes en majuscules */
.blog-filters {
    max-width: calc(878px + 2 * var(--gutter));
    margin-top: 71px;
}
.blog-filters__label {
    margin: 0 0 19px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-primary);
    font-size: var(--fs-small);
}
.blog-filters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.blog-filters__link {
    display: block;
    padding: 0 5px;
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);
    font-family: var(--font-title);
    font-size: var(--fs-title-s);
    font-weight: 700;
    line-height: 22px;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-primary);
    transition: background 0.3s, color 0.3s;
}
.blog-filters__link:hover,
.blog-filters__link:focus-visible,
.blog-filters__link.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* --------------------------------------------------- notre guide : liste d'articles */
/* 3 colonnes de 414px, photo 414 x 253px */
.blog-list {
    margin-top: 91px;
    margin-bottom: 95px;
}
.blog-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 87px 51px;
}
.blog-list__empty {
    margin: 0;
    text-align: center;
}
.post-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.post-card__media {
    display: block;
    width: 100%;
    aspect-ratio: 414 / 253;
    overflow: hidden;
    background: var(--color-secondary);
}
.post-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.post-card:has(.post-card__title a:hover) .post-card__image,
.post-card__media:hover .post-card__image {
    transform: scale(1.05);
}
.post-card__topic {
    margin-top: 19px;
    font-weight: 700;
    color: var(--color-primary);
}
.post-card__title {
    margin: 11px 0 0;
    font-family: var(--font-title);
    font-size: var(--fs-title-l);
    font-weight: 700;
    line-height: 1.4;
}
.post-card__title a {
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.3s;
}
.post-card__title a:hover,
.post-card__title a:focus-visible {
    color: var(--color-primary);
}

/* pagination : cases de 32px, page courante sur fond bleu translucide */
.pagination {
    margin-top: 148px;
}
.pagination__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 32px;
    height: 32px;
    padding: 0 11px;
    border: 1px solid var(--color-border-light);
    font-size: var(--fs-small);
    line-height: 1;
    text-decoration: none;
    color: var(--color-text);
    transition: background 0.3s, border-color 0.3s;
}
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
    border-color: var(--color-primary);
}
.pagination .page-numbers.current {
    border-color: transparent;
    background: color-mix(in srgb, var(--color-primary) 30%, transparent);
    color: var(--color-primary);
}
.pagination .page-numbers.dots {
    border-color: transparent;
}
.pagination .prev img {
    transform: rotate(90deg);
}
.pagination .next img {
    transform: rotate(-90deg);
}

@media (max-width: 1100px) {
    .blog-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 64px 32px;
    }
    .pagination {
        margin-top: 96px;
    }
}
@media (max-width: 767px) {
    .blog-hero__inner {
        padding: 32px 16px;
    }
    .blog-filters {
        margin-top: 48px;
    }
    .blog-filters__list {
        gap: 8px 10px;
    }
    .blog-list {
        margin-top: 48px;
        margin-bottom: 64px;
    }
    .blog-list__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
    .post-card__topic {
        margin-top: 14px;
    }
    .pagination {
        margin-top: 64px;
    }
    /* sur mobile : flèches seules pour Précédent / Suivant */
    .pagination .prev,
    .pagination .next {
        font-size: 0;
    }
}

/* --------------------------------------------------- nos réalisations : grille (archive-realisation.php) */
/* 3 colonnes, photos 414 x 292px ; au survol : cadre blanc translucide + nom du projet */
.projects-list {
    margin-top: 91px;
    margin-bottom: 95px;
}
.projects-list__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 59px 51px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.projects-list .pagination {
    margin-top: 126px;
}
.project-card {
    margin: 0;
}
.project-card__link {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 414 / 292;
    overflow: hidden;
    background: var(--color-secondary);
}
.project-card__link:hover,
.project-card__link:focus {
    filter: none;
}
.project-card__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.project-card__link::after {
    content: "";
    position: absolute;
    inset: 17px 20px;
    border: 3px solid color-mix(in srgb, var(--color-white) 30%, transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.project-card__name {
    position: relative;
    z-index: 1;
    max-width: calc(100% - 64px);
    padding: 7px 11px;
    background: var(--color-primary);
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-white);
    opacity: 0;
    transition: opacity 0.3s;
}
.project-card__link:hover .project-card__image,
.project-card__link:focus-visible .project-card__image {
    transform: scale(1.05);
}
.project-card__link:hover::after,
.project-card__link:focus-visible::after,
.project-card__link:hover .project-card__name,
.project-card__link:focus-visible .project-card__name {
    opacity: 1;
}
/* écrans tactiles (pas de survol) : nom du projet toujours visible */
@media (hover: none) {
    .project-card__name {
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .projects-list__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px;
    }
    .projects-list .pagination {
        margin-top: 96px;
    }
}
@media (max-width: 767px) {
    .projects-list {
        margin-top: 48px;
        margin-bottom: 64px;
    }
    .projects-list__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .projects-list .pagination {
        margin-top: 64px;
    }
}

/* --------------------------------------------------- visionneuse de photos (template-parts/lightbox.php) */
/* photo de 670px max + légende ; flèches blanches de 32px à 30px de chaque côté */
.lightbox {
    width: min(794px, 100% - 32px);
    max-width: none;
    max-height: none;
    padding: 0 62px;
    overflow: visible;
    border: 0;
    background: none;
    color: var(--color-white);
    /* apparition en fondu, comme la popup « Être rappelé » */
    opacity: 0;
    transform: scale(0.98);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        overlay 0.35s ease allow-discrete,
        display 0.35s ease allow-discrete;
}
.lightbox[open] {
    opacity: 1;
    transform: none;
}
@starting-style {
    .lightbox[open] {
        opacity: 0;
        transform: scale(0.98);
    }
}
.lightbox::backdrop {
    background: rgba(58, 58, 58, 0);
    transition:
        background-color 0.35s ease,
        overlay 0.35s ease allow-discrete,
        display 0.35s ease allow-discrete;
}
.lightbox[open]::backdrop {
    background: rgba(58, 58, 58, 0.8);
}
@starting-style {
    .lightbox[open]::backdrop {
        background: rgba(58, 58, 58, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .lightbox,
    .lightbox::backdrop,
    .lightbox__image {
        transition: none;
    }
}
.lightbox.is-single {
    padding-inline: 0;
    width: min(670px, 100% - 32px);
}
.lightbox__figure {
    margin: 0;
}
.lightbox__media {
    position: relative;
}
.lightbox__image {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 120px);
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s;
}
.lightbox__image.is-loaded {
    opacity: 1;
}
.lightbox__close {
    position: absolute;
    top: -10px;
    right: -9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.3s;
}
.lightbox__close:hover,
.lightbox__close:focus-visible {
    transform: scale(1.1);
}
.lightbox__close img {
    display: block;
    width: 23px;
    height: 23px;
}
.lightbox__caption {
    margin-top: 7px;
    padding-left: 11px;
    font-size: var(--fs-small);
    font-weight: 700;
}
/* centrées sur la photo (la légende fait ~25px) */
.lightbox__arrow {
    position: absolute;
    top: calc(50% - 12px);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: var(--color-white);
    cursor: pointer;
    transform: translateY(-50%);
    transition: background 0.3s;
}
.lightbox__arrow:hover,
.lightbox__arrow:focus-visible {
    background: var(--color-border-light);
}
.lightbox__arrow--prev {
    left: 0;
}
.lightbox__arrow--prev img {
    transform: rotate(180deg);
}
.lightbox__arrow--next {
    right: 0;
}
.lightbox__arrow[hidden] {
    display: none;
}
/* mobile : flèches posées sur les bords de la photo */
@media (max-width: 767px) {
    .lightbox {
        padding-inline: 0;
    }
    .lightbox__arrow--prev {
        left: 8px;
    }
    .lightbox__arrow--next {
        right: 8px;
    }
}

/* --------------------------------------------------- page contact (templates/contact.php) */
/* titres : mots entre astérisques en bleu foncé */
.contact-page__title {
    margin: 0;
    text-align: center;
}
.contact-page__title .text-primary {
    color: var(--color-secondary);
}
.contact-intro {
    margin-top: 74px;
    margin-bottom: 73px;
    text-align: center;
}
.contact-intro__text {
    max-width: 620px;
    margin: 20px auto 0;
    line-height: 1.4;
}
.contact-intro__text p {
    margin: 0;
}
.contact-intro__text strong {
    font-weight: 700;
}
/* traits bleus de 935px entre les sections */
.contact-agencies::before,
.contact-form::before {
    content: "";
    display: block;
    max-width: 935px;
    margin: 0 auto;
    border-top: 1px solid var(--color-primary);
}
/* le bloc rouge « être rappelé » colle à droite de l'écran, des agences jusqu'à la fin du formulaire */
.contact-page__body {
    position: relative;
}
.contact-page__aside {
    position: absolute;
    top: 471px;
    right: 0;
    bottom: 0;
    width: 223px;
}
.contact-page__callback.contact-cta__callback {
    position: sticky;
    top: 80px;
    color: var(--color-white);
}
.contact-page__callback a:hover,
.contact-page__callback a:focus {
    filter: none;
}

/* agences : 2 colonnes de 378px (carte 378 x 277px), décalées à gauche pour laisser la place au bloc rouge */
.contact-agencies > .contact-page__title {
    margin-top: 59px;
}
.contact-agencies__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 378px));
    gap: 48px 84px;
    width: fit-content;
    margin: 75px 0 82px max(0px, calc(50% - 461px));
}
.contact-agency__map {
    display: block;
    width: 100%;
    height: 277px;
    border: 0;
    background: var(--color-border-light);
}
.contact-agency__content {
    padding: 32px 0 0 47px;
}
.contact-agency__name {
    margin: 0 0 9px;
    font-family: var(--font-title);
    font-size: var(--fs-title-m);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}
.contact-agency__address {
    margin: 0 0 28px;
}
.contact-agency__phone {
    display: inline-block;
    margin-bottom: 39px;
    font-size: var(--fs-title-m);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
}
.contact-agency__phone:hover,
.contact-agency__phone:focus-visible {
    filter: none;
    color: var(--color-primary);
}
.contact-agency__hours-title {
    margin: 0 0 5px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-primary);
}
.contact-agency__hours {
    margin: 0;
    padding-left: 16px;
}
.contact-agency__hours li {
    margin: 0 0 3px;
}
.contact-agency__hours strong {
    font-weight: 700;
}

/* formulaire : 492px centrés (champs : styles de la popup « Être rappelé ») */
.contact-form {
    margin-bottom: 118px;
}
.contact-form > .contact-page__title {
    margin-top: 67px;
}
.contact-form__text {
    max-width: 620px;
    margin: 17px auto 0;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}
.contact-form__inner {
    max-width: 492px;
    margin: 52px auto 0;
}
.contact-form__message {
    margin-top: 23px;
}
.contact-form__consent {
    margin-top: 12px; /* 21px dans la maquette : la légende du fieldset ajoute ~9px */
}
.contact-form__consent .callback__checkbox {
    align-items: flex-start;
}
.contact-form__consent .callback__checkbox input {
    margin-top: 6px;
}
.contact-form__submit.callback__submit {
    margin-top: 22px;
}

/* petit desktop : le bloc rouge passe sous le formulaire, les agences se centrent */
@media (max-width: 1300px) {
    .contact-page__aside {
        position: static;
        width: auto;
        max-width: calc(560px + 2 * var(--gutter));
        margin: 0 auto 96px;
        padding-inline: var(--gutter);
    }
    .contact-page__callback.contact-cta__callback {
        position: relative;
        top: 0;
        width: auto;
        min-height: 0;
        border-radius: 29px;
    }
    .contact-agencies__grid {
        margin-left: auto;
        margin-right: auto;
    }
    .contact-form {
        margin-bottom: 96px;
    }
}
@media (max-width: 767px) {
    .contact-intro {
        margin-top: 48px;
        margin-bottom: 48px;
    }
    .contact-agencies > .contact-page__title,
    .contact-form > .contact-page__title {
        margin-top: 40px;
    }
    .contact-agencies__grid {
        grid-template-columns: minmax(0, 1fr);
        width: auto;
        margin: 32px 0 56px;
    }
    .contact-agency__map {
        height: 220px;
    }
    .contact-agency__content {
        padding: 20px 0 0;
    }
    .contact-agency__phone {
        margin-bottom: 24px;
    }
    .contact-form__inner {
        margin-top: 32px;
    }
    .contact-form {
        margin-bottom: 64px;
    }
    .contact-page__aside {
        margin-bottom: 64px;
    }
}

/* --------------------------------------------------- article : premier écran (single-post.php) */
/* photo 1344 x 306px ; sujet et titre centrés, qui débordent de 93px sur le bas de la photo */
.post-hero {
    margin-top: 20px;
}
.post-hero__media {
    height: 306px;
    background: var(--color-primary);
}
.post-hero__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.post-hero__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -93px;
    text-align: center;
}
.post-hero__topic {
    margin: 0;
    padding: 9px 30px;
    background: var(--color-secondary);
    font-size: clamp(1.125rem, 0.75rem + 1.6vw, 1.875rem);
    line-height: 1.3;
    text-decoration: none;
    color: var(--color-white);
}
.post-hero__topic:hover,
.post-hero__topic:focus-visible {
    filter: none;
    color: var(--color-white);
}
/* un bandeau bleu par ligne de titre (largeur du texte + 45px de chaque côté) */
.post-hero__title {
    max-width: 960px;
    margin: 0;
    padding: 10px 0; /* les bandeaux (74px) débordent de la ligne (54px) */
    font-family: var(--font-title);
    font-size: var(--fs-title-xl);
    font-weight: 700;
    line-height: 54px;
    color: var(--color-white);
}
.post-hero__title span {
    padding: 13px 45px;
    background: var(--color-primary);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --------------------------------------------------- notre entreprise (templates/entreprise.php) */
/* premier écran : styles de l'article ; puis texte bleu centré, blocs texte + image, engagements, réalisations */
.company-intro {
    max-width: calc(670px + 2 * var(--gutter));
    margin-top: 96px;
    font-size: var(--fs-lead);
    line-height: 1.4;
    text-align: center;
    color: var(--color-primary);
}
.company-intro p {
    margin: 0;
}
.company-intro strong {
    font-weight: 700;
}
.company-intro + .media-text {
    padding-top: 92px;
}
.media-text + .certifications {
    margin-top: 87px;
}
.certifications + .showcase {
    margin-top: 160px;
}
/* titres longs (« Concepteur, fabricant et installateur : ») : peuvent déborder dans l'espace vers l'image */
@media (min-width: 1301px) {
    .media-text--image-right .media-text__title {
        margin-right: -80px;
    }
}
@media (max-width: 767px) {
    .company-intro {
        margin-top: 56px;
    }
    .company-intro + .media-text {
        padding-top: 56px;
    }
    .media-text + .certifications {
        margin-top: 64px;
    }
    .certifications + .showcase {
        margin-top: 64px;
    }
}

/* --------------------------------------------------- article : contenu (éditeur) */
/* texte sur 670px, photos sur 900px */
.post-content {
    max-width: calc(900px + 2 * var(--gutter));
    margin-top: 96px;
}
/* mentions légales, politique de confidentialité (templates/legal.php) */
.legal-content {
    margin-bottom: 96px;
}
.legal-content > p {
    margin-bottom: 18px;
}
.post-content > * {
    max-width: 670px;
    margin: 0 auto 10px;
}
.post-content > :last-child {
    margin-bottom: 0;
}
.post-content p,
.post-content li {
    line-height: 1.4;
}
.post-content strong {
    font-weight: 700;
}
.post-content a {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}
.post-content ul,
.post-content ol {
    padding-left: 24px;
}
.post-content li {
    margin-bottom: 10px;
}
.post-content li:last-child {
    margin-bottom: 0;
}
/* titres : la partie en italique passe à la ligne en bleu foncé */
.post-content h2,
.post-content h3 {
    margin-top: 76px;
    margin-bottom: 22px;
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}
.post-content h2 {
    font-size: var(--fs-title-l);
}
.post-content h3 {
    font-size: var(--fs-title-m);
}
.post-content > h2:first-child,
.post-content > h3:first-child {
    margin-top: 0;
}
.post-content h2 em,
.post-content h3 em {
    display: block;
    font-style: normal;
    color: var(--color-secondary);
}
.post-content figure,
.post-content .wp-block-image {
    max-width: 900px;
    margin-top: 58px;
    margin-bottom: 58px;
}
.post-content figure + figure {
    margin-top: 26px;
}
.post-content figure + h2,
.post-content figure + h3 {
    margin-top: 120px;
}
.post-content img {
    display: block;
    width: 100%;
    height: auto;
}
/* photos recadrées en 900 x 550px comme la maquette */
.post-content .wp-block-image img {
    aspect-ratio: 900 / 550;
    object-fit: cover;
}
/* tableaux : sur la largeur du texte, en-tête bleu translucide, lignes séparées par un trait */
.post-content .wp-block-table {
    max-width: 670px;
    margin-top: 24px;
    margin-bottom: 24px;
    overflow-x: auto;
}
.post-content table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.4;
}
.post-content th,
.post-content td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border-light);
    text-align: left;
    vertical-align: top;
}
.post-content th {
    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-white));
    font-weight: 700;
    color: var(--color-primary);
}
.post-content figcaption {
    margin-top: 8px;
    font-size: var(--fs-small);
    text-align: center;
}

/* --------------------------------------------------- article : conseil de l'expert */
/* photo 282 x 309px (style du bloc guide : carrés et dégradé) + texte de 670px ;
   le bloc part du bord gauche des photos (900px) et déborde à droite */
.post-expert {
    margin-top: 124px;
}
.post-expert__inner {
    display: grid;
    grid-template-columns: 282px minmax(0, 670px);
    gap: 77px;
    align-items: start;
    max-width: 1029px;
    margin-left: max(0px, calc(50% - 450px));
}
.post-expert__content {
    padding-top: 28px;
}
/* portraits : recadrage centré sur le haut (visage) */
.post-expert__media .guide__image {
    object-position: center 20%;
}
.post-expert__title {
    margin: 0 0 33px;
    font-family: var(--font-title);
    font-size: var(--fs-title-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary);
}
.post-expert__subtitle {
    font-size: var(--fs-title-l);
    color: var(--color-text);
}
.post-expert__quote {
    margin: 0 0 13px;
    font-size: var(--fs-lead);
    line-height: 1.4;
    color: var(--color-primary);
}
.post-expert__quote p {
    margin: 0;
}
.post-expert__author {
    margin: 0;
}
.post-expert__author strong {
    font-weight: 700;
}

/* --------------------------------------------------- article : sujets associés */
.post-topics {
    max-width: calc(900px + 2 * var(--gutter));
    margin-top: 89px;
    margin-bottom: 94px;
}
.post-topics__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--color-primary);
}
.post-topics__label a {
    font-size: var(--fs-title-m);
    font-weight: 700;
    text-decoration: none;
    color: var(--color-text);
}

@media (max-width: 1100px) {
    .post-expert__inner {
        grid-template-columns: 282px minmax(0, 1fr);
        gap: 40px;
        margin-left: 0;
    }
}
@media (max-width: 767px) {
    .post-hero__media {
        height: 200px;
    }
    .post-hero__heading {
        margin-top: -40px;
    }
    .post-hero__topic {
        padding: 6px 20px;
    }
    .post-hero__title {
        padding: 6px 0;
        line-height: 1.5;
    }
    .post-hero__title span {
        padding: 6px 16px;
    }
    .post-content {
        margin-top: 56px;
    }
    .post-content h2,
    .post-content h3,
    .post-content figure + h2,
    .post-content figure + h3 {
        margin-top: 48px;
    }
    .post-content figure,
    .post-content .wp-block-image {
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .post-content figure + figure {
        margin-top: 16px;
    }
    .post-expert {
        margin-top: 64px;
    }
    .post-expert__inner {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 24px;
    }
    .post-expert__media {
        width: 282px;
        max-width: 100%;
    }
    .post-expert__content {
        padding-top: 0;
    }
    .post-expert__title {
        margin-bottom: 20px;
    }
    .post-topics {
        margin-top: 56px;
        margin-bottom: 64px;
    }
}

/* --------------------------------------------------- bloc contact « Et si on parlait de votre projet ? » (template-parts/contact-cta.php) */
.contact-cta {
    margin-bottom: 91px;
    overflow-x: clip; /* l'encadré rouge glisse depuis la droite sans créer de scroll horizontal */
    overflow-clip-margin: 16px; /* laisse la place à l'encadré quand il grossit au survol */
}
/* bandeau bleu foncé (116px) + zone bleue (315px), encadré rouge à droite par-dessus */
.contact-cta__inner {
    position: relative;
    color: var(--color-white);
}
.contact-cta__head {
    display: flex;
    align-items: flex-start;
    gap: 28px;
    min-height: 116px;
    padding: 27px 260px 20px 57px;
    background: var(--color-secondary);
}
.contact-cta__picto {
    flex-shrink: 0;
    width: 106px;
    height: auto;
}
.contact-cta__title {
    margin: 6px 0 0;
    font-size: var(--fs-title-l);
    line-height: 1.2;
}
.contact-cta__subtitle {
    margin: 1px 0 0;
}
.contact-cta__body {
    padding: 47px 263px 60px 56px;
    background: var(--color-primary);
}
.contact-cta__intro {
    margin: 0 0 31px;
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
}
.contact-cta__row {
    display: flex;
    align-items: flex-start;
    gap: 50px;
}
.contact-cta__agencies {
    display: flex;
    gap: 34px;
}
/* cartes agences : 350 x 158px */
.contact-cta__agency {
    width: 350px;
    min-height: 158px;
    padding: 24px 33px 20px;
    background: var(--color-white);
    color: var(--color-text);
}
.contact-cta__agency-name {
    margin: 0 0 9px;
    font-size: var(--fs-title-m);
    line-height: 1.2;
    color: var(--color-primary);
}
.contact-cta__agency-address {
    margin: 0 0 4px;
}
.contact-cta__agency-link {
    color: var(--color-text);
}
.contact-cta__map {
    flex-shrink: 0;
    width: 231px;
    height: auto;
    margin-top: 15px;
}
/* encadré rouge : 223 x 313px, collé à droite, arrondi à gauche */
.contact-cta__callback {
    position: absolute;
    top: 58px;
    right: 0;
    width: 223px;
    min-height: 313px;
    padding: 37px 20px 30px 30px;
    border-radius: 29px 0 0 30px;
    background: var(--color-accent);
    transition: transform 0.3s ease;
}
/* tout l'encadré est cliquable : la zone du lien (::before) le recouvre entièrement */
.contact-cta__callback-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}
.contact-cta__callback-link:focus-visible {
    outline: none;
}
.contact-cta__callback-link:focus-visible::before {
    outline: 2px solid var(--color-white);
    outline-offset: -6px;
}
.contact-cta__phone {
    display: block;
    width: 50px;
    height: auto;
    margin-bottom: 19px;
}
/* pour attirer l'œil : le téléphone sonne régulièrement, en continu au survol, et l'encadré grossit au survol */
@keyframes lamour-ring {
    0%, 12%, 100% { rotate: 0deg; }
    2%, 6%, 10% { rotate: -12deg; }
    4%, 8% { rotate: 12deg; }
}
@keyframes lamour-ring-hover {
    0%, 100% { rotate: 0deg; }
    25% { rotate: -12deg; }
    75% { rotate: 12deg; }
}
@media (prefers-reduced-motion: no-preference) {
    .contact-cta__phone {
        animation: lamour-ring 4s ease-in-out infinite;
    }
    .contact-cta__callback:hover .contact-cta__phone,
    .contact-cta__callback:has(a:focus-visible) .contact-cta__phone {
        animation: lamour-ring-hover 0.35s linear infinite;
    }
    .contact-cta__callback:hover,
    .contact-cta__callback:has(a:focus-visible) {
        transform: scale(1.04);
    }
}
/* encadré collé au bord droit du bloc : il grossit vers la gauche pour ne pas être coupé */
@media (min-width: 1101px) {
    .contact-cta .contact-cta__callback {
        transform-origin: right center;
    }
}
.contact-cta__callback-title {
    margin: 0 0 6px;
    font-family: var(--font-title);
    font-weight: 700;
    line-height: 1.2;
}
.contact-cta__callback-text {
    margin: 0 0 7px;
}
.contact-cta__callback-link {
    color: var(--color-white);
}
.contact-cta a:hover,
.contact-cta a:focus {
    filter: none;
}

/* petit desktop : la carte de Bretagne disparaît */
@media (max-width: 1300px) {
    .contact-cta__map {
        display: none;
    }
}
/* tablette : l'encadré rouge passe sous la zone bleue */
@media (max-width: 1100px) {
    .contact-cta__head {
        padding-right: 32px;
    }
    .contact-cta__body {
        padding: 40px 32px 48px;
    }
    .contact-cta__agencies {
        flex: 1;
    }
    .contact-cta__agency {
        flex: 1;
        width: auto;
    }
    .contact-cta__callback {
        position: relative;
        top: 0;
        width: auto;
        min-height: 0;
        padding: 32px;
        border-radius: 0;
    }
    .contact-cta__callback-title br,
    .contact-cta__callback-text br {
        display: none;
    }
}
@media (max-width: 767px) {
    .contact-cta {
        margin-bottom: 64px;
    }
    .contact-cta__head {
        flex-direction: column;
        gap: 16px;
        padding: 24px 20px;
    }
    .contact-cta__picto {
        width: 70px;
    }
    .contact-cta__title {
        margin-top: 0;
    }
    .contact-cta__body {
        padding: 32px 20px 40px;
    }
    .contact-cta__agencies {
        flex-direction: column;
        gap: 16px;
    }
    .contact-cta__agency {
        min-height: 0;
        padding: 20px 24px;
    }
    .contact-cta__callback {
        padding: 28px 20px;
    }
}

/* --------------------------------------------------- popup « Être rappelé » (template-parts/callback-popup.php) */
/* cadre blanc de 550px, arrondi 10px, sur un voile gris ; croix à cheval sur le coin haut droit */
html:has(.callback[open]) {
    overflow: hidden;
}
.callback {
    width: min(550px, 100% - 32px);
    max-width: none;
    max-height: calc(100dvh - 40px);
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 10px;
    background: var(--color-white);
    color: var(--color-text);
    /* apparition : fondu + légère remontée, à l'ouverture comme à la fermeture */
    opacity: 0;
    transform: translateY(24px) scale(0.98);
    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        overlay 0.35s ease allow-discrete,
        display 0.35s ease allow-discrete;
}
.callback[open] {
    opacity: 1;
    transform: none;
}
@starting-style {
    .callback[open] {
        opacity: 0;
        transform: translateY(24px) scale(0.98);
    }
}
/* voile : gris du texte (#3a3a3a) à 80 %, en fondu */
.callback::backdrop {
    background: rgba(58, 58, 58, 0);
    transition:
        background-color 0.35s ease,
        overlay 0.35s ease allow-discrete,
        display 0.35s ease allow-discrete;
}
.callback[open]::backdrop {
    background: rgba(58, 58, 58, 0.8);
}
@starting-style {
    .callback[open]::backdrop {
        background: rgba(58, 58, 58, 0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .callback,
    .callback::backdrop {
        transition: none;
    }
}
.callback__inner {
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    padding: 21px 30px 56px 27px;
}
.callback__close {
    position: absolute;
    top: -10px;
    right: -9px;
    z-index: 1;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    line-height: 0;
    cursor: pointer;
    transition: transform 0.3s;
}
.callback__close:hover,
.callback__close:focus-visible {
    transform: scale(1.1);
}
.callback__close img {
    display: block;
    width: 23px;
    height: 23px;
}
/* titre à gauche, picto téléphone à droite */
.callback__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.callback__title {
    margin: 19px 0 0;
    font-family: var(--font-text);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-primary);
}
.callback__picto {
    flex-shrink: 0;
    width: 50px;
    height: auto;
    margin-right: 9px;
}
.callback__text {
    margin: 8px 0 19px;
    font-size: var(--fs-lead);
}
/* champs : 2 colonnes, fond bleu à 15 %, arrondi 5px */
.callback__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 19px;
}
.callback__field {
    min-width: 0;
}
.callback__field--full {
    grid-column: 1 / -1;
}
.callback__label {
    display: block;
    margin: 0 0 6px 2px;
    padding: 0;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.3;
    color: var(--color-text);
}
.callback__required {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--color-primary);
}
.callback__input {
    display: block;
    width: 100%;
    height: 37px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 5px;
    background: color-mix(in srgb, var(--color-primary) 15%, var(--color-white));
    font-family: var(--font-text);
    font-size: var(--fs-small);
    color: var(--color-text);
    transition: border-color 0.3s;
}
.callback__input:focus {
    border-color: var(--color-primary);
    outline: none;
}
.callback__input[aria-invalid="true"] {
    border-color: var(--color-accent);
}
.callback__select {
    padding-right: 34px;
    background-image: url("images/chevron-down.svg");
    background-position: right 14px center;
    background-repeat: no-repeat;
    background-size: 11px 7px;
    appearance: none;
    cursor: pointer;
}
.callback__textarea {
    height: 94px;
    padding: 10px 12px;
    resize: vertical;
}
.callback__consent {
    margin: 30px 0 0;
    padding: 0;
    border: 0;
}
.callback__consent .callback__label {
    margin-bottom: 4px;
    font-size: var(--fs-text);
    letter-spacing: 0;
}
.callback__checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 3px;
    cursor: pointer;
}
.callback__checkbox input {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    margin: 0;
    accent-color: var(--color-primary);
}
.callback__checkbox a {
    color: inherit;
    text-decoration: underline;
}
.callback__error {
    margin: 4px 0 0 2px;
    font-size: 0.8125rem;
    color: var(--color-accent);
}
.callback__error--form {
    margin: 0 0 16px;
    font-size: var(--fs-small);
}
/* champ piège pour les robots : hors écran */
.callback__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.callback__submit {
    display: block;
    width: calc(100% - 3px);
    height: 52px;
    margin: 43px 0 0 2px;
    padding: 0 20px;
    border: 0;
    border-radius: 30px;
    background: var(--color-primary);
    font-family: var(--font-text);
    font-size: var(--fs-text);
    color: var(--color-white);
    cursor: pointer;
    transition: background-color 0.3s;
}
.callback__submit:hover,
.callback__submit:focus-visible {
    background: var(--color-secondary);
}
.callback__submit:disabled {
    opacity: 0.7;
    cursor: wait;
}
.callback__success {
    margin-top: 24px;
    font-size: var(--fs-lead);
    color: var(--color-primary);
}
.callback__success p {
    margin: 0;
}
.callback__success:focus {
    outline: none;
}

@media (max-width: 767px) {
    .callback__inner {
        padding: 20px 20px 32px;
    }
    .callback__grid {
        grid-template-columns: 1fr;
    }
    .callback__picto {
        width: 40px;
        margin-right: 0;
    }
    .callback__title {
        margin-top: 8px;
    }
    .callback__submit {
        margin-top: 32px;
    }
}

/* --------------------------------------------------- footer */
/* desktop : bloc logo bleu | contenu bleu foncé | bande bleue de la largeur de la gouttière */
.site-footer__main {
    display: grid;
    grid-template-columns: calc(var(--gutter) + 349px) 1fr var(--gutter);
    background: var(--color-secondary);
    color: var(--color-white);
}
.site-footer__main::after {
    content: "";
    background: var(--color-primary);
}
.site-footer__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 59px;
    background: var(--color-primary);
}
.site-footer__logo {
    display: block;
    line-height: 0;
    color: var(--color-white);
}
.site-footer__logo-img {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 260 / 152;
}
.site-footer__content {
    display: grid;
    grid-template-columns: 263px 251px auto;
    padding: 48px 0 46px 93px;
}
.site-footer__col--split {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
/* titre de colonne précédé d'un carré (bleu, rouge pour Contact) */
.site-footer__title {
    --footer-accent: var(--color-primary);
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 18px;
    text-transform: uppercase;
}
.site-footer__col--accent .site-footer__title {
    --footer-accent: var(--color-accent);
}
.site-footer__title::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--footer-accent);
}
/* listes de liens */
.site-footer__menu {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0 0 0 16px;
}
.site-footer__menu li {
    margin: 0;
}
.site-footer__main a {
    color: var(--color-white);
    text-decoration: none;
}
.site-footer__main a:hover,
.site-footer__main a:focus {
    filter: none;
}
.site-footer__menu a:hover,
.site-footer__menu a:focus {
    text-decoration: underline;
}
/* Notre gamme : Alfarn 18px, une ligne tous les 31px */
.site-footer__menu--large {
    gap: 9px;
    margin-top: 15px;
    font-family: var(--font-title);
    font-size: var(--fs-title-s);
    font-weight: 700;
    line-height: 22px;
}
/* À propos : Niramit 12px majuscules, une ligne tous les 30px */
.site-footer__menu--small {
    gap: 15px;
    margin-top: 15px;
    font-size: var(--fs-xsmall);
    line-height: 15px;
    text-transform: uppercase;
}
/* boutons Contact */
.site-footer__buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 10px;
}
.site-footer__buttons .btn {
    padding-inline: 25px;
    text-align: center;
}
/* réseaux sociaux */
/* sur une seule ligne : déborde sur la colonne Contact comme dans la maquette */
.site-footer__social {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 8px 17px;
    width: max-content;
    white-space: nowrap;
}
.site-footer__social-text {
    font-size: var(--fs-xsmall);
    line-height: 1.6;
}
.site-footer__social-list {
    display: flex;
    gap: 7px;
    list-style: none;
    margin: 0 0 0 4px;
    padding: 0;
}
.site-footer__social-list li {
    margin: 0;
}
.site-footer__social-link {
    display: block;
    line-height: 0;
    transition: opacity 0.3s;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus {
    opacity: 0.7;
}
/* barre du bas */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    min-height: 70px;
    padding: 12px var(--gutter);
    background: var(--color-white);
    font-size: var(--fs-xsmall);
    line-height: 25.6px;
    color: var(--color-text);
}
.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-footer__legal li {
    margin: 0;
}
.site-footer__legal li::after,
.site-footer__legal + .site-footer__credit::before {
    content: "|";
    margin: 0 12px;
}
.site-footer__legal li:last-child::after {
    content: none;
}
.site-footer__credit {
    margin: 0;
}
.site-footer__bottom a {
    color: inherit;
    text-decoration: underline;
}
.site-footer__bottom a:hover,
.site-footer__bottom a:focus {
    filter: none;
    color: var(--color-primary);
}

/* petit desktop : plus de bande bleue à droite, colonnes resserrées */
@media (max-width: 1300px) {
    .site-footer__main {
        grid-template-columns: calc(var(--gutter) + 349px) 1fr;
    }
    .site-footer__main::after {
        content: none;
    }
    /* colonne À propos / réseaux réduite à la largeur de son contenu le plus large */
    .site-footer__content {
        grid-template-columns: auto min-content auto;
        justify-content: space-between;
        column-gap: 32px;
        padding: 48px var(--gutter) 46px;
    }
    .site-footer__social {
        flex-wrap: wrap;
        width: auto;
        white-space: normal;
    }
    .site-footer__social .site-footer__title,
    .site-footer__social-text {
        white-space: nowrap;
    }
}
/* tablette : logo au-dessus, 2 colonnes en dessous */
@media (max-width: 1100px) {
    .site-footer__main {
        grid-template-columns: 1fr;
    }
    .site-footer__main::after {
        content: none;
    }
    .site-footer__brand {
        padding: 40px var(--gutter);
    }
    .site-footer__logo-img {
        width: 200px;
    }
    .site-footer__content {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 32px;
        padding: 48px var(--gutter);
    }
    .site-footer__col--accent {
        grid-column: 1 / -1;
    }
    .site-footer__buttons {
        flex-direction: row;
        flex-wrap: wrap;
    }
}
/* mobile : colonnes empilées */
@media (max-width: 767px) {
    .site-footer__brand {
        padding: 32px var(--gutter);
    }
    .site-footer__logo-img {
        width: 170px;
    }
    .site-footer__content {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px var(--gutter);
    }
    .site-footer__social {
        flex-wrap: wrap;
        width: auto;
    }
    .site-footer__buttons {
        flex-direction: column;
    }
    .site-footer__bottom {
        flex-direction: column;
        gap: 4px;
        text-align: center;
    }
    .site-footer__legal + .site-footer__credit::before {
        content: none;
    }
}
/* Template legal     ---------------------------------------- */
.page-template-legal .site > .container {
    margin-top: 120px;
    margin-bottom: 80px;
}
/* 404 ------------------------------------------- */
.error-404 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 275px 20px 150px;
    text-align: center;
}
.error-404__code {
    margin: 0 0 20px;
    font-size: clamp(6rem, 20vw, 14rem);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.error-404__text {
    margin-bottom: 30px;
    font-size: 1.1rem;
}
.error-404__btn {
    color: var(--color-primary);
    font-size: 15px;
    line-height: 140%;
    padding: 16px 41px 15px;
    border: 1px solid var(--color-primary);
}
.error-404__btn:hover {
    background: var(--color-primary);
    color: white;
    filter: brightness(1);
}

/* media queries ----------------------------------------------*/
@media only screen and (min-width: 1800px) {
}
@media only screen and (max-width: 1400px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1250px) {
}
@media only screen and (max-width: 1200px) {
}
@media only screen and (max-width: 1100px) {
}
@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 991px) {
}
@media only screen and (max-width: 899px) {
}
@media only screen and (max-width: 799px) {
}
@media only screen and (max-width: 767px) {
}
@media only screen and (max-width: 699px) {
}
@media only screen and (max-width: 599px) {
}
@media only screen and (max-width: 499px) {
}