/* ==========================================================================
   Groupe Wako — feuille de style principale
   Direction : garnet + charbon + ivoire, titres condensés en majuscules.
   ========================================================================== */

:root {
    /* Couleurs */
    --garnet: #6E2033;
    --garnet-fonce: #561828;
    --garnet-clair: #8B2E42;
    --rose-pale: #E7B9C2;
    --charbon: #1B1918;
    --nuit: #141210;
    --ivoire: #F7F5F1;
    --blanc: #FFFFFF;
    --bordure: #E4DFD5;
    --texte: #1B1918;
    --texte-doux: #5F584E;
    --texte-pale: #6E665B; /* 4.6:1 minimum sur les fonds clairs (WCAG AA) */
    --texte-sur-fonce: #A39A8D;

    /* Typographie */
    --police-titre: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --police-texte: 'Work Sans', system-ui, sans-serif;

    /* Mise en page */
    --largeur-max: 1312px;
    --gouttiere: clamp(16px, 4.5vw, 64px);
    --rayon: 3px;

    /* Mouvement */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--police-texte);
    font-size: 16px;
    line-height: 1.6;
    color: var(--texte);
    background: var(--ivoire);
    -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; } /* l'attribut hidden l'emporte toujours sur les styles d'affichage */
a { color: inherit; }
p { margin: 0; }
:where(ul[role="list"], ol[role="list"]) { list-style: none; margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--garnet); outline-offset: 3px; }
/* Sur les fonds garnet ou sombres, l'anneau de focus devient blanc pour rester visible */
.hero :focus-visible, .appel :focus-visible, .confiance :focus-visible, .pied :focus-visible,
.fabricant :focus-visible, .contact__infos :focus-visible { outline-color: var(--blanc); }

.conteneur {
    width: 100%;
    max-width: calc(var(--largeur-max) + 2 * var(--gouttiere));
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lien-evitement {
    position: absolute; left: 16px; top: -60px; z-index: 100;
    background: var(--charbon); color: var(--blanc); padding: 12px 18px;
    border-radius: var(--rayon); font-weight: 600; text-decoration: none;
}
.lien-evitement:focus { top: 16px; }

/* ---------- Typographie ---------- */

.titre {
    margin: 0;
    font-family: var(--police-titre);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 0.98;
    text-wrap: balance;
}
.titre--xl { font-size: clamp(44px, 6.4vw, 76px); }
.titre--l  { font-size: clamp(32px, 3.6vw, 44px); }
.titre--s  { font-size: 24px; line-height: 1.05; }

.surtitre {
    display: block;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--garnet);
    margin-bottom: 12px;
}
.surtitre--clair { color: var(--rose-pale); }

/* Mot-clé en tête du H1 (important pour Google), présenté comme un surtitre */
.h1__mot-cle {
    display: block;
    margin-bottom: 18px;
    font-family: var(--police-texte);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rose-pale);
}
.surtitre--pale  { color: var(--texte-pale); font-size: 12px; margin-bottom: 0; }
.surtitre--gris  { color: var(--texte-sur-fonce); font-size: 12px; margin-bottom: 0; }

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 14px 28px;
    border: 1.5px solid transparent;
    border-radius: 2px;
    font: 700 14px/1 var(--police-texte);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.bouton:active { transform: scale(0.97); }

.bouton--plein   { background: var(--garnet); color: var(--blanc); }
.bouton--blanc   { background: var(--blanc); color: var(--garnet); }
.bouton--contour { background: transparent; color: var(--blanc); border-color: rgba(255, 255, 255, 0.55); }
.bouton--large   { width: 100%; }

@media (hover: hover) and (pointer: fine) {
    .bouton--plein:hover   { background: var(--garnet-fonce); }
    .bouton--blanc:hover   { background: var(--ivoire); }
    .bouton--contour:hover { border-color: var(--blanc); background: rgba(255, 255, 255, 0.08); }
}

/* ---------- En-tête ---------- */

.entete {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--blanc);
    border-bottom: 1px solid var(--bordure);
    transition: box-shadow 200ms ease;
}
.entete.est-defile { box-shadow: 0 6px 24px -12px rgba(27, 25, 24, 0.25); }

.entete__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    height: 88px;
}

.marque { display: flex; flex: none; align-items: center; gap: 14px; text-decoration: none; }

/* Le logo est appliqué comme masque : sa couleur suit `background-color`. */
.marque__icone {
    flex: none;
    width: 52px;
    height: 40px;
    background-color: var(--garnet);
    -webkit-mask: url('/assets/img/logo-icone.png') center / contain no-repeat;
            mask: url('/assets/img/logo-icone.png') center / contain no-repeat;
}
.marque__icone--clair { background-color: var(--blanc); }

.marque__texte { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.marque__nom {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--charbon);
}
.marque__slogan {
    font-weight: 500;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--texte-pale);
}

.nav { display: flex; align-items: center; gap: 40px; }
.nav__liste { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; }
.nav__lien {
    position: relative;
    display: inline-block;
    padding: 8px 0;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--charbon);
    transition: color 200ms ease;
}
/* Soulignement qui se dessine de gauche à droite */
.nav__lien::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 2px;
    background: var(--garnet);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms var(--ease-out);
}
.nav__lien[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) {
    .nav__lien:hover { color: var(--garnet); }
    .nav__lien:hover::after { transform: scaleX(1); }
}

