/* ============================================================
   style.css — Melting Pop Art
   Palette : Crème #F7EDD8 | Sable #D4B896 | Marron #2C1810
             Rose #E94E77 (accents uniquement)
   Fonts   : Oswald (titres) | Roboto (corps)
   ============================================================ */

/* ── 1. Variables & Reset ────────────────────────────────────── */
:root {
    --rose        : #E94E77;
    --rose-sombre : #c73d62;
    --marron      : #2C1810;
    --marron-mid  : #5C3520;
    --creme       : #F7EDD8;
    --creme-sombre: #EFE0C4;
    --sable       : #D4B896;
    --blanc-chaud : #FDFAF5;
    --gris-chaud  : #9a8070;

    --font-titre  : 'Oswald', sans-serif;
    --font-corps  : 'Roboto', sans-serif;

    --rayon       : 4px;
    --rayon-lg    : 8px;
    --transition  : .25s ease;
    --max-width   : 1200px;

    --ombre-chaude   : rgba(44, 24, 16, .10);
    --ombre-chaude-md: rgba(44, 24, 16, .20);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
    font-family            : var(--font-corps);
    color                  : var(--marron);
    background             : var(--blanc-chaud);
    line-height            : 1.65;
    font-size              : 16px;
    -webkit-font-smoothing : antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: inherit; }
ul  { list-style: none; padding: 0; margin: 0; }

/* ── 2. Accessibilité ────────────────────────────────────────── */
.skip-link {
    position    : absolute;
    top         : -40px;
    left        : 0;
    background  : var(--rose);
    color       : var(--blanc-chaud);
    padding     : 8px 16px;
    font-size   : .9rem;
    z-index     : 9999;
    text-decoration: none;
    transition  : top var(--transition);
}
.skip-link:focus { top: 0; }

/* ── 3. Boutons ──────────────────────────────────────────────── */

/* Bouton principal : fond bois */
.btn-bois {
    position        : relative;
    overflow        : hidden;
    display         : inline-block;
    padding         : 15px 40px;
    font-family     : var(--font-corps);
    font-weight     : 700;
    font-size       : .93rem;
    letter-spacing  : .5px;
    color           : var(--creme);
    text-decoration : none;
    border          : none;
    cursor          : pointer;
}
.btn-bois::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
    z-index    : 0;
}
.btn-bois::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(28, 14, 6, .68);
    transition : background var(--transition);
    z-index    : 1;
}
.btn-bois:hover::after { background: rgba(28, 14, 6, .82); }
.btn-bois span { position: relative; z-index: 2; }

/* Bouton CTA rose (pour fond sombre/bois) */
.btn-cta-rose {
    position        : relative;
    overflow        : hidden;
    display         : inline-block;
    padding         : 16px 48px;
    font-family     : var(--font-corps);
    font-weight     : 700;
    font-size       : .95rem;
    letter-spacing  : .5px;
    color           : var(--blanc-chaud);
    border          : 1.5px solid var(--rose);
    text-decoration : none;
    transition      : border-color var(--transition);
}
.btn-cta-rose::before {
    content          : '';
    position         : absolute;
    inset            : 0;
    background       : var(--rose);
    transform        : scaleX(1);
    transform-origin : left;
    transition       : background .3s ease;
    z-index          : 0;
}
.btn-cta-rose:hover::before { background: var(--rose-sombre); }
.btn-cta-rose span { position: relative; z-index: 1; }

/* Bouton outline marron */
.btn-outline-bois {
    display         : inline-block;
    border          : 1.5px solid var(--marron-mid);
    color           : var(--marron);
    padding         : 11px 28px;
    font-family     : var(--font-corps);
    font-weight     : 700;
    font-size       : .85rem;
    letter-spacing  : .5px;
    text-decoration : none;
    transition      : background var(--transition), color var(--transition), border-color var(--transition);
}
.btn-outline-bois:hover {
    background   : var(--marron);
    color        : var(--creme);
    border-color : var(--marron);
}

/* Bouton nav CTA */
.btn-cta-nav {
    display         : inline-block;
    border          : 1px solid var(--rose);
    color           : var(--rose);
    padding         : 8px 18px;
    font-family     : var(--font-corps);
    font-weight     : 700;
    font-size       : .82rem;
    text-decoration : none;
    letter-spacing  : .3px;
    transition      : background var(--transition), color var(--transition);
}
.btn-cta-nav:hover { background: var(--rose); color: var(--blanc-chaud); }

/* ── 4. Helpers typographie ──────────────────────────────────── */
.section-label {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : 4px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 14px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
}
.section-label::after {
    content    : '';
    display    : block;
    height     : 1px;
    width      : 40px;
    background : var(--rose);
}

.section-h2 {
    font-family    : var(--font-titre);
    font-size      : clamp(1.8rem, 3vw, 2.8rem);
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    margin-bottom  : 52px;
    line-height    : 1.05;
    max-width      : 480px;
}
.section-h2--compact { margin-bottom: 0; }

/* Soulignement rose via <u> */
.section-h2 u {
    text-decoration  : none;
    background-image : linear-gradient(var(--rose), var(--rose));
    background-size  : 100% 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    padding-bottom   : 2px;
}

/* ── 5. Header / Navigation ──────────────────────────────────── */
header {
    position      : sticky;
    top           : 0;
    z-index       : 500;
    background    : url('bois.webp') center / cover;
    box-shadow    : 0 2px 20px rgba(0, 0, 0, .3);
}
header::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(28, 14, 6, .88);
    border-bottom: 2px solid var(--rose);
}
header > .nav-container { position: relative; z-index: 1; }

.nav-container {
    max-width   : var(--max-width);
    margin      : 0 auto;
    padding     : 0 24px;
    height      : 72px;
    display     : flex;
    align-items : center;
    gap         : 6px;
}

.logo {
    display        : flex;
    align-items    : center;
    gap            : 12px;
    text-decoration: none;
    flex-shrink    : 0;
    margin-right   : auto;
}
.logo-img {
    height : 44px;
    width  : auto;
    filter : drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.logo-text {
    font-family    : var(--font-titre);
    font-weight    : 700;
    font-size      : 1rem;
    color          : var(--creme);
    line-height    : 1.2;
    letter-spacing : 3.5px;
    text-transform : uppercase;
}
.logo-text span {
    display        : block;
    color          : var(--sable);
    font-size      : .6rem;
    font-weight    : 400;
    font-family    : var(--font-corps);
    letter-spacing : -0.1px;
    text-transform : uppercase;
}

.nav-links {
    display     : flex;
    align-items : center;
    gap         : 2px;
}

.nav-link {
    font-family    : var(--font-corps);
    font-weight    : 500;
    font-size      : .85rem;
    color          : var(--sable);
    text-decoration: none;
    padding        : 8px 11px;
    white-space    : nowrap;
    transition     : color var(--transition);
}
.nav-link:hover,
.nav-link.active { color: var(--creme); }

.nav-tel {
    color          : var(--sable);
    text-decoration: none;
    font-family    : var(--font-corps);
    font-weight    : 600;
    font-size      : .85rem;
    padding        : 8px 11px;
    white-space    : nowrap;
    transition     : color var(--transition);
}
.nav-tel:hover { color: var(--rose); }

.menu-toggle {
    display          : none;
    background       : none;
    border           : none;
    color            : var(--creme);
    font-size        : 1.5rem;
    cursor           : pointer;
    padding          : 8px;
    line-height      : 1;
    flex-shrink      : 0;
    transition       : background var(--transition);
    align-items      : center;
    justify-content  : center;
}
.menu-toggle:hover { background: rgba(255,255,255,.08); }

/* ── 6. Dropdown ─────────────────────────────────────────────── */
.dropdown { position: relative; }

.dropdown-toggle {
    background     : none;
    border         : none;
    cursor         : pointer;
    font-family    : var(--font-corps);
    font-weight    : 500;
    font-size      : .85rem;
    color          : var(--sable);
    padding        : 8px 11px;
    display        : flex;
    align-items    : center;
    gap            : 5px;
    white-space    : nowrap;
    transition     : color var(--transition);
}
.dropdown-toggle:hover,
.dropdown:hover .dropdown-toggle,
.dropdown.is-open .dropdown-toggle { color: var(--creme); }

.dropdown-arrow {
    font-size  : .58rem;
    transition : transform var(--transition);
}
.dropdown:hover .dropdown-arrow,
.dropdown.is-open .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
    position      : absolute;
    top           : calc(100% + 6px);
    left          : 0;
    background    : url('bois.webp') center / cover;
    border-radius : 0 var(--rayon) var(--rayon) var(--rayon);
    min-width     : 210px;
    padding       : 6px 0;
    box-shadow    : 0 12px 36px rgba(0,0,0,.35);
    opacity       : 0;
    visibility    : hidden;
    transform     : translateY(-6px);
    transition    : opacity var(--transition), visibility var(--transition), transform var(--transition);
    z-index       : 600;
    overflow      : hidden;
}
.dropdown-menu::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(28,14,6,.88);
    border-top : 2px solid var(--rose);
}
.dropdown:hover .dropdown-menu,
.dropdown.is-open .dropdown-menu {
    opacity    : 1;
    visibility : visible;
    transform  : translateY(0);
}
.dropdown-menu li { position: relative; z-index: 1; }
.dropdown-menu li a {
    display        : flex;
    align-items    : center;
    gap            : 10px;
    padding        : 10px 20px;
    color          : var(--sable);
    text-decoration: none;
    font-size      : .87rem;
    transition     : color var(--transition), padding-left var(--transition), background var(--transition);
}
.dropdown-menu li a:hover {
    color        : var(--creme);
    padding-left : 28px;
    background   : rgba(247,237,216,.06);
}