.nav__bascule {
    display: none;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    background: none; border: 0; padding: 0;
    color: var(--charbon); cursor: pointer;
    transition: transform 160ms var(--ease-out);
}
.nav__bascule:active { transform: scale(0.94); }
.nav__bascule-fermer { display: none; }
.nav__bascule[aria-expanded="true"] .nav__bascule-ouvrir { display: none; }
.nav__bascule[aria-expanded="true"] .nav__bascule-fermer { display: block; }

/* Entre 1180 et 1360 px : menu plus serré pour garder tout sur une ligne */
@media (min-width: 1180px) and (max-width: 1359px) {
    .nav { gap: 24px; }
    .nav__liste { gap: 22px; }
    .nav__lien { font-size: 13px; }
    .nav__cta { padding-left: 20px; padding-right: 20px; }
}

@media (max-width: 1179px) {
    .entete__inner { height: 72px; }
    .marque__icone { width: 44px; height: 34px; }
    .nav__bascule { display: inline-flex; }

    .nav {
        position: fixed;
        inset: 72px 0 auto 0;
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        padding: 24px var(--gouttiere) 32px;
        background: var(--blanc);
        border-bottom: 1px solid var(--bordure);
        box-shadow: 0 24px 40px -24px rgba(27, 25, 24, 0.35);
        /* Fermé : caché au-dessus, sans interaction */
        opacity: 0;
        transform: translateY(-8px);
        visibility: hidden;
        transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out), visibility 0s linear 200ms;
    }
    .nav.est-ouverte {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
        transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
    }
    .nav__liste { flex-direction: column; gap: 0; }
    .nav__lien {
        display: block;
        padding: 14px 0;
        font-size: 16px;
        border-bottom: 1px solid var(--bordure);
    }
    .nav__lien::after { display: none; }
    .nav__lien[aria-current="page"] { color: var(--garnet); }
    .nav__cta { width: 100%; }
}

/* ---------- Hero ---------- */

.hero {
    background: var(--garnet);
    color: var(--blanc);
    overflow: hidden;
}
.hero__grille {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    min-height: 620px;
}
.hero__texte {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
    padding: 72px 0;
}
.hero__intro {
    max-width: 480px;
    font-size: 17px;
    color: rgba(255, 255, 255, 0.86);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }

.hero__visuel { position: relative; }
.hero__panneau {
    position: absolute;
    top: 60px; bottom: 60px; left: 24px;
    right: calc(-1 * var(--gouttiere));
    background: var(--garnet-clair);
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: panneau-entre 900ms var(--ease-in-out) 150ms both;
}
.hero__placeholder {
    width: 72%;
    padding: 40px 24px;
    border: 1.5px dashed rgba(255, 255, 255, 0.4);
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}

/* Le panneau angulaire se dévoile de droite à gauche au chargement (vu une fois). */
@keyframes panneau-entre {
    from { clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%); }
}

.hero--division .conteneur {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 56px;
    padding-bottom: 80px;
}
.hero--division .hero__intro { max-width: 620px; }

.fil { font-size: 13px; color: rgba(255, 255, 255, 0.7); }
.fil a { color: var(--blanc); text-underline-offset: 3px; }

@media (max-width: 1023px) {
    .hero__grille { grid-template-columns: 1fr; min-height: 0; gap: 0; }
    .hero__texte { padding: 56px 0 40px; }
    .hero__visuel { height: 260px; margin: 0 calc(-1 * var(--gouttiere)); }
    .hero__panneau { top: 0; bottom: 0; left: 0; right: 0; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); }
    @keyframes panneau-entre {
        from { clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%); }
    }
}

/* Apparition échelonnée du texte du hero */
.apparition {
    animation: apparition 600ms var(--ease-out) both;
}
.apparition:nth-child(1) { animation-delay: 60ms; }
.apparition:nth-child(2) { animation-delay: 120ms; }
.apparition:nth-child(3) { animation-delay: 180ms; }
.apparition:nth-child(4) { animation-delay: 240ms; }
@keyframes apparition {
    from { opacity: 0; transform: translateY(12px); }
}

/* ---------- Sections ---------- */

.section { padding: clamp(64px, 8vw, 96px) 0; }
.section--blanc { background: var(--blanc); border-top: 1px solid var(--bordure); }

.section__entete {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px 48px;
    flex-wrap: wrap;
    margin-bottom: 44px;
}
.section__intro { max-width: 400px; font-size: 15px; color: var(--texte-doux); }

/* ---------- Cartes de division ---------- */

.cartes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.carte {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 36px 30px 32px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--garnet);
    border-radius: var(--rayon);
    transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.carte__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 56px; height: 56px;
    margin-bottom: 4px;
    background: var(--garnet);
    color: var(--blanc);
    border-radius: var(--rayon);
}
.carte__texte { flex: 1; font-size: 15px; line-height: 1.65; color: var(--texte-doux); }
.carte__lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--garnet);
}
/* Toute la carte est cliquable via le lien */
.carte__lien::after { content: ''; position: absolute; inset: 0; }
.carte__lien .icone { transition: transform 200ms var(--ease-out); }

@media (hover: hover) and (pointer: fine) {
    .carte:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(27, 25, 24, 0.3); }
    .carte:hover .carte__lien .icone { transform: translateX(4px); }
}
.carte:active { transform: scale(0.99); }

@media (max-width: 1023px) {
    .cartes { grid-template-columns: 1fr; gap: 20px; }
}

/* ---------- Barre de confiance ---------- */

.confiance { background: var(--charbon); color: var(--blanc); }
.confiance__liste {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 40px;
    padding-bottom: 40px;
}
.confiance__liste li {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 24px;
    border-left: 1px solid #33302B;
}
.confiance__liste li:first-child { border-left: 0; padding-left: 0; }
.confiance__chiffre { font-size: 34px; }

@media (max-width: 767px) {
    .confiance__liste { grid-template-columns: 1fr 1fr; gap: 28px 0; }
    .confiance__liste li:nth-child(odd) { border-left: 0; padding-left: 0; }
    .confiance__chiffre { font-size: 28px; }
}

/* ---------- Bande d'appel à l'action ---------- */

.appel { background: var(--garnet); color: var(--blanc); }
.appel__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding-top: 72px;
    padding-bottom: 72px;
    text-align: center;
}
.appel__inner p { color: rgba(255, 255, 255, 0.86); }
.appel__inner .bouton { margin-top: 8px; }

/* ---------- Services (pages de division) ---------- */

.services {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--bordure);
    border: 1px solid var(--bordure);
}
.service {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 36px 32px;
    background: var(--blanc);
}
.service p { color: var(--texte-doux); font-size: 15px; }
.service__numero {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 16px;
    color: var(--garnet);
}
@media (max-width: 767px) {
    .services { grid-template-columns: 1fr; }
    .service { padding: 28px 22px; }
}

.autres {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.autre {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 20px 24px;
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--ivoire);
    text-decoration: none;
    transition: border-color 200ms ease, transform 160ms var(--ease-out);
}
.autre .carte__icone { width: 48px; height: 48px; margin: 0; }
.autre .titre { flex: 1; }
.autre > .icone { color: var(--garnet); transition: transform 200ms var(--ease-out); }
.autre:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
    .autre:hover { border-color: var(--garnet); }
    .autre:hover > .icone { transform: translateX(4px); }
}
@media (max-width: 767px) {
    .autres { grid-template-columns: 1fr; }
}

/* ---------- Contact ---------- */

.contact {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}
@media (max-width: 1023px) {
    .contact { grid-template-columns: minmax(0, 1fr); }
}

.formulaire {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: clamp(24px, 4vw, 40px);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--garnet);
    border-radius: var(--rayon);
}
.formulaire__rangee { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 767px) {
    .formulaire__rangee { grid-template-columns: 1fr; }
}

.champ { display: flex; flex-direction: column; gap: 8px; }
.champ label { font-weight: 600; font-size: 14px; }
.champ__optionnel { font-weight: 400; color: var(--texte-pale); }
.champ input,
.champ select,
.champ textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    font: 16px/1.4 var(--police-texte);
    color: var(--texte);
    background: var(--ivoire);
    border: 1.5px solid var(--bordure);
    border-radius: 2px;
    transition: border-color 160ms ease, background-color 160ms ease;
}
.champ textarea { resize: vertical; }
.champ input:focus,
.champ select:focus,
.champ textarea:focus { outline: none; border-color: var(--garnet); background: var(--blanc); }
.champ--erreur input,
.champ--erreur textarea { border-color: #B3261E; }
.champ__erreur { font-size: 14px; color: #B3261E; }

.piege { position: absolute; left: -9999px; }

.avis { padding: 20px 24px; border-radius: var(--rayon); margin-bottom: 24px; }
.avis--succes { background: var(--blanc); border: 1px solid var(--bordure); border-left: 0; border-top: 6px solid var(--garnet); display: flex; flex-direction: column; gap: 10px; }
.avis--erreur { background: #FBEAEA; color: #7A1C16; }

.contact__infos {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 28px;
    background: var(--charbon);
    color: var(--texte-sur-fonce);
    border-radius: var(--rayon);
}
.contact__infos .titre { color: var(--blanc); margin-bottom: 6px; }
.contact__infos .surtitre--pale { color: var(--texte-sur-fonce); }
.contact__adresse, .pied__adresse { font-style: normal; }
.contact__carte { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--blanc); font-weight: 600; font-size: 14px; }
.contact__tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-weight: 700;
    font-size: 18px;
    color: var(--blanc);
    text-decoration: none;
}

/* ---------- Pied de page ---------- */

.pied {
    background: var(--nuit);
    color: var(--texte-sur-fonce);
    padding: 64px 0 32px;
    font-size: 14px;
}
.pied__grille {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px 24px;
    padding-bottom: 48px;
}
.pied__marque { display: flex; flex-direction: column; gap: 14px; max-width: 280px; }
.pied__nom {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 21px;
    text-transform: uppercase;
    color: var(--blanc);
}
.pied__titre {
    margin: 0 0 14px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--blanc);
}
.pied__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.pied__liste a { text-decoration: none; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) {
    .pied__liste a:hover { color: var(--blanc); }
}
.pied__bas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 20px;
    border-top: 1px solid #2A2723;
    font-size: 12px;
    color: #9A9184; /* 6:1 sur fond nuit */
}
@media (max-width: 1023px) {
    .pied__grille { grid-template-columns: 1fr 1fr; }
    .pied__marque { grid-column: 1 / -1; }
}

/* ---------- Catalogue portes de garage ---------- */

.titre--m { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.02; }

.note { margin-top: 20px; font-size: 13px; color: var(--texte-pale); }