/* ── 7. Hero ─────────────────────────────────────────────────── */
.hero {
    display               : grid;
    grid-template-columns : 45% 55%;
    min-height            : calc(100vh - 72px);
}

/* Colonne gauche — photo atelier */
.hero-bois {
    position   : relative;
    overflow   : hidden;
    background : var(--marron); /* fallback si image non chargée */
}
.hero-bois-img {
    position   : absolute;
    inset      : 0;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    object-position: center;
    z-index    : 0;
}
.hero-bois::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(
        to right,
        rgba(28,14,6,.45) 0%,
        rgba(28,14,6,.15) 100%
    );
    z-index    : 1;
}
.hero-bois-logo {
    position   : absolute;
    top        : 40px;
    left       : 40px;
    width      : 88px;
    height     : auto;
    z-index    : 2;
    filter     : drop-shadow(0 2px 14px rgba(0,0,0,.65));
}
.hero-tag {
    position       : absolute;
    bottom         : 52px;
    right          : 0;
    z-index        : 2;
    background     : var(--rose);
    color          : var(--blanc-chaud);
    padding        : 18px 28px 18px 32px;
    font-family    : var(--font-titre);
    font-size      : .95rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 1.5px;
    line-height    : 1.4;
}
.hero-tag small {
    display        : block;
    font-family    : var(--font-corps);
    font-weight    : 400;
    font-size      : .68rem;
    letter-spacing : 2px;
    margin-top     : 3px;
    opacity        : .85;
}

/* Colonne droite — texte crème */
.hero-texte {
    background  : var(--creme);
    padding     : 72px 72px 72px 80px;
    display     : flex;
    flex-direction : column;
    justify-content: center;
    position    : relative;
}
/* Filigrane bois très subtil */
.hero-texte::before {
    content         : '';
    position        : absolute;
    inset           : 0;
    background      : url('bois.webp') center / cover;
    opacity         : .03;
    pointer-events  : none;
}
.hero-texte > * { position: relative; z-index: 1; }

.hero-eyebrow {
    font-size      : .72rem;
    font-weight    : 700;
    letter-spacing : 4px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 24px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
}
.hero-eyebrow::before {
    content    : '';
    display    : block;
    width      : 28px;
    height     : 2px;
    background : var(--rose);
}

.hero-h1 {
    font-family    : var(--font-titre);
    font-size      : clamp(3rem, 5.5vw, 5.8rem);
    font-weight    : 700;
    line-height    : .92;
    text-transform : uppercase;
    color          : var(--marron);
    letter-spacing : -1px;
    margin-bottom  : 32px;
}
/* Mot souligné rose */
.hero-h1 span {
    display             : inline;
    background-image    : linear-gradient(var(--rose), var(--rose));
    background-size     : 100% 4px;
    background-repeat   : no-repeat;
    background-position : 0 100%;
    padding-bottom      : 3px;
}

.hero-tagline {
    font-size    : 1rem;
    color        : var(--marron-mid);
    line-height  : 1.8;
    max-width    : 420px;
    margin-bottom: 48px;
    padding-left : 20px;
    border-left  : 3px solid var(--sable);
}
.hero-tagline strong { color: var(--marron); }

.hero-actions {
    display     : flex;
    gap         : 20px;
    align-items : center;
    flex-wrap   : wrap;
}

/* ── 8. Bandeau défilant ─────────────────────────────────────── */
.ticker {
    position : relative;
    overflow : hidden;
    padding  : 18px 0;
}
.ticker::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
}
.ticker::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(28,14,6,.82);
}
.ticker-track {
    position    : relative;
    z-index     : 1;
    display     : flex;
    white-space : nowrap;
    animation   : ticker-scroll 24s linear infinite;
}
.ticker-item {
    font-family    : var(--font-titre);
    font-size      : .88rem;
    font-weight    : 600;
    text-transform : uppercase;
    letter-spacing : 3px;
    color          : var(--sable);
    padding        : 0 24px;
    flex-shrink    : 0;
    opacity        : .6;
}
.ticker-sep {
    font-family : var(--font-titre);
    font-size   : .88rem;
    color       : var(--rose);
    flex-shrink : 0;
    padding     : 0 4px;
    opacity     : 1;
}
@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── 9. Services Bento ───────────────────────────────────────── */
.services-section {
    background : var(--blanc-chaud);
    padding    : 100px 40px;
    position   : relative;
}
.services-section::before {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : url('bois.webp') center / cover;
    opacity        : .04;
    pointer-events : none;
}
.services-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
    position  : relative;
}

.bento-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    grid-template-rows    : 240px 240px;
    gap                   : 10px;
}

.bento-card {
    position       : relative;
    overflow       : hidden;
    padding        : 32px 28px;
    display        : flex;
    flex-direction : column;
    justify-content: flex-end;
    transition     : transform var(--transition);
    text-decoration: none;
    color          : inherit;
    background     : var(--creme);
}
.bento-card::after {
    content    : '';
    position   : absolute;
    bottom     : 0;
    left       : 0;
    width      : 0;
    height     : 3px;
    background : var(--rose);
    transition : width .35s ease;
}
.bento-card:hover::after { width: 100%; }
.bento-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 16px 40px var(--ombre-chaude-md);
}

.bento-card--large { grid-column: span 2; grid-row: span 2; }
.bento-card--wide  { grid-column: span 2; }

/* Carte fond bois */
.bento-card--bois {
    background : url('bois.webp') center / cover no-repeat;
}
.bento-card--bois::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(180deg, rgba(28,14,6,0) 0%, rgba(28,14,6,.76) 100%);
    z-index    : 0;
    transition : background var(--transition);
}
.bento-card--bois:hover::before {
    background : linear-gradient(180deg, rgba(28,14,6,.1) 0%, rgba(28,14,6,.86) 100%);
}
.bento-card--bois > * { position: relative; z-index: 1; }
.bento-card--bois .bento-title { color: var(--creme); font-size: 1.85rem; }
.bento-card--bois .bento-desc  { color: rgba(247,237,216,.75); }
.bento-card--bois .bento-link  { color: var(--rose); }

/* Carte fond sombre marron + grain bois */
.bento-card--sombre {
    background : var(--marron);
}
.bento-card--sombre::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
    opacity    : .2;
    z-index    : 0;
}
.bento-card--sombre > * { position: relative; z-index: 1; }
.bento-card--sombre .bento-title { color: var(--creme); }
.bento-card--sombre .bento-desc  { color: var(--sable); }
.bento-card--sombre .bento-link  { color: var(--rose); }