/* Fabricants */
.fabricants {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.fabricant {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(28px, 4vw, 44px);
    border-radius: var(--rayon);
    color: var(--blanc);
}
.fabricant--lynx    { background: var(--charbon); }
.fabricant--polytek { background: var(--garnet); }
.fabricant .surtitre { margin-bottom: 0; }
.fabricant--lynx .surtitre--clair { color: var(--texte-sur-fonce); }
.fabricant__resume { color: rgba(255, 255, 255, 0.82); max-width: 520px; }

.atouts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px 28px;
    margin-top: 14px;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.atouts li { display: flex; flex-direction: column; gap: 4px; }
.atouts strong { font-size: 15px; }
.atouts span { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 1023px) {
    .fabricants { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .atouts { grid-template-columns: 1fr; }
}

/* Modèles Lynx */
.modeles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}
.modele {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out), border-color 200ms ease;
}
.modele__image {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 6 / 5;
    padding: 22px;
    background: #EDEAE4;
}
.modele__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 8px 14px rgba(27, 25, 24, 0.14));
    transition: transform 400ms var(--ease-out);
}
.modele__corps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 20px 20px 22px;
}
.modele__corps p { flex: 1; font-size: 14px; line-height: 1.5; color: var(--texte-doux); }
.modele__categorie {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--texte-pale);
}
.modele__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--garnet);
}
.modele__lien::after { content: ''; position: absolute; inset: 0; }
.modele__lien .icone { transition: transform 200ms var(--ease-out); }
.modele:active { transform: scale(0.99); }

@media (hover: hover) and (pointer: fine) {
    .modele:hover { border-color: #D3CCBF; box-shadow: 0 18px 36px -22px rgba(27, 25, 24, 0.35); }
    .modele:hover .modele__image img { transform: scale(1.03); }
    .modele:hover .modele__lien .icone { transform: translateX(3px); }
}
@media (max-width: 1179px) {
    .modeles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .modeles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .modele__image { padding: 14px; }
    .modele__corps { padding: 14px 14px 16px; }
    .modele__corps p { font-size: 13px; }
    .modele .titre--s { font-size: 20px; }
}

/* Couleurs et fenêtres */
.personnalisation {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
}
.personnalisation .section__intro { margin-top: 14px; }
@media (max-width: 1023px) {
    .personnalisation { grid-template-columns: 1fr; gap: 56px; }
}

.nuancier {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 16px;
    margin-top: 32px;
}
.nuance { display: flex; flex-direction: column; gap: 2px; }
.nuance__pastille {
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 10px;
    background: var(--nuance);
    border-radius: var(--rayon);
    /* Relief de panneau + bordure pour que le blanc se détache */
    box-shadow: inset 0 0 0 1px rgba(27, 25, 24, 0.12), inset 0 -10px 18px -12px rgba(0, 0, 0, 0.35);
}
.nuance__nom { font-weight: 600; font-size: 14px; }
.nuance__code { font-size: 12px; color: var(--texte-pale); }

.nuancier--compact { grid-template-columns: repeat(4, 44px); gap: 12px; margin-top: 10px; }
.nuancier--compact .nuance__pastille { aspect-ratio: 1; border-radius: 50%; margin-bottom: 4px; }
.nuancier--compact .nuance__nom { font-size: 12px; font-weight: 500; text-align: center; color: var(--texte-doux); }

.fenetres { display: flex; flex-direction: column; margin-top: 32px; border-top: 1px solid var(--bordure); }
.fenetre {
    display: grid;
    grid-template-columns: 148px 1fr;
    gap: 20px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--bordure);
}
.fenetre strong { display: block; font-size: 15px; }
.fenetre__texte { font-size: 14px; color: var(--texte-doux); }

/* Illustration : section supérieure d'une porte, avec ses fenêtres */
.fenetre__section {
    display: flex;
    justify-content: center;
    gap: 5px;
    padding: 9px 10px;
    height: 40px;
    background: var(--charbon);
    border-radius: 2px;
}
.fenetre__section span { flex: 1; max-width: 22px; background: #A9C4D0; border-radius: 1px; }
.fenetre__section--longue span,
.fenetre__section--depoli span { max-width: none; }
.fenetre__section--depoli span { background: #D9DEE0; }
.fenetre__section--decoratif span {
    max-width: 28px;
    background:
        linear-gradient(90deg, transparent 46%, var(--charbon) 46% 54%, transparent 54%),
        #A9C4D0;
}
@media (max-width: 480px) {
    .fenetre { grid-template-columns: 112px 1fr; gap: 14px; }
}

/* Polytek : onglets + galerie */
.polytek__couleurs { display: flex; flex-direction: column; }

.onglets__liste {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 24px;
    background: #ECE8E1;
    border-radius: 4px;
}
.onglets__bouton {
    min-height: 44px;
    padding: 10px 22px;
    border: 0;
    border-radius: 2px;
    background: transparent;
    font: 600 14px/1 var(--police-texte);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--texte-doux);
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, transform 160ms var(--ease-out);
}
.onglets__bouton:active { transform: scale(0.97); }
.onglets__bouton[aria-selected="true"] {
    background: var(--blanc);
    color: var(--garnet);
    box-shadow: 0 1px 3px rgba(27, 25, 24, 0.12);
}

.galerie {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.galerie[hidden] { display: none; }
.galerie:not([hidden]) {
    animation: galerie-entre 280ms var(--ease-out);
}
@keyframes galerie-entre {
    from { opacity: 0; transform: translateY(6px); }
}
.galerie__item { margin: 0; }
.galerie__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--rayon);
    background: #E4DFD5;
}
.galerie__item figcaption { margin-top: 10px; font-size: 14px; font-weight: 600; }
@media (max-width: 560px) {
    .galerie { grid-template-columns: 1fr; }
}