.bento-num {
    position    : absolute;
    top         : 24px;
    right       : 24px;
    font-family : var(--font-titre);
    font-size   : 3.5rem;
    font-weight : 700;
    opacity     : .08;
    line-height : 1;
    color       : var(--marron);
}
.bento-card--bois   .bento-num { opacity: .15; color: var(--creme); }
.bento-card--sombre .bento-num { opacity: .18; color: var(--creme); }

.bento-icon {
    font-size    : 2.2rem;
    margin-bottom: 18px;
    display      : block;
    line-height  : 1;
}
.bento-title {
    font-family    : var(--font-titre);
    font-size      : 1.2rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : var(--marron);
    margin-bottom  : 8px;
    line-height    : 1.1;
}
.bento-desc {
    font-size    : .83rem;
    color        : var(--marron-mid);
    line-height  : 1.65;
    margin-bottom: 18px;
}
.bento-link {
    font-size      : .72rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 2px;
    color          : var(--rose);
    display        : flex;
    align-items    : center;
    gap            : 8px;
}
.bento-link::after { content: '→'; }

/* ── 10. Manifeste ───────────────────────────────────────────── */
.manifeste {
    position   : relative;
    padding    : 110px 40px;
    overflow   : hidden;
}
.manifeste::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover fixed;
}
.manifeste::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(44, 24, 10, .78);
}
.manifeste-inner {
    position  : relative;
    z-index   : 1;
    max-width : var(--max-width);
    margin    : 0 auto;
    display   : grid;
    grid-template-columns: 4px 1fr;
    gap       : 52px;
    align-items: start;
}
.manifeste-line {
    width       : 4px;
    height      : 100%;
    min-height  : 80px;
    background  : var(--rose);
    align-self  : stretch;
}
.manifeste-eyebrow {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : 4px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 20px;
    display        : block;
}
.manifeste-text {
    font-family    : var(--font-titre);
    font-size      : clamp(2rem, 4vw, 4rem);
    font-weight    : 700;
    text-transform : uppercase;
    line-height    : 1;
    letter-spacing : -.5px;
    color          : var(--creme);
    margin-bottom  : 28px;
}
.manifeste-text em {
    font-style : normal;
    color      : var(--rose);
}
.manifeste-sub {
    font-size   : .95rem;
    color       : var(--sable);
    max-width   : 580px;
    line-height : 1.85;
}

/* ── 11. Galerie preview ─────────────────────────────────────── */
.galerie-preview {
    background : var(--creme);
    padding    : 100px 40px;
    position   : relative;
}
.galerie-preview::before {
    content        : '';
    position       : absolute;
    inset          : 0;
    background     : url('bois.webp') center / cover;
    opacity        : .04;
    pointer-events : none;
}
.galerie-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
    position  : relative;
}
.galerie-header {
    display         : flex;
    justify-content : space-between;
    align-items     : flex-end;
    margin-bottom   : 44px;
}

/* Grille asymétrique */
.galerie-asym {
    display           : grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows    : 76px;
    gap               : 8px;
}
.g-item { overflow: hidden; position: relative; background: var(--creme-sombre); }
.g-item:nth-child(1) { grid-column: 1 / span 5;  grid-row: 1 / span 4; }
.g-item:nth-child(2) { grid-column: 6 / span 4;  grid-row: 1 / span 4; }
.g-item:nth-child(3) { grid-column: 10 / span 3; grid-row: 1 / span 4; }
.g-item:nth-child(4) { grid-column: 1 / span 4;  grid-row: 5 / span 3; }
.g-item:nth-child(5) { grid-column: 5 / span 5;  grid-row: 5 / span 3; }
.g-item:nth-child(6) { grid-column: 10 / span 3; grid-row: 5 / span 3; }

.g-item img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition : transform .4s ease;
}
.g-item:hover img { transform: scale(1.05); }

/* ── 13. CTA final ───────────────────────────────────────────── */
.cta-final {
    position   : relative;
    padding    : 120px 80px;
    text-align : center;
    overflow   : hidden;
}
.cta-final::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
}
.cta-final::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(44, 24, 10, .82);
}
.cta-final-inner {
    position  : relative;
    z-index   : 1;
    max-width : 720px;
    margin    : 0 auto;
}
.cta-overline {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : 5px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 20px;
    display        : block;
}
.cta-h2 {
    font-family    : var(--font-titre);
    font-size      : clamp(2.8rem, 6vw, 6rem);
    font-weight    : 700;
    text-transform : uppercase;
    line-height    : .92;
    letter-spacing : -1.5px;
    color          : var(--creme);
    margin-bottom  : 24px;
}
.cta-h2 em {
    font-style : normal;
    color      : var(--rose);
}
.cta-sub {
    font-size    : 1rem;
    color        : var(--sable);
    max-width    : 500px;
    margin       : 0 auto 52px;
    line-height  : 1.85;
}
.cta-final-btns {
    display         : flex;
    gap             : 20px;
    justify-content : center;
    align-items     : center;
    flex-wrap       : wrap;
}

/* ── 14. Page hero interne ───────────────────────────────────── */
.page-hero {
    position     : relative;
    padding      : 72px 24px;
    text-align   : center;
    overflow     : hidden;
}
.page-hero::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
}
.page-hero::after {
    content      : '';
    position     : absolute;
    inset        : 0;
    background   : rgba(28,14,6,.82);
    border-bottom: 3px solid var(--rose);
}
.page-hero-inner {
    position : relative;
    z-index  : 1;
}
.page-hero h1 {
    font-family    : var(--font-titre);
    font-size      : clamp(2rem, 4vw, 3rem);
    font-weight    : 700;
    color          : var(--creme);
    text-transform : uppercase;
    letter-spacing : 3px;
    margin-bottom  : 12px;
}
.page-hero p {
    color      : var(--sable);
    font-size  : 1rem;
    max-width  : 600px;
    margin     : 0 auto;
    line-height: 1.7;
}
.breadcrumb {
    background   : var(--creme);
    padding      : 12px 24px;
    font-size    : .8rem;
    color        : var(--gris-chaud);
    border-bottom: 1px solid var(--creme-sombre);
}
.breadcrumb-inner {
    max-width   : var(--max-width);
    margin      : 0 auto;
    display     : flex;
    gap         : 6px;
    align-items : center;
}
.breadcrumb a { color: var(--rose); text-decoration: none; }
.breadcrumb a:hover   { text-decoration: underline; }
.breadcrumb-sep       { color: var(--sable); }

/* ── 15. Footer ──────────────────────────────────────────────── */
.site-footer {
    position   : relative;
    color      : var(--sable);
    padding    : 70px 24px 0;
    background : url('bois.webp') center / cover;
}
.site-footer::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(28,14,6,.90);
    border-top : 3px solid var(--rose);
}
.site-footer > * { position: relative; z-index: 1; }

.footer-grid {
    max-width             : var(--max-width);
    margin                : 0 auto 50px;
    display               : grid;
    grid-template-columns : 2fr 1fr 1fr;
    gap                   : 48px;
}
.footer-logo {
    display        : flex;
    align-items    : center;
    gap            : 12px;
    text-decoration: none;
    margin-bottom  : 16px;
}
.footer-logo-img  { height: 44px; width: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.footer-logo-text {
    font-family    : var(--font-titre);
    font-weight    : 700;
    font-size      : 1rem;
    color          : var(--creme);
    letter-spacing : 3.5px;
    text-transform : uppercase;
    line-height    : 1.3;
}
.footer-logo-text span {
    display        : block;
    color          : var(--sable);
    font-size      : .6rem;
    font-family    : var(--font-corps);
    font-weight    : 400;
    letter-spacing : -0.1px;
    text-transform : uppercase;
}
.footer-desc {
    color      : #b09070;
    font-size  : .87rem;
    line-height: 1.75;
    margin-bottom: 22px;
}
.footer-address {
    font-style : normal;
    font-size  : .87rem;
    line-height: 1.9;
    color      : #b09070;
}
.footer-address a {
    color          : var(--rose);
    text-decoration: none;
    font-weight    : 500;
    transition     : color var(--transition);
}
.footer-address a:hover { color: var(--creme); }

.footer-socials { display: flex; gap: 10px; margin-top: 22px; }
.footer-social {
    width           : 38px;
    height          : 38px;
    background      : rgba(247,237,216,.06);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    color           : #a08060;
    text-decoration : none;
    font-size       : 1rem;
    transition      : background var(--transition), color var(--transition);
}
.footer-social:hover { background: var(--rose); color: var(--blanc-chaud); }

.footer-col-h4-sub { margin-top: 28px; }
.footer-col h4 {
    font-family    : var(--font-titre);
    font-size      : .95rem;
    font-weight    : 600;
    color          : var(--creme);
    text-transform : uppercase;
    letter-spacing : 1.5px;
    margin-bottom  : 20px;
    padding-bottom : 10px;
    border-bottom  : 1px solid rgba(247,237,216,.08);
}
.footer-nav          { list-style: none; }
.footer-nav li       { margin-bottom: 10px; }
.footer-nav a {
    color          : #b09070;
    text-decoration: none;
    font-size      : .87rem;
    display        : flex;
    align-items    : center;
    gap            : 8px;
    transition     : color var(--transition), padding-left var(--transition);
}
.footer-nav a:hover { color: var(--rose); padding-left: 4px; }

.footer-bottom {
    border-top      : 1px solid rgba(247,237,216,.06);
    padding         : 22px 24px;
    text-align      : center;
    font-size       : .8rem;
    color           : #907050;
    display         : flex;
    flex-wrap       : wrap;
    gap             : 16px;
    justify-content : center;
    align-items     : center;
    max-width       : var(--max-width);
    margin          : 0 auto;
}
.footer-bottom a { color: #a08060; text-decoration: none; transition: color var(--transition); }
.footer-bottom a:hover { color: var(--rose); }
.footer-bottom-sep     { color: #7a5840; }

/* ── 16. Formulaire contact ──────────────────────────────────── */
.form-group { margin-bottom: 20px; }
.form-group label {
    display      : block;
    font-weight  : 500;
    font-size    : .9rem;
    margin-bottom: 7px;
    color        : var(--marron);
}
.form-group input,
.form-group select,
.form-group textarea {
    width         : 100%;
    padding       : 12px 16px;
    border        : 2px solid var(--creme-sombre);
    border-radius : var(--rayon);
    font-family   : var(--font-corps);
    font-size     : .95rem;
    color         : var(--marron);
    background    : var(--blanc-chaud);
    outline       : none;
    transition    : border-color var(--transition), box-shadow var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color : var(--rose);
    box-shadow   : 0 0 0 3px rgba(233,78,119,.12);
}
.form-group textarea { min-height: 140px; resize: vertical; }
.form-row {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 20px;
}
.hp-field   { display: none; }
.form-msg   { padding: 14px 20px; border-radius: var(--rayon); font-size: .9rem; margin-bottom: 20px; }
.form-msg--ok  { background: #d4f4e1; color: #1a6b3a; border: 1px solid #a8e6c1; }
.form-msg--err { background: #fde8ed; color: #8b1a36; border: 1px solid #f5b8cb; }

/* ── 17. Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
    .bento-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
    .bento-card--large { grid-column: span 2; grid-row: span 1; }
    .bento-card--wide  { grid-column: span 2; }
    .galerie-asym { grid-template-columns: repeat(6, 1fr); }
    .g-item:nth-child(1) { grid-column: 1 / span 3; grid-row: 1 / span 3; }
    .g-item:nth-child(2) { grid-column: 4 / span 3; grid-row: 1 / span 3; }
    .g-item:nth-child(3) { grid-column: 1 / span 2; grid-row: 4 / span 2; }
    .g-item:nth-child(4) { grid-column: 3 / span 4; grid-row: 4 / span 2; }
    .g-item:nth-child(5) { grid-column: 1 / span 3; grid-row: 6 / span 2; display: block; }
    .g-item:nth-child(6) { grid-column: 4 / span 3; grid-row: 6 / span 2; display: block; }
}

@media (max-width: 900px) {
    .menu-toggle { display: flex; }

    .nav-links {
        display        : none;
        position       : fixed;
        top            : 72px;
        left           : 0;
        right          : 0;
        bottom         : 0;
        background     : url('bois.webp') center / cover;
        flex-direction : column;
        align-items    : stretch;
        gap            : 0;
        padding        : 16px 0 60px;
        overflow-y     : auto;
        z-index        : 400;
    }
    .nav-links::before {
        content    : '';
        position   : fixed;
        top        : 72px;
        left       : 0;
        right      : 0;
        bottom     : 0;
        background : rgba(28,14,6,.93);
        z-index    : -1;
    }
    .nav-links.is-open { display: flex; }

    .nav-link,
    .nav-tel {
        padding      : 14px 28px;
        font-size    : 1rem;
        border-bottom: 1px solid rgba(247,237,216,.04);
        border-radius: 0;
    }
    .btn-cta-nav {
        margin     : 20px 28px 0;
        text-align : center;
        padding    : 14px 28px;
    }

    /* Dropdown mobile */
    .dropdown-toggle {
        padding        : 14px 28px;
        font-size      : 1rem;
        width          : 100%;
        border-radius  : 0;
        justify-content: space-between;
        border-bottom  : 1px solid rgba(247,237,216,.04);
    }
    .dropdown-menu {
        position    : static;
        opacity     : 1;
        visibility  : hidden;
        transform   : none;
        max-height  : 0;
        overflow    : hidden;
        border      : none;
        border-radius: 0;
        background  : rgba(247,237,216,.03);
        box-shadow  : none;
        padding     : 0;
        transition  : max-height .3s ease, visibility .3s;
    }
    .dropdown-menu::before { display: none; }
    .dropdown.is-open .dropdown-menu { visibility: visible; max-height: 400px; }
    .dropdown-menu li a { padding: 12px 28px 12px 48px; font-size: .95rem; }
    .dropdown-menu li a:hover { padding-left: 56px; }

    /* Hero mobile */
    .hero { grid-template-columns: 1fr; }
    .hero-bois { height: 55vw; min-height: 240px; }
    .hero-texte { padding: 52px 28px; }
    .hero-h1 { font-size: 3rem; }

    /* Manifeste */
    .manifeste-inner { gap: 28px; }

    /* CTA */
    .cta-final { padding: 80px 28px; }
    .cta-h2    { font-size: 2.8rem; letter-spacing: -1px; }
}

@media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .form-row    { grid-template-columns: 1fr; }
    .galerie-header { flex-direction: column; align-items: flex-start; gap: 20px; }
}

@media (max-width: 600px) {
    .bento-grid { grid-template-columns: 1fr; }
    .bento-card--large,
    .bento-card--wide  { grid-column: span 1; }
    .services-section,
    .galerie-preview,
    .manifeste { padding: 72px 20px; }
}

@media (max-width: 480px) {
    .galerie-asym {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 140px;
        grid-auto-flow: row dense;
    }
    .g-item:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
    .g-item:nth-child(2),
    .g-item:nth-child(3),
    .g-item:nth-child(4),
    .g-item:nth-child(5) { grid-column: span 1; grid-row: span 1; }
    .g-item:nth-child(6) { grid-column: 1 / -1; grid-row: span 1; }
    .cta-final-btns { flex-direction: column; align-items: stretch; }
    .cta-final-btns .btn-cta-rose { text-align: center; }
    .footer-bottom  { flex-direction: column; gap: 8px; }
}

/* ============================================================
   PAGES INTÉRIEURES
   ============================================================ */

/* ── Page Hero ───────────────────────────────────────────────── */
.page-hero {
    background    : var(--creme-sombre);
    padding       : 80px 40px;
    position      : relative;
    overflow      : hidden;
    border-bottom : 2px solid var(--sable);
}
.page-hero::before {
    content    : '';
    position   : absolute;
    top        : 0; left: 0; bottom: 0;
    width      : 5px;
    background : var(--rose);
}
.page-hero::after {
    content    : '';
    position   : absolute;
    top        : -40px; right: -40px;
    width      : 260px; height: 260px;
    background : url('bois.webp') center / cover;
    opacity    : .08;
    border-radius: 50%;
}
.page-hero-inner {
    max-width  : var(--max-width);
    margin     : 0 auto;
    position   : relative;
    z-index    : 1;
}
.page-hero-eyebrow {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : 4px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 18px;
}
.page-hero-h1 {
    font-family    : var(--font-titre);
    font-size      : clamp(2.2rem, 5vw, 4rem);
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    line-height    : 1.05;
    margin-bottom  : 28px;
}
.page-hero-h1 em {
    color      : var(--rose);
    font-style : normal;
}
.page-hero-intro {
    font-size   : 1.05rem;
    color       : var(--marron-mid);
    max-width   : 640px;
    line-height : 1.75;
}

/* ── Service Section ─────────────────────────────────────────── */
.service-section {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.service-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.service-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(240px, 1fr));
    gap                   : 24px;
    margin-top            : 0;
}
.service-card {
    background  : var(--creme);
    padding     : 36px 28px;
    border-left : 4px solid var(--rose);
    transition  : box-shadow var(--transition), transform var(--transition);
}
.service-card:hover {
    box-shadow : 0 8px 28px var(--ombre-chaude-md);
    transform  : translateY(-3px);
}
.service-card h3 {
    font-family    : var(--font-titre);
    font-size      : 1.05rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : var(--marron);
    margin-bottom  : 12px;
}
.service-card p {
    font-size   : .88rem;
    color       : var(--marron-mid);
    line-height : 1.65;
}

/* ── Section générique intérieure ────────────────────────────── */
.section-page {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.section-page--creme { background: var(--creme-sombre); }
.section-page-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.section-page-text {
    font-size   : 1rem;
    color       : var(--marron-mid);
    max-width   : 760px;
    line-height : 1.8;
    margin-top  : 0;
}
.section-page-text + .section-page-text { margin-top: 20px; }

/* ── Galerie (page dédiée) ───────────────────────────────────── */
.galerie-page {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.galerie-page-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.galerie-filtres {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 10px;
    margin-top  : 32px;
    margin-bottom: 48px;
}
.filtre-btn {
    padding        : 9px 22px;
    font-family    : var(--font-corps);
    font-size      : .78rem;
    font-weight    : 700;
    letter-spacing : 1.5px;
    text-transform : uppercase;
    border         : 1.5px solid var(--sable);
    color          : var(--marron-mid);
    background     : transparent;
    cursor         : pointer;
    transition     : all var(--transition);
    border-radius  : var(--rayon);
}
.filtre-btn:hover,
.filtre-btn.active {
    background   : var(--marron);
    color        : var(--creme);
    border-color : var(--marron);
}
.galerie-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(260px, 1fr));
    gap                   : 20px;
}
.galerie-item {
    aspect-ratio : 1;
    background   : var(--creme-sombre);
    position     : relative;
    overflow     : hidden;
    border-radius: var(--rayon);
    display      : flex;
    align-items  : center;
    justify-content: center;
    flex-direction: column;
    gap          : 10px;
    font-size    : 2.5rem;
    color        : var(--sable);
    transition   : transform var(--transition), box-shadow var(--transition);
}
.galerie-item:hover {
    transform  : scale(1.02);
    box-shadow : 0 12px 32px var(--ombre-chaude-md);
}
.galerie-item span {
    font-family    : var(--font-corps);
    font-size      : .75rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 2px;
    color          : var(--marron-mid);
}
.galerie-note {
    margin-top  : 48px;
    padding-top : 32px;
    border-top  : 1px solid var(--sable);
    font-size   : .9rem;
    color       : var(--gris-chaud);
    font-style  : italic;
    max-width   : 640px;
}

/* ── À propos ────────────────────────────────────────────────── */
.apropos-texte {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.apropos-texte-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
    display   : grid;
    grid-template-columns: 1fr 1fr;
    gap       : 60px;
    align-items: start;
}
.apropos-texte p {
    font-size   : 1rem;
    color       : var(--marron-mid);
    line-height : 1.85;
    margin-bottom: 20px;
}
.apropos-texte p:last-child { margin-bottom: 0; }
.valeurs-section {
    padding    : 80px 40px;
    background : var(--creme-sombre);
}
.valeurs-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.valeurs-grid {
    display               : grid;
    grid-template-columns : repeat(auto-fit, minmax(160px, 1fr));
    gap                   : 20px;
    margin-top            : 0;
}
.valeur-item {
    text-align  : center;
    padding     : 40px 20px;
    background  : var(--blanc-chaud);
    border-top  : 3px solid var(--rose);
    transition  : box-shadow var(--transition);
}
.valeur-item:hover { box-shadow: 0 8px 24px var(--ombre-chaude); }
.valeur-title {
    font-family    : var(--font-titre);
    font-size      : .95rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 2px;
    color          : var(--marron);
}

/* ── Contact ─────────────────────────────────────────────────── */
.contact-layout {
    display   : grid;
    grid-template-columns: 1fr 1fr;
    gap       : 60px;
    max-width : var(--max-width);
    margin    : 0 auto;
    padding   : 80px 40px;
}
.contact-info h2,
.contact-form-wrap h2 {
    font-family    : var(--font-titre);
    font-size      : 1.6rem;
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    margin-bottom  : 12px;
}
.contact-info > p,
.contact-form-wrap > p {
    font-size   : .93rem;
    color       : var(--marron-mid);
    line-height : 1.7;
    margin-bottom: 28px;
}
.contact-info address {
    font-style   : normal;
    margin-top   : 32px;
}
.contact-info address p {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : .92rem;
    color       : var(--marron-mid);
    margin-bottom: 10px;
}
.contact-info address a {
    color           : var(--marron-mid);
    text-decoration : none;
    transition      : color var(--transition);
}
.contact-info address a:hover { color: var(--rose); }

/* ── Légal ───────────────────────────────────────────────────── */
.legal-page {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.legal-inner {
    max-width : 820px;
    margin    : 0 auto;
}
.legal-inner h1 {
    font-family    : var(--font-titre);
    font-size      : clamp(1.8rem, 3vw, 2.8rem);
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    margin-bottom  : 12px;
}
.legal-inner .legal-date {
    font-size    : .8rem;
    color        : var(--gris-chaud);
    margin-bottom: 48px;
    display      : block;
}
.legal-inner h2 {
    font-family    : var(--font-titre);
    font-size      : 1.2rem;
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    margin-top     : 40px;
    margin-bottom  : 12px;
}
.legal-inner p,
.legal-inner ul { font-size: .93rem; color: var(--marron-mid); line-height: 1.8; margin-bottom: 16px; }
.legal-inner ul { padding-left: 20px; list-style: disc; }

/* ── Bloc 1 Accueil — Présentation ──────────────────────────── */
.presentation-section {
    padding    : 80px 40px;
    background : var(--creme-sombre);
}
.presentation-inner {
    max-width             : var(--max-width);
    margin                : 0 auto;
    display               : grid;
    grid-template-columns : 300px 1fr;
    gap                   : 60px;
    align-items           : start;
}
.presentation-right p {
    font-size    : 1rem;
    color        : var(--marron-mid);
    line-height  : 1.85;
    margin-bottom: 20px;
}
.presentation-right p:last-child { margin-bottom: 0; }

/* ── Bloc 2 Accueil — Univers ────────────────────────────────── */
.univers-section {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
}
.univers-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.univers-grid {
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 24px;
}
.univers-card {
    display         : block;
    text-decoration : none;
    color           : inherit;
    background      : var(--creme);
    padding         : 40px 32px;
    min-height      : 220px;
    position        : relative;
    overflow        : hidden;
    border-top      : 3px solid var(--rose);
    transition      : box-shadow var(--transition), transform var(--transition);
}
.univers-card:hover {
    box-shadow : 0 8px 28px var(--ombre-chaude-md);
    transform  : translateY(-3px);
}
.univers-num {
    position       : absolute;
    top            : 12px;
    right          : 20px;
    font-family    : var(--font-titre);
    font-size      : 5rem;
    font-weight    : 700;
    color          : var(--marron);
    opacity        : .05;
    line-height    : 1;
    user-select    : none;
    pointer-events : none;
}
.univers-card h3 {
    font-family    : var(--font-titre);
    font-size      : 1.05rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 1.5px;
    color          : var(--marron);
    margin-bottom  : 14px;
}
.univers-card p {
    font-size   : .92rem;
    color       : var(--marron-mid);
    line-height : 1.75;
}
.univers-card--img::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : linear-gradient(135deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.3) 55%, transparent 100%);
    z-index    : 0;
}
.univers-card--img h3,
.univers-card--img p,
.univers-card--img .univers-num { position: relative; z-index: 1; }
.univers-card--img h3 { color: #fff; }
.univers-card--img p  { color: rgba(255,255,255,.88); }
.univers-card--img .univers-num { color: #fff; opacity: .12; }

/* Galerie preview — texte intro */
.galerie-intro {
    font-size    : .97rem;
    color        : var(--marron-mid);
    line-height  : 1.75;
    margin-bottom: 32px;
    max-width    : 640px;
}

/* ── Page Services — blocs ───────────────────────────────────── */
.srv-section {
    padding    : 80px 40px;
    background : var(--blanc-chaud);
    position   : relative;
    overflow   : hidden;
}
.srv-section--alt { background: var(--creme-sombre); }

.srv-section--dark {
    background : var(--marron);
}
.srv-section--dark::before {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : url('bois.webp') center / cover;
    opacity    : .12;
}
.srv-section--dark > .srv-inner { position: relative; z-index: 1; }

.srv-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
    position  : relative;
}

.srv-num-deco {
    position       : absolute;
    top            : -10px;
    right          : 0;
    font-family    : var(--font-titre);
    font-size      : 10rem;
    font-weight    : 700;
    color          : var(--marron);
    opacity        : .04;
    line-height    : 1;
    user-select    : none;
    pointer-events : none;
}
.srv-section--dark .srv-num-deco { color: var(--creme); opacity: .07; }

.srv-label {
    font-size      : .7rem;
    font-weight    : 700;
    letter-spacing : 4px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 14px;
    display        : flex;
    align-items    : center;
    gap            : 12px;
}
.srv-label::after {
    content    : '';
    display    : block;
    height     : 1px;
    width      : 40px;
    background : var(--rose);
}

.srv-h2 {
    font-family    : var(--font-titre);
    font-size      : clamp(1.7rem, 3vw, 2.6rem);
    font-weight    : 700;
    text-transform : uppercase;
    color          : var(--marron);
    line-height    : 1.1;
    margin-bottom  : 28px;
    max-width      : 640px;
}
.srv-section--dark .srv-h2 { color: var(--creme); }

.srv-intro {
    font-size    : 1rem;
    color        : var(--marron-mid);
    line-height  : 1.8;
    max-width    : 680px;
    margin-bottom: 16px;
}
.srv-intro:last-of-type { margin-bottom: 40px; }
.srv-section--dark .srv-intro { color: var(--sable); margin-bottom: 0; }

.srv-examples-label {
    font-size      : .72rem;
    font-weight    : 700;
    letter-spacing : 3px;
    text-transform : uppercase;
    color          : var(--rose);
    margin-bottom  : 10px;
    margin-top     : 8px;
}
.srv-examples {
    border-left  : 4px solid var(--rose);
    padding      : 18px 24px;
    font-size    : .97rem;
    color        : var(--marron-mid);
    line-height  : 1.8;
    font-style   : italic;
    max-width    : 680px;
    background   : var(--creme);
}
.srv-section--alt .srv-examples { background: var(--blanc-chaud); }

/* ── Responsive pages intérieures ───────────────────────────── */
@media (max-width: 1024px) {
    .apropos-texte-inner  { grid-template-columns: 1fr; gap: 32px; }
    .contact-layout       { grid-template-columns: 1fr; }
    .presentation-inner   { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
    .page-hero            { padding: 60px 24px; }
    .service-section,
    .section-page,
    .galerie-page,
    .apropos-texte,
    .valeurs-section,
    .legal-page           { padding: 60px 24px; }
    .contact-layout       { padding: 60px 24px; }
    .galerie-grid         { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .presentation-section { padding: 60px 24px; }
    .univers-section      { padding: 60px 24px; }
}
@media (max-width: 600px) {
    .univers-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   V2 — NOUVEAUX BLOCS AVEC IMAGES (mise à jour 2026)
   ============================================================ */

/* ── Hero de page avec image de fond ─────────────────────────── */
.page-hero--img::before,
.page-hero--img::after { display: none; }
.page-hero--img {
    background-size      : cover;
    background-position  : center;
    background-repeat    : no-repeat;
    color                : var(--blanc-chaud);
    padding              : 130px 40px 100px;
    position             : relative;
}
.page-hero--img .page-hero-h1,
.page-hero--img .page-hero-intro,
.page-hero--img .page-hero-eyebrow {
    color: var(--blanc-chaud);
}
.page-hero--img .page-hero-eyebrow {
    color: var(--creme);
    opacity: .95;
}
.page-hero--img .page-hero-h1 em {
    color: var(--rose);
    font-style: normal;
}
.devis-reassurance {
    margin-top       : 28px;
    display          : flex;
    flex-wrap        : wrap;
    justify-content  : center;
    gap              : 18px 28px;
    font-size        : .95rem;
    font-weight      : 500;
    color            : var(--creme);
}
.devis-reassurance span { opacity: .95; }

/* ── Bento grid avec images de fond ──────────────────────────── */
.bento-grid--images {
    grid-template-rows : 280px 280px;
}
.bento-card--img {
    background-size       : cover;
    background-position   : center;
    background-repeat     : no-repeat;
    color                 : var(--blanc-chaud);
    min-height            : unset;
    position              : relative;
    overflow              : hidden;
    transition            : transform var(--transition), box-shadow var(--transition);
    border                : none;
}
.bento-card--img:hover {
    transform : translateY(-6px);
    box-shadow: 0 12px 32px var(--ombre-chaude-md);
}
.bento-card--img .bento-title,
.bento-card--img .bento-desc,
.bento-card--img .bento-num,
.bento-card--img .bento-link {
    color : var(--blanc-chaud);
    position: relative;
    z-index: 2;
}
.bento-card--img .bento-num {
    opacity: .85;
    color: var(--creme);
}
.bento-card--img .bento-desc { opacity: .92; }

/* ── Manifeste avec image de fond ────────────────────────────── */
.manifeste--img {
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    background-attachment: fixed;
}
.manifeste--img::before,
.manifeste--img::after { display: none; }
@media (max-width: 900px) {
    .manifeste--img { background-attachment: scroll; }
}

/* ── CTA final avec image de fond ────────────────────────────── */
.cta-final--img {
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    color               : var(--blanc-chaud);
}
.cta-final--img::before,
.cta-final--img::after { display: none; }
.cta-final--img .cta-h2,
.cta-final--img .cta-sub,
.cta-final--img .cta-overline {
    color: var(--blanc-chaud);
}
.cta-final--img .cta-overline { color: var(--creme); opacity: .9; }
.cta-final--img .cta-h2 em     { color: var(--rose); font-style: normal; }

/* Variante outline crème pour fond sombre */
.btn-cta-rose--outline                { border-color: var(--creme); color: var(--creme); }
.btn-cta-rose--outline::before        { background: transparent; }
.btn-cta-rose--outline:hover          { color: var(--marron); }
.btn-cta-rose--outline:hover::before  { background: var(--creme); }

/* Ligne secondaire sous le bouton principal */
.cta-final-btns--secondary {
    margin-top : 16px;
}

/* ── Bloc 7 Accueil — INFORMATIONS ───────────────────────────── */
.infos-section {
    background : var(--creme);
    padding    : 100px 40px;
}
.infos-inner {
    max-width : 1100px;
    margin    : 0 auto;
    text-align: center;
}
.infos-subtitle {
    text-align   : center;
    color        : var(--marron-mid);
    font-size    : 1.05rem;
    font-style   : italic;
    margin       : 10px 0 40px;
}
.infos-grid {
    margin-top             : 40px;
    display                : grid;
    grid-template-columns  : repeat(auto-fit, minmax(220px, 1fr));
    gap                    : 24px;
}
.infos-item {
    background   : var(--blanc-chaud);
    padding      : 36px 24px;
    border-radius: var(--rayon-lg);
    text-align   : center;
    box-shadow   : 0 4px 18px var(--ombre-chaude);
    transition   : transform var(--transition), box-shadow var(--transition);
}
.infos-item:hover {
    transform : translateY(-4px);
    box-shadow: 0 10px 26px var(--ombre-chaude-md);
}
.infos-icon {
    display        : inline-flex;
    width          : 56px;
    height         : 56px;
    border-radius  : 50%;
    background     : var(--creme);
    color          : var(--rose);
    font-size      : 1.5rem;
    font-weight    : 700;
    align-items    : center;
    justify-content: center;
    margin-bottom  : 16px;
    font-family    : var(--font-titre);
}
.infos-label {
    color         : var(--gris-chaud);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size     : .78rem;
    font-weight   : 600;
    margin-bottom : 8px;
}
.infos-value {
    font-family : var(--font-titre);
    font-weight : 600;
    color       : var(--marron);
    font-size   : 1rem;
    line-height : 1.45;
}
.infos-value a { text-decoration: none; color: var(--marron); transition: color var(--transition); }
.infos-value a:hover { color: var(--rose); }

/* ── Services — Layout split (image + texte) ─────────────────── */
.srv-section--split { padding: 90px 0; }
.srv-split {
    max-width           : var(--max-width);
    margin              : 0 auto;
    display             : grid;
    grid-template-columns: 1fr 1fr;
    gap                 : 60px;
    align-items         : center;
    padding             : 0 40px 40px;
}
.srv-split--reverse .srv-split-img   { order: 2; }
.srv-split--reverse .srv-split-content { order: 1; }
.srv-split-img img {
    width        : 100%;
    border-radius: var(--rayon-lg);
    box-shadow   : 0 12px 32px var(--ombre-chaude-md);
    aspect-ratio : 4 / 3;
    object-fit   : cover;
}
.srv-split-content { position: relative; }
@media (max-width: 900px) {
    .srv-split { grid-template-columns: 1fr; gap: 30px; }
    .srv-split--reverse .srv-split-img { order: 0; }
    .srv-split--reverse .srv-split-content { order: 1; }
}

/* ── Service cards avec image ────────────────────────────────── */
.service-grid--img {
    display                : grid;
    grid-template-columns  : repeat(auto-fit, minmax(240px, 1fr));
    gap                    : 24px;
    margin-top             : 40px;
}
.service-card--img {
    padding        : 0;
    overflow       : hidden;
    display        : flex;
    flex-direction : column;
    background     : var(--blanc-chaud);
    border-radius  : var(--rayon-lg);
    box-shadow     : 0 4px 18px var(--ombre-chaude);
    transition     : transform var(--transition), box-shadow var(--transition);
}
.service-card--img:hover {
    transform : translateY(-4px);
    box-shadow: 0 10px 28px var(--ombre-chaude-md);
}
.service-card--img img {
    width        : 100%;
    aspect-ratio : 4 / 3;
    object-fit   : cover;
    background   : var(--creme);
}
.service-card--img .service-card-body { padding: 20px 22px 24px; }
.service-card--img h3 { margin-bottom: 6px; }

/* ── Services — Bannière pleine largeur + cards texte ────────── */
.srv-section--banner {
    padding    : 0;
    background : transparent;
    overflow   : visible;
    max-width  : 85%;
    margin     : 48px auto;
    border-radius: 16px;
    box-shadow : none;
}
.srv-section--banner .srv-banner {
    border-radius: 16px 16px 0 0;
    overflow     : hidden;
}
.srv-section--banner .srv-banner:last-child {
    border-radius: 16px;
}
.srv-section--banner .srv-cards-wrap {
    border-radius: 0 0 16px 16px;
    overflow     : hidden;
}
.srv-banner {
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    padding             : 90px 40px 130px;
    position            : relative;
}
.srv-banner-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
    position  : relative;
}
.srv-num-deco--banner {
    top      : -20px;
    right    : 0;
    font-size: clamp(8rem, 15vw, 14rem);
    color    : var(--creme);
    opacity  : .3;
}
.srv-examples--banner {
    max-width  : 640px;
    box-shadow : 0 8px 24px rgba(0, 0, 0, .25);
}
.srv-label--banner {
    color : var(--rose);
}
.srv-label--banner::after {
    background : var(--rose);
}
.srv-h2--banner {
    color     : var(--blanc-chaud);
    max-width : 720px;
}
.srv-intro--banner {
    color     : var(--creme);
    opacity   : .95;
    max-width : 640px;
}
.srv-intro--banner:last-of-type { margin-bottom: 0; }

.srv-banner-link {
    display         : inline-block;
    margin-top      : 28px;
    color           : var(--rose);
    text-decoration : none;
    font-size       : .8rem;
    font-weight     : 700;
    letter-spacing  : 1.5px;
    text-transform  : uppercase;
    transition      : color var(--transition), gap var(--transition);
}
.srv-banner-link:hover { color: var(--creme); }

.srv-cards-wrap {
    max-width : var(--max-width);
    margin    : -70px auto 90px;
    padding   : 0 40px;
    position  : relative;
}
.srv-cards-wrap::before {
    content        : '';
    position       : absolute;
    inset          : -10px 10px auto 10px;
    height         : 70%;
    background     : radial-gradient(ellipse at center top, rgba(233, 78, 119, .22) 0%, transparent 70%);
    filter         : blur(24px);
    pointer-events : none;
    z-index        : 0;
}
.srv-cards-grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 24px;
    position              : relative;
    z-index               : 1;
}
.srv-cards-grid::before {
    content    : '';
    position   : absolute;
    top        : 28px;
    left       : 6%;
    right      : 6%;
    border-top : 2px dashed var(--rose);
    opacity    : .5;
    z-index    : 0;
}
.srv-text-card {
    background    : var(--creme);
    padding       : 32px 26px 28px;
    border-radius : var(--rayon-lg);
    box-shadow    : 0 10px 28px var(--ombre-chaude);
    position      : relative;
    z-index       : 1;
    transition    : transform var(--transition), box-shadow var(--transition);
}
.srv-text-card:hover {
    transform : translateY(-4px);
    box-shadow: 0 14px 32px var(--ombre-chaude-md);
}
.srv-text-card--img {
    background-size     : cover;
    background-position : center;
    background-repeat   : no-repeat;
    min-height          : 200px;
    overflow            : hidden;
    text-decoration     : none;
    color               : inherit;
    display             : block;
}
.srv-text-card--img::before { display: none; }
.srv-text-card::before {
    content       : '';
    position      : absolute;
    top           : 22px;
    left          : 22px;
    width         : 12px;
    height        : 12px;
    background    : var(--rose);
    border-radius : 50%;
    box-shadow    : 0 0 0 4px rgba(233, 78, 119, .18);
}
.srv-text-card h3 {
    font-family    : var(--font-titre);
    font-size      : 1.05rem;
    font-weight    : 700;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : var(--marron);
    line-height    : 1.3;
    margin         : 26px 0 14px;
}
.srv-text-card p {
    font-size   : .92rem;
    color       : var(--marron-mid);
    line-height : 1.7;
    margin      : 0;
}

@media (max-width: 1024px) {
    .srv-cards-grid           { grid-template-columns: repeat(2, 1fr); }
    .srv-cards-grid::before   { display: none; }
}
@media (max-width: 900px) {
    .srv-banner          { padding: 70px 24px 110px; }
    .srv-cards-wrap      { padding: 0 24px; margin-top: -60px; }
}
@media (max-width: 600px) {
    .srv-cards-grid      { grid-template-columns: 1fr; }
    .srv-section--banner { padding-bottom: 70px; }
}

/* ── Chartreuse — Bloc collection image pleine largeur ───────── */
.cs-collection {
    padding    : 90px 40px;
    background : var(--blanc-chaud);
}
.cs-collection-inner {
    max-width : 1200px;
    margin    : 0 auto;
}
.cs-collection-img {
    margin-top   : 40px;
    border-radius: var(--rayon-lg);
    overflow     : hidden;
    box-shadow   : 0 14px 36px var(--ombre-chaude-md);
}
.cs-collection-img img {
    width : 100%;
    display: block;
}

/* ── Galerie — grille avec images ────────────────────────────── */
.galerie-grid--img .galerie-item {
    aspect-ratio  : 1 / 1;
    overflow      : hidden;
    position      : relative;
    border-radius : var(--rayon-lg);
    cursor        : pointer;
    background    : var(--creme-sombre);
    display       : block;
}
.galerie-grid--img .galerie-item img {
    width       : 100%;
    height      : 100%;
    object-fit  : cover;
    transition  : transform .5s ease;
}
.galerie-grid--img .galerie-item:hover img { transform: scale(1.06); }
.galerie-grid--img .galerie-legend {
    position    : absolute;
    left        : 10px;
    bottom      : 10px;
    background  : rgba(44, 24, 16, .75);
    color       : var(--blanc-chaud);
    padding     : 4px 10px;
    border-radius: var(--rayon);
    font-size   : .75rem;
    font-weight : 500;
    letter-spacing: .04em;
}

/* ── Galerie asymétrique — avec vraies images (accueil) ──────── */
.galerie-asym .g-item {
    overflow      : hidden;
    border-radius : var(--rayon-lg);
    background    : var(--creme-sombre);
    position      : relative;
    display       : block;
    text-decoration: none;
    color         : inherit;
}
.galerie-asym .g-item img {
    width       : 100%;
    height      : 100%;
    object-fit  : cover;
    transition  : transform .5s ease;
}
.galerie-asym .g-item:hover img { transform: scale(1.05); }
.g-item-legend {
    position     : absolute;
    left         : 12px;
    bottom       : 12px;
    background   : rgba(44, 24, 16, .78);
    color        : var(--blanc-chaud);
    padding      : 5px 12px;
    border-radius: var(--rayon);
    font-size    : .8rem;
    font-weight  : 500;
    letter-spacing: .04em;
}

/* ── Contact — Section boutique photos ───────────────────────── */
.boutique-section {
    padding    : 90px 40px;
    background : var(--blanc-chaud);
}
.boutique-inner {
    max-width : var(--max-width);
    margin    : 0 auto;
}
.boutique-inner .section-h2 { margin-top: 0; }
.boutique-grid {
    margin-top             : 40px;
    display                : grid;
    grid-template-columns  : 1fr 1fr;
    gap                    : 28px;
}
.boutique-photo {
    margin : 0;
    border-radius: var(--rayon-lg);
    overflow     : hidden;
    box-shadow   : 0 8px 26px var(--ombre-chaude);
    background   : var(--creme);
}
.boutique-photo img {
    width       : 100%;
    aspect-ratio: 4 / 3;
    object-fit  : cover;
}
.boutique-photo figcaption {
    padding    : 14px 18px;
    font-size  : .9rem;
    color      : var(--marron-mid);
    background : var(--creme);
    text-align : center;
    font-style : italic;
}
@media (max-width: 800px) {
    .boutique-grid { grid-template-columns: 1fr; }
}

/* ── Contact — section 2 colonnes (layout avec map + atouts) ─── */
.contact-section {
    background : var(--creme);
    padding    : 90px 40px;
}
.contact-section .contact-layout {
    max-width              : var(--max-width);
    margin                 : 0 auto;
    display                : grid;
    grid-template-columns  : 0.9fr 1.1fr;
    gap                    : 48px;
    padding                : 0;
}
.contact-card {
    background   : var(--blanc-chaud);
    padding      : 26px 28px;
    border-radius: var(--rayon-lg);
    box-shadow   : 0 4px 18px var(--ombre-chaude);
    margin-bottom: 24px;
}
.contact-card h3 {
    font-family : var(--font-titre);
    font-size   : 1.45rem;
    margin-bottom: 14px;
    color       : var(--marron);
}
.contact-card address {
    font-style : normal;
    line-height: 1.9;
    color      : var(--marron-mid);
}
.contact-card a { color: var(--marron); text-decoration: none; }
.contact-card a:hover { color: var(--rose); }

.contact-map {
    border-radius : var(--rayon-lg);
    overflow      : hidden;
    background    : var(--blanc-chaud);
    box-shadow    : 0 4px 18px var(--ombre-chaude);
    margin-bottom : 24px;
}
.contact-map iframe { display: block; width: 100%; }
.contact-map-btn {
    display        : block;
    text-align     : center;
    margin         : 14px 14px 16px;
    text-decoration: none;
}

.contact-atouts {
    background   : var(--blanc-chaud);
    padding      : 22px 26px;
    border-radius: var(--rayon-lg);
    box-shadow   : 0 4px 18px var(--ombre-chaude);
    list-style   : none;
}
.contact-atouts li {
    display      : flex;
    align-items  : center;
    gap          : 14px;
    padding      : 10px 0;
    font-size    : .97rem;
    color        : var(--marron);
    border-bottom: 1px solid var(--creme-sombre);
    font-weight  : 500;
}
.contact-atouts li:last-child { border-bottom: none; }
.contact-atouts li span {
    display       : inline-flex;
    width         : 34px;
    height        : 34px;
    background    : var(--creme);
    border-radius : 50%;
    align-items   : center;
    justify-content: center;
    font-size     : 1.05rem;
    flex-shrink   : 0;
}
.contact-form-intro {
    color        : var(--marron-mid);
    margin-bottom: 24px;
    line-height  : 1.65;
}
.form-hint {
    display    : block;
    margin-top : 6px;
    font-size  : .82rem;
    color      : var(--gris-chaud);
    font-style : italic;
}
input[type="file"] {
    width       : 100%;
    padding     : 10px;
    border      : 1.5px dashed var(--creme-sombre);
    border-radius: var(--rayon);
    background  : var(--blanc-chaud);
    font-family : var(--font-corps);
    font-size   : .9rem;
    cursor      : pointer;
}
input[type="file"]:hover { border-color: var(--rose); }

@media (max-width: 900px) {
    .contact-section .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq-section {
    background : var(--blanc-chaud);
    padding    : 100px 40px;
}
.faq-inner {
    max-width : 900px;
    margin    : 0 auto;
}
.faq-list {
    margin-top : 40px;
    display    : flex;
    flex-direction: column;
    gap        : 14px;
}
.faq-item {
    background   : var(--creme);
    border-radius: var(--rayon-lg);
    padding      : 0 24px;
    box-shadow   : 0 3px 14px var(--ombre-chaude);
    transition   : box-shadow var(--transition);
}
.faq-item[open] {
    box-shadow: 0 10px 26px var(--ombre-chaude-md);
    background: var(--creme-sombre);
}
.faq-item summary {
    cursor       : pointer;
    padding      : 20px 0;
    font-family  : var(--font-titre);
    font-size    : 1.08rem;
    font-weight  : 600;
    color        : var(--marron);
    list-style   : none;
    display      : flex;
    align-items  : center;
    justify-content: space-between;
    gap          : 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content     : "+";
    font-size   : 1.6rem;
    color       : var(--rose);
    font-weight : 400;
    transition  : transform var(--transition);
    line-height : 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p {
    padding   : 0 0 20px;
    color     : var(--marron-mid);
    line-height: 1.75;
}

/* ── Urgence — bas de page devis ─────────────────────────────── */
.urgence-section {
    background : var(--marron);
    padding    : 48px 40px;
    text-align : center;
    color      : var(--creme);
}
.urgence-eyebrow {
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size     : .82rem;
    color         : var(--rose);
    font-weight   : 700;
    margin-bottom : 10px;
}
.urgence-text {
    font-family : var(--font-titre);
    font-size   : clamp(1.3rem, 3vw, 1.8rem);
    font-weight : 500;
    color       : var(--blanc-chaud);
}
.urgence-tel {
    color          : var(--rose);
    text-decoration: none;
    font-weight    : 700;
    margin-left    : 12px;
    transition     : color var(--transition);
    white-space    : nowrap;
}
.urgence-tel:hover { color: var(--blanc-chaud); }

/* ── Accessibilité — classe visually-hidden ──────────────────── */
.visually-hidden {
    position: absolute !important;
    width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important;
    overflow: hidden !important; clip: rect(0,0,0,0) !important;
    white-space: nowrap !important; border: 0 !important;
}