/* ---------- Spécialités électricité ---------- */

.specialites { display: flex; flex-direction: column; gap: 28px; }

.specialite {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    background: var(--ivoire);
}
/* Alterne le visuel à gauche / à droite */
.specialite:nth-child(even) .specialite__visuel { order: 2; }

.specialite__visuel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    min-height: 320px;
    padding: 36px;
    background: var(--charbon);
    color: var(--blanc);
    overflow: hidden;
}
.specialite:nth-child(2) .specialite__visuel { background: var(--garnet); }
/* Grande diagonale, écho au panneau angulaire du hero */
.specialite__visuel::after {
    content: '';
    position: absolute;
    inset: 0 0 0 55%;
    background: rgba(255, 255, 255, 0.05);
    clip-path: polygon(30% 0, 100% 0, 100% 100%, 0 100%);
}
.specialite__numero {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.5);
}
.specialite__icone { position: relative; z-index: 1; }
.specialite__marque {
    position: relative;
    z-index: 1;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 0.95;
    text-transform: uppercase;
}

.specialite__corps {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: clamp(28px, 4vw, 48px);
}
.specialite__corps .surtitre { margin-bottom: 0; }
.specialite__texte { color: var(--texte-doux); max-width: 560px; }
.specialite__points { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 10px; }
.specialite__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.specialite__points .icone { flex: none; margin-top: 3px; color: var(--garnet); }

/* Avec photo de chantier : l'image couvre le bloc, voile sombre pour lire la marque */
.specialite__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.specialite__visuel--photo .specialite__image { filter: saturate(0.9); }
.specialite__visuel--photo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(20, 18, 16, 0.15) 30%, rgba(20, 18, 16, 0.8));
}
.specialite__visuel--photo::after { display: none; }
.specialite__visuel--photo .specialite__numero,
.specialite__visuel--photo .specialite__icone,
.specialite__visuel--photo .specialite__marque { position: relative; z-index: 1; }
.specialite__visuel--photo .specialite__icone { visibility: hidden; }
/* Produit détouré : photo studio sur fond charbon, éclairage doux derrière le produit */
.specialite__visuel--detoure {
    background:
        radial-gradient(ellipse 60% 70% at 68% 50%, rgba(255, 255, 255, 0.10), transparent 70%),
        var(--charbon);
}
.specialite__visuel--detoure::after { display: none; }
.specialite__visuel--detoure .specialite__image {
    inset: 32px 32px 32px 36%;
    width: auto;
    height: auto;
    max-width: calc(64% - 32px);
    max-height: calc(100% - 64px);
    margin: auto;
    object-fit: contain;
    filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.55));
}
.specialite__visuel--detoure .specialite__numero,
.specialite__visuel--detoure .specialite__marque { position: relative; z-index: 1; }
.specialite__visuel--detoure .specialite__icone { visibility: hidden; }

/* Illustration vectorielle (ex. ajout d'étage) sur fond charbon */
.specialite__visuel--illustration::after { display: none; }
.specialite__illustration {
    position: absolute;
    inset: 40px 28px 72px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.specialite__illustration svg { width: 100%; height: 100%; max-width: 420px; }
.specialite__visuel--illustration .specialite__numero,
.specialite__visuel--illustration .specialite__marque { position: relative; z-index: 1; }
.specialite__visuel--illustration .specialite__marque { font-size: clamp(28px, 3vw, 40px); }
/* L'étage ajouté se pose en douceur quand le bloc entre à l'écran */
.illustration-etage__ajout { transform-box: fill-box; transform-origin: bottom; }
.js .revele .illustration-etage__ajout { opacity: 0; transform: translateY(-14px); transition: opacity 500ms var(--ease-out) 250ms, transform 700ms var(--ease-out) 250ms; }
.js .revele.est-visible .illustration-etage__ajout { opacity: 1; transform: none; }

/* Photo produit sur fond blanc : posée sur un fond clair, à droite */
.specialite__visuel--produit { background: #F1EEE9; color: var(--charbon); }
.specialite__visuel--produit .specialite__image { object-fit: contain; padding: 28px 28px 28px 45%; mix-blend-mode: multiply; }
.specialite__visuel--produit .specialite__numero { color: var(--texte-pale); }
.specialite__visuel--produit .specialite__icone { color: var(--garnet); }
.specialite__visuel--produit::after { display: none; }

.specialite__galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 520px; margin-bottom: 8px; }
.specialite__galerie img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rayon); }

/* Bornes proposées */
.bornes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; margin: 4px 0 10px; }
.borne {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 10px 12px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    font-size: 13px;
}
.borne img, .borne__substitut {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: contain;
    margin-bottom: 6px;
}
.borne img { mix-blend-mode: multiply; }
.borne__substitut { display: flex; align-items: center; justify-content: center; background: #F1EEE9; color: var(--texte-pale); border-radius: 2px; }
.borne strong { font-size: 14px; line-height: 1.25; }
.borne__origine { color: var(--garnet); font-weight: 600; font-size: 12px; }
.borne__specs { color: var(--texte-doux); font-size: 12px; line-height: 1.45; }
.borne__badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.badge {
    padding: 3px 7px;
    border-radius: 2px;
    background: #EFE6E8;
    color: var(--garnet);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.badge--hilo { background: #E3ECEF; color: #1F4E5F; }
.badge--kwh { background: #E6EFE3; color: #2F5A26; }

/* Aides financières */
.aides { margin-top: 64px; }
.aides__entete { margin-bottom: 24px; }
.aides__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.aide {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 32px;
    background: var(--ivoire);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--garnet);
    border-radius: var(--rayon);
}
.aide--hilo { border-top-color: #1F4E5F; }
.aide h4 { margin: 0; font-size: 17px; }
.aide p { color: var(--texte-doux); font-size: 15px; }
.aide__montant {
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 48px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--garnet);
}
.aide--hilo .aide__montant { color: #1F4E5F; }
.aide--kwh { border-top-color: #2F5A26; }
.aide--kwh .aide__montant { color: #2F5A26; }
.aide__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--charbon);
}
.aide__lien .icone { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .aide__lien:hover { color: var(--garnet); }
    .aide__lien:hover .icone { transform: translateX(3px); }
}

@media (max-width: 1023px) {
    .aides__grille { grid-template-columns: 1fr; }
    .bornes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .specialite { grid-template-columns: 1fr; }
    .specialite__visuel--photo { min-height: 240px; align-items: flex-end; }
    .specialite__visuel--produit { min-height: 220px; }
    .specialite__visuel--detoure { min-height: 260px; align-items: flex-end; }
    .specialite__visuel--illustration { min-height: 280px; align-items: flex-end; }
    .specialite__illustration { inset: 16px 16px 64px; }
    .specialite__visuel--detoure .specialite__image { inset: 20px 20px 20px 45%; max-width: calc(55% - 20px); max-height: calc(100% - 40px); }
    .specialite__visuel--produit .specialite__image { padding: 16px 16px 16px 50%; }
    .specialite:nth-child(even) .specialite__visuel { order: 0; }
    .specialite__visuel { min-height: 0; flex-direction: row; align-items: center; justify-content: flex-start; gap: 20px; padding: 24px; }
    .specialite__visuel .icone { width: 44px; height: 44px; }
    .specialite__numero { order: 3; margin-left: auto; }
    .specialite__corps .bouton { white-space: normal; text-align: center; }
}

/* ---------- Réalisations ---------- */

.lien-fleche {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--garnet);
}
.lien-fleche .icone { transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
    .lien-fleche:hover .icone { transform: translateX(3px); }
}

.realisations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}
.realisation {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    overflow: hidden;
    transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.realisation[hidden] { display: none; }
.realisation__image { position: relative; aspect-ratio: 4 / 3; background: #EDEAE4; overflow: hidden; }
.realisation__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms var(--ease-out);
}
.realisation__substitut {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    color: var(--texte-pale);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background: repeating-linear-gradient(135deg, #EDEAE4 0 14px, #E7E3DC 14px 28px);
}
.realisation__substitut--grand { aspect-ratio: 3 / 2; border-radius: var(--rayon); }
.realisation__pastille {
    position: absolute;
    left: 12px;
    top: 12px;
    padding: 5px 9px;
    border-radius: 2px;
    background: rgba(20, 18, 16, 0.78);
    color: var(--blanc);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.realisation__corps { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 24px; }
.realisation__corps p { flex: 1; font-size: 15px; color: var(--texte-doux); }
.realisation__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-pale);
}
.badge--exemple { background: #FFF1D6; color: #7A5200; text-transform: none; letter-spacing: 0; }
.realisation__lien {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--garnet);
}
.realisation__lien::after { content: ''; position: absolute; inset: 0; }
.realisation__lien .icone { transition: transform 200ms var(--ease-out); }
.realisation:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
    .realisation:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(27, 25, 24, 0.35); }
    .realisation:hover .realisation__image img { transform: scale(1.04); }
    .realisation:hover .realisation__lien .icone { transform: translateX(3px); }
}
@media (max-width: 1023px) {
    .realisations { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
    .realisations { grid-template-columns: 1fr; }
}
.realisations__vide { color: var(--texte-doux); }

/* Filtres par division */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.filtre {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1.5px solid var(--bordure);
    border-radius: 999px;
    background: var(--blanc);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--texte-doux);
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, transform 160ms var(--ease-out);
}
.filtre:active { transform: scale(0.97); }
.filtre[aria-current="true"] { background: var(--garnet); border-color: var(--garnet); color: var(--blanc); }
@media (hover: hover) and (pointer: fine) {
    .filtre:not([aria-current="true"]):hover { border-color: var(--garnet); color: var(--garnet); }
}

/* Page d'un projet */
.projet { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.projet__visuels { display: flex; flex-direction: column; gap: 16px; }
.projet__galerie { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.projet__galerie img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--rayon); }
.projet__galerie img:first-child { grid-column: 1 / -1; }
.projet__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.projet__texte p { color: var(--texte-doux); }
.projet__fiche { display: grid; gap: 0; width: 100%; margin: 8px 0; border-top: 1px solid var(--bordure); }
.projet__fiche div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--bordure); }
.projet__fiche dt { font-weight: 600; }
.projet__fiche dd { margin: 0; color: var(--texte-doux); }
.projet__fiche a { color: var(--garnet); }
@media (max-width: 1023px) {
    .projet { grid-template-columns: 1fr; gap: 32px; }
}

/* Comparateur avant / après : l'image « avant » est découpée par clip-path selon le curseur */
.comparateur {
    position: relative;
    margin: 0;
    aspect-ratio: 3 / 2;
    border-radius: var(--rayon);
    overflow: hidden;
    background: #EDEAE4;
    touch-action: pan-y;
}
.comparateur img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.comparateur__avant { clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.comparateur__poignee {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--position);
    width: 3px;
    margin-left: -1.5px;
    background: var(--blanc);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.comparateur__poignee::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--blanc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E2033' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 6 3 12 9 18'/%3E%3Cpolyline points='15 6 21 12 15 18'/%3E%3C/svg%3E") center / 22px no-repeat;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.comparateur__etiquette {
    position: absolute;
    top: 12px;
    padding: 5px 10px;
    border-radius: 2px;
    background: rgba(20, 18, 16, 0.72);
    color: var(--blanc);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    pointer-events: none;
}
.comparateur__etiquette--avant { left: 12px; }
.comparateur__etiquette--apres { right: 12px; }
/* Le curseur natif couvre toute l'image : glisser n'importe où, et clavier (flèches) accessible */
.comparateur__curseur {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
}
.comparateur:has(.comparateur__curseur:focus-visible) { outline: 3px solid var(--garnet); outline-offset: 3px; }

/* ---------- FAQ ---------- */

.faq { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 48px; align-items: start; }
.faq__liste { border-top: 1px solid var(--bordure); }
.faq__item { border-bottom: 1px solid var(--bordure); }
.faq__item summary {
    position: relative;
    display: block;
    padding: 20px 44px 20px 0;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
    content: '';
    position: absolute;
    right: 6px;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-top: -9px;
    border-right: 2px solid var(--garnet);
    border-bottom: 2px solid var(--garnet);
    transform: rotate(45deg);
    transition: transform 200ms var(--ease-out);
}
.faq__item[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq__item p { padding: 0 44px 22px 0; color: var(--texte-doux); }
.faq__item[open] p { animation: apparition 260ms var(--ease-out); }
@media (max-width: 1023px) {
    .faq { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- Questionnaire de soumission ---------- */

.hero--compact .conteneur { padding-bottom: 56px; }

.bouton--contour-fonce { background: transparent; color: var(--charbon); border-color: var(--bordure); }
@media (hover: hover) and (pointer: fine) {
    .bouton--contour-fonce:hover { border-color: var(--charbon); }
}
.bouton:disabled { opacity: 0.45; cursor: default; transform: none; }

.questionnaire {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: clamp(24px, 4vw, 44px);
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-top: 6px solid var(--garnet);
    border-radius: var(--rayon);
}
.etape, .groupe, .question { margin: 0; padding: 0; border: 0; min-width: 0; }
.etape { display: flex; flex-direction: column; gap: 22px; }
.etape[hidden], .groupe[hidden] { display: none; }
/* Sans JS, les étapes sont séparées par un filet */
.questionnaire:not(.questionnaire--etapes) .etape + .etape { padding-top: 28px; border-top: 1px solid var(--bordure); }
.etape--entree { animation: etape-entre 260ms var(--ease-out); }
@keyframes etape-entre {
    from { opacity: 0; transform: translateX(var(--entree, 16px)); }
}

.etape__titre {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0;
    margin-bottom: 4px;
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: clamp(24px, 2.6vw, 30px);
    line-height: 1.05;
    text-transform: uppercase;
}
.etape__titre:focus { outline: none; }
.etape__numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--garnet);
    color: var(--blanc);
    font-size: 18px;
}
.questionnaire--etapes .etape__numero { display: none; } /* la barre de progression suffit */
.etape__facultatif { font-family: var(--police-texte); font-weight: 500; font-size: 14px; text-transform: none; color: var(--texte-pale); }
.etape > .groupe + .groupe { margin-top: 12px; }

/* Progression */
.progression ol {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    counter-reset: etape;
}
.progression li {
    counter-increment: etape;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-pale);
    transition: color 200ms ease;
}
.progression li::before { content: counter(etape) '. '; }
.progression li[aria-current="step"] { color: var(--garnet); }
.progression li.est-fait { color: var(--charbon); }
.progression li.est-saute { text-decoration: line-through; opacity: 0.5; }
.progression__barre { display: block; height: 4px; border-radius: 2px; background: #EFEBE5; overflow: hidden; }
.progression__barre span {
    display: block;
    height: 100%;
    background: var(--garnet);
    transform: scaleX(0.2);
    transform-origin: left;
    transition: transform 400ms var(--ease-in-out);
}
@media (max-width: 640px) {
    .progression li { font-size: 0; }
    .progression li::before { font-size: 12px; content: counter(etape); }
    .progression li[aria-current="step"] { font-size: 12px; }
    .progression li[aria-current="step"]::before { content: counter(etape) '. '; }
    .progression ol { grid-template-columns: repeat(5, auto); justify-content: space-between; }
}

/* Grandes cartes de choix (étape 1) */
.cartes-choix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.carte-choix { position: relative; cursor: pointer; }
.carte-choix input, .option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
.carte-choix__corps {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 76px;
    padding: 16px 18px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--ivoire);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.carte-choix__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--rayon);
    background: var(--blanc);
    color: var(--garnet);
    font-family: var(--police-titre);
    font-weight: 800;
    font-size: 22px;
    transition: background-color 160ms ease, color 160ms ease;
}
.carte-choix__titre { font-weight: 700; font-size: 16px; }
.carte-choix:active .carte-choix__corps { transform: scale(0.98); }
.carte-choix input:checked + .carte-choix__corps { border-color: var(--garnet); background: #F8EEF0; box-shadow: inset 0 0 0 1px var(--garnet); }
.carte-choix input:checked + .carte-choix__corps .carte-choix__icone { background: var(--garnet); color: var(--blanc); }
.carte-choix input:focus-visible + .carte-choix__corps { outline: 2px solid var(--garnet); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
    .carte-choix:hover .carte-choix__corps { border-color: #CFC6B8; }
}
@media (max-width: 560px) {
    .cartes-choix { grid-template-columns: 1fr; }
}

/* Options (étapes 2 à 5) */
.options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.options--compactes { display: flex; flex-wrap: wrap; gap: 8px; }
.option { position: relative; cursor: pointer; }
.option span {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    height: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--bordure);
    border-radius: var(--rayon);
    background: var(--ivoire);
    font-weight: 600;
    font-size: 15px;
    transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
/* Pastille ronde type bouton radio, dessinée en CSS */
.option span::before {
    content: '';
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid #BDB4A6;
    border-radius: 50%;
    background: var(--blanc);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.option input[type="checkbox"] + span::before { border-radius: 3px; }
.option:active span { transform: scale(0.98); }
.option input:checked + span { border-color: var(--garnet); background: #F8EEF0; }
.option input:checked + span::before { border-color: var(--garnet); box-shadow: inset 0 0 0 4px var(--blanc); background: var(--garnet); }
.option input:focus-visible + span { outline: 2px solid var(--garnet); outline-offset: 3px; }
.option--pastille span { min-height: 44px; padding: 10px 16px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
    .option:hover span { border-color: #CFC6B8; }
}
@media (max-width: 560px) {
    .options { grid-template-columns: 1fr; }
}

.questions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 22px; }
.question--large { grid-column: 1 / -1; }
.question > legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 14px; }
.champ__indice { font-size: 13px; color: var(--texte-pale); }
@media (max-width: 640px) {
    .questions { grid-template-columns: 1fr; }
}

.recapitulatif { padding: 18px 20px; border-radius: var(--rayon); background: var(--ivoire); border: 1px dashed #D3CCBF; }
.recapitulatif__titre { margin: 0 0 10px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texte-pale); }
.recapitulatif dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; font-size: 14px; }
.recapitulatif dt { font-weight: 600; }
.recapitulatif dd { margin: 0; color: var(--texte-doux); }

.questionnaire__navigation {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 22px;
    border-top: 1px solid var(--bordure);
}
.questionnaire__navigation [data-envoyer]:only-child, .questionnaire:not(.questionnaire--etapes) [data-envoyer] { margin-left: auto; }
@media (max-width: 480px) {
    .questionnaire__navigation .bouton { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Bannière de témoins ---------- */

.temoins {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    max-width: 760px;
    margin: 0 auto;
    padding: 18px 20px;
    background: var(--blanc);
    border: 1px solid var(--bordure);
    border-radius: var(--rayon);
    box-shadow: 0 18px 40px -16px rgba(27, 25, 24, 0.35);
    font-size: 14px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out);
}
.temoins.est-ouverte { opacity: 1; transform: none; }
.temoins:not(.est-ouverte) { pointer-events: none; }
.temoins p { flex: 1 1 320px; color: var(--texte-doux); }
.temoins__actions { display: flex; gap: 10px; }
.pied__lien-bouton { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- Barre d'action mobile (appeler / soumission) ---------- */

.barre-mobile { display: none; }
@media (max-width: 767px) {
    .barre-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 55;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, 0.96);
        border-top: 1px solid var(--bordure);
        box-shadow: 0 -8px 24px -16px rgba(27, 25, 24, 0.35);
    }
    .barre-mobile .bouton { min-height: 48px; padding: 12px 10px; font-size: 13px; }
    .barre-mobile .bouton--contour-fonce { background: var(--blanc); }
    .barre-mobile--seule { grid-template-columns: 1fr; }
    body:has(.barre-mobile) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
    .temoins { bottom: calc(80px + env(safe-area-inset-bottom)); }

    /* Liens du pied de page : zones tactiles plus grandes */
    .pied__liste { gap: 2px; }
    .pied__liste a { display: inline-block; padding: 10px 0; }
}

/* ---------- Pages de texte (politique de confidentialité) ---------- */

.texte-legal { max-width: 760px; }
.texte-legal h2 { margin: 40px 0 12px; font-family: var(--police-titre); font-weight: 800; font-size: 26px; text-transform: uppercase; }
.texte-legal p, .texte-legal li { color: var(--texte-doux); }
.texte-legal p + p { margin-top: 12px; }
.texte-legal ul { display: flex; flex-direction: column; gap: 10px; padding-left: 20px; }
.texte-legal a, .note a, .temoins a { color: var(--garnet); }
.pied__bas a { color: inherit; }

/* ---------- Révélation au défilement ---------- */

/* Activée seulement si JS est présent (classe ajoutée par main.js). */
.js .revele {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
    transition-delay: var(--delai, 0ms);
}
.js .revele.est-visible { opacity: 1; transform: none; }
/* Une fois révélée, la carte reprend ses transitions d'interaction rapides. */
.js .carte.revele.est-revelee {
    transition: transform 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
    transition-delay: 0ms;
}

/* ---------- Mouvement réduit ---------- */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .apparition,
    .hero__panneau { animation: apparition-douce 300ms ease both; }
    @keyframes apparition-douce { from { opacity: 0; } }
    .js .revele { transform: none; transition: opacity 300ms ease; }
    .carte, .bouton, .autre, .nav, .modele, .modele__image img { transform: none !important; }
    .galerie:not([hidden]) { animation: apparition-douce 200ms ease; }
    .etape--entree { animation: apparition-douce 200ms ease; }
    .js .revele .illustration-etage__ajout { transform: none; }
}