/* ============================================================
   XYLEN PROD — STYLE RÉTRO ARTISANAL
   ============================================================
   TABLE DES MATIÈRES
   ─────────────────────────────────────────────────────────────
   00. VARIABLES & RESET
   01. TYPOGRAPHIE & LIENS
   02. BARRE ÉCOSYSTÈME
   03. HEADER & NAVIGATION
   04. DROPDOWN
   05. MENU MOBILE (HAMBURGER)
   06. BOUTONS
   07. HERO — BASE & VARIANTES
   08. BANDE TRUSTPILOT
   09. SECTION SERVICES
   10. SECTION POURQUOI NOUS
   11. SECTION ARTISAN LOCAL
   12. SECTION PROCESSUS
   13. TÉMOIGNAGES
   14. FORMAT CARDS (commun à toutes les pages)
   15. TABLEAU DES FORMATS
   16. MÉTHODE (étapes numérotées)
   17. CONSEIL PATRICK
   18. INFO BLOCKS
   19. SERVICE PLUS
   20. COMPARAISON DIGITAL ICE (slider interactif)
   21. CTA FINAL
   22. UTILITAIRES (.container, .lead, .section-header…)
   23. KEYFRAMES
   24. RESPONSIVE (768px → 480px)
   ============================================================ */


/* ============================================================
   00. VARIABLES & RESET
   ============================================================ */

:root {
    --noir        : #1A1A1A;
    --ivoire      : #FDF9E7;
    --beige       : #E2D5B5;
    --orange      : #E85D04;
    --orange-hover: #d15403;
}

*  { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family : 'Roboto', sans-serif;
    background  : var(--ivoire);
    color       : var(--noir);
    line-height : 1.6;
}

h1, h2, h3 { font-family: 'Playfair Display', serif; font-weight: 700; }
a          { text-decoration: none; color: inherit; }
img        { max-width: 100%; height: auto; display: block; }
main       { min-height: 60vh; }


/* ============================================================
   01. TYPOGRAPHIE & LIENS COURANTS
   ============================================================ */

.lead {
    font-size  : 1.2rem;
    line-height: 1.8;
    color      : #333;
    font-weight: 400;
}


/* ============================================================
   02. BANNIÈRE D'ANNONCE (admin)
   ============================================================ */

/* ============================================================
   03. BARRE ÉCOSYSTÈME + BANNIÈRE INTÉGRÉE
   ============================================================ */

.ecosystem-bar {
    background   : var(--noir);
    color        : var(--ivoire);
    display      : flex;
    align-items  : stretch;
    min-height   : 40px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* Portion gauche — bannière colorée (conditionnelle) */
/* Le fond part du bord écran, le texte s'aligne sur le logo */
.eco-banniere {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 14px;
    padding-left   : max(20px, calc((100vw - 1200px) / 2 + 20px));
    padding-right  : 32px;
    font-size      : 0.85rem;
    font-weight    : 500;
    flex           : 1;
    min-width      : 0;
    clip-path      : polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.eco-banniere-msg {
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}

.eco-banniere-lien {
    font-weight    : 700;
    text-decoration: underline;
    white-space    : nowrap;
    flex-shrink    : 0;
    opacity        : 0.9;
}

.eco-banniere-lien:hover { opacity: 1; }

/* Portion droite — liens écosystème */
.ecosystem-container {
    display    : flex;
    align-items: center;
    gap        : 15px;
    padding    : 0 20px;
    margin-left: auto;
    flex-shrink: 0;
}

.ecosystem-label {
    font-size  : 0.85rem;
    font-weight: 500;
    opacity    : 0.8;
}

.ecosystem-nav { display: flex; gap: 25px; }

.eco-link {
    text-decoration: none;
    font-size      : 0.85rem;
    color          : #999;
    transition     : all 0.3s ease;
    display        : flex;
    align-items    : center;
    gap            : 6px;
}

.eco-link:hover  { color: var(--ivoire); }
.eco-link.active { color: var(--orange); font-weight: 600; }


/* ============================================================
   03. HEADER & NAVIGATION
   ============================================================ */

header {
    background   : #E8DCC0;
    padding      : 15px 0;
    border-bottom: 3px solid var(--orange);
    box-shadow   : 0 2px 10px rgba(0,0,0,0.1);
    position     : sticky;
    top          : 0;
    z-index      : 1000;
}

.nav-container {
    max-width      : 1200px;
    margin         : 0 auto;
    padding        : 0 20px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.logo     { display: flex; align-items: center; gap: 12px; }
.logo-img { height: 50px; width: auto; }

.logo-text {
    font-family    : 'Playfair Display', serif;
    font-weight    : 700;
    font-size      : 1.3rem;
    color          : var(--noir);
    line-height    : 1.2;
    letter-spacing : 1px;
}

.logo-text span {
    display        : block;
    font-size      : 0.75rem;
    font-family    : 'Roboto', sans-serif;
    font-weight    : 400;
    color          : var(--orange);
    letter-spacing : 2.5px;
    text-transform : uppercase;
}

.nav-links {
    display    : flex;
    align-items: center;
    gap        : 30px;
    list-style : none;
    margin     : 0;
    padding    : 0;
}

.nav-link {
    color          : var(--noir);
    text-decoration: none;
    font-weight    : 600;
    transition     : 0.3s;
    padding        : 10px 15px;
    border-radius  : 5px;
    background     : transparent;
    border         : none;
    cursor         : pointer;
    font-size      : 1rem;
    font-family    : 'Roboto', sans-serif;
}

.nav-link:hover {
    color     : var(--orange);
    background: rgba(232,93,4,0.1);
}


/* ============================================================
   04. DROPDOWN
   ============================================================ */

.dropdown          { position: relative; }
.dropdown-toggle   { display: flex; align-items: center; gap: 5px; }
.dropdown-arrow    { font-size: 0.7rem; transition: transform 0.3s; }

.dropdown.active .dropdown-arrow { transform: rotate(180deg); }

.dropdown-menu {
    position  : absolute;
    top       : calc(100% + 10px);
    left      : 0;
    background: #fff;
    min-width : 250px;
    border    : 2px solid var(--noir);
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    list-style: none;
    padding   : 0;
    margin    : 0;
    opacity   : 0;
    visibility: hidden;
    transform : translateY(-10px);
    transition: all 0.3s ease;
    z-index   : 100;
}

.dropdown.active .dropdown-menu {
    opacity   : 1;
    visibility: visible;
    transform : translateY(0);
}

.dropdown-menu li  { margin: 0; }

.dropdown-menu a {
    display      : block;
    padding      : 15px 20px;
    color        : var(--noir);
    transition   : 0.3s;
    border-bottom: 1px solid #eee;
}

.dropdown-menu a:hover {
    background  : var(--orange);
    color       : #fff;
    padding-left: 30px;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
    border-radius: 0 0 6px 6px;
}


/* ============================================================
   05. MENU MOBILE (HAMBURGER)
   ============================================================ */

.menu-toggle {
    display      : none;
    background   : var(--orange);
    border       : none;
    width        : 50px;
    height       : 50px;
    cursor       : pointer;
    border-radius: 5px;
    transition   : 0.3s;
    padding      : 0;
    font-size    : 1.5rem;
    color        : #fff;
    z-index      : 1001;
    position     : relative;
}

.menu-toggle:hover { background: #d14e00; }


/* ============================================================
   06. BOUTONS
   ============================================================ */

.btn-pro {
    background    : var(--orange);
    color         : var(--noir);
    padding       : 12px 25px;
    border-radius : 5px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition    : 0.3s;
    display       : inline-block;
}

.btn-pro:hover {
    background: #d14e00;
    transform : translateY(-2px);
    box-shadow: 0 5px 15px rgba(232,93,4,0.3);
}

.btn-ivoire {
    background   : transparent;
    color        : var(--ivoire);
    border       : 2px solid rgba(253,249,231,0.6);
    padding      : 18px 45px;
    border-radius: 4px;
    font-weight  : 600;
    transition   : all 0.3s;
    font-size    : 1.2rem;
    backdrop-filter: blur(6px);
    text-shadow  : 1px 1px 3px rgba(0,0,0,0.5);
}

.btn-ivoire:hover {
    background : var(--ivoire);
    color      : var(--noir);
    border-color: var(--ivoire);
    transform  : translateY(-2px);
    box-shadow : 0 8px 25px rgba(253,249,231,0.5), 0 2px 10px rgba(0,0,0,0.4);
    text-shadow: none;
}


/* ============================================================
   07. HERO — BASE & VARIANTES
   ============================================================ */

/* Styles partagés par toutes les sections hero */
.hero,
.hero-video,
.hero-film,
.hero-photos,
.hero-audio,
.hero-contact,
.hero-atelier {
    padding        : 70px 20px;
    text-align     : center;
    color          : var(--ivoire);
    position       : relative;
    border-top     : 3px solid #6B5D4F;
    border-bottom  : 8px solid var(--orange);
    box-shadow     : inset 0 2px 4px rgba(0,0,0,0.4), 0 8px 20px rgba(0,0,0,0.3);
    min-height     : 420px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    background-attachment: fixed;
    background-position  : center center;
}

/* Overlay commun */
.hero::before,
.hero-video::before,
.hero-film::before,
.hero-photos::before,
.hero-contact::before,
.hero-atelier::before {
    content : '';
    position: absolute;
    inset   : 0;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="noise"><feTurbulence baseFrequency="0.9" numOctaves="4"/></filter><rect width="100%" height="100%" filter="url(%23noise)" opacity="0.08"/></svg>');
    opacity        : 0.4;
    pointer-events : none;
    mix-blend-mode : overlay;
}

/* Vignette radiale (index uniquement) */
.hero::after {
    content : '';
    position: absolute;
    inset   : 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
}

/* Fonds spécifiques */
.hero {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-bg.webp');
    background-size: cover;
}

.hero-video {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-video.webp');
    background-size: cover;
}

.hero-film {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-film.webp');
    background-size: cover;
}

.hero-photos {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-photos.webp');
    background-size: cover;
}

.hero-audio {
    background-image: linear-gradient(rgba(26,26,26,0.6), rgba(26,26,26,0.7)),
                      url('../images/hero-audio.webp');
    background-size: cover;
}

.hero-contact {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-contact.webp');
    background-size: cover;
}

.hero-atelier {
    background-image: linear-gradient(135deg, rgba(44,36,22,0.92) 0%, rgba(61,52,39,0.88) 40%, rgba(74,64,51,0.90) 100%),
                      url('../images/hero-atelier.webp');
    background-size: cover;
    min-height: 420px;
}

/* Contenu hero */
.hero-content {
    max-width : 950px;
    margin    : 0 auto;
    position  : relative;
    z-index   : 1;
    padding   : 20px;
    animation : fadeInUp 1s ease-out;
}

.hero-video .hero-content,
.hero-film  .hero-content,
.hero-photos .hero-content {
    max-width: 900px;
}

/* Titres hero */
.hero h1 {
    font-size     : 4rem;
    line-height   : 1.15;
    margin-bottom : 30px;
    color         : var(--ivoire);
    letter-spacing: -1.5px;
    font-weight   : 700;
    animation     : fadeInUp 1s ease-out 0.2s both;
}

.hero-video h1,
.hero-film  h1,
.hero-photos h1 {
    font-size     : 3.5rem;
    letter-spacing: -1px;
    font-weight   : 900;
    margin-bottom : 20px;
}

/* Highlight orange dans les titres */
.highlight {
    color   : var(--orange);
    position: relative;
    display : inline-block;
}

.hero h1 .highlight::after {
    content   : '';
    position  : absolute;
    bottom    : -5px;
    left      : 0; right: 0;
    height    : 3px;
    background: var(--orange);
    box-shadow: 0 0 10px var(--orange);
}

/* Sous-titres hero */
.hero-subtitle {
    font-size  : 1.35rem;
    line-height: 1.7;
    margin     : 0 auto 40px;
    color      : #ddd;
    max-width  : 720px;
    animation  : fadeInUp 1s ease-out 0.4s both;
}

.hero-video .hero-subtitle,
.hero-film  .hero-subtitle,
.hero-photos .hero-subtitle {
    font-size    : 1.3rem;
    margin-top   : 15px;
    margin-bottom: 0;
}

.hero-subtitle strong {
    color      : var(--orange);
    font-weight: 700;
}

.subtitle-icon {
    display       : inline-block;
    font-size     : 1.8rem;
    margin-right  : 10px;
    vertical-align: middle;
    animation     : bounce 2s ease-in-out infinite;
}

/* Boutons hero */
.hero-buttons {
    display        : flex;
    gap            : 15px;
    justify-content: center;
    flex-wrap      : wrap;
    animation      : fadeInUp 1s ease-out 0.6s both;
}

.hero .btn-pro {
    padding    : 18px 45px;
    font-size  : 1.2rem;
    box-shadow : 0 6px 20px rgba(232,93,4,0.6), 0 2px 8px rgba(0,0,0,0.4);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
    position   : relative;
    overflow   : hidden;
    transition : all 0.3s ease;
}

.hero .btn-pro::before {
    content   : '';
    position  : absolute;
    top       : -50%; left: -50%;
    width     : 200%; height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    transform : rotate(45deg);
    transition: 0.5s;
}

.hero .btn-pro:hover::before { left: 100%; }
.hero .btn-pro:hover {
    box-shadow: 0 8px 30px rgba(232,93,4,0.8), 0 4px 15px rgba(0,0,0,0.5);
    transform : translateY(-2px);
}


/* ============================================================
   08. BANDE TRUSTPILOT
   ============================================================ */

.trustpilot-bar {
    background     : var(--noir);
    color          : #fff;
    padding        : 15px 20px;
    text-align     : center;
    display        : flex;
    align-items    : center;
    justify-content: center;
    flex-wrap      : wrap;
    gap            : 15px;
}

.trustpilot-label { font-weight: bold; font-size: 1rem; }

.trustpilot-link {
    display    : inline-flex;
    align-items: center;
    gap        : 10px;
    color      : #fff;
    transition : 0.3s;
}

.trustpilot-link:hover { color: var(--orange); }
.tp-stars { color: #00b67a; font-size: 1.3rem; letter-spacing: 2px; }
.tp-note  { font-weight: 700; font-size: 0.95rem; }
.tp-sep   { color: #666; }
.tp-count { font-size: 0.9rem; opacity: 0.85; }


/* ============================================================
   09. SECTION SERVICES (index.php)
   ============================================================ */

.services-section {
    padding   : 80px 20px;
    background: var(--ivoire);
}

.services-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 25px;
    max-width            : 1300px;
    margin               : 0 auto;
}

.service-card {
    background   : #fff;
    border       : 2px solid var(--noir);
    border-radius: 8px;
    padding      : 40px 30px;
    text-align   : center;
    transition   : all 0.3s ease;
    position     : relative;
    overflow     : hidden;
}

.service-card::before {
    content   : '';
    position  : absolute;
    top       : 0; left: -100%;
    width     : 100%; height: 4px;
    background: var(--orange);
    transition: 0.5s;
}

.service-card:hover::before  { left: 0; }
.service-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.15); }

.service-icon    { font-size: 3.5rem; margin-bottom: 20px; display: block; }

.service-card h3 {
    font-size    : 1.8rem;
    margin-bottom: 10px;
    color        : var(--noir);
}

.service-desc   { color: var(--orange); font-weight: 600; margin-bottom: 15px; font-size: 1rem; }
.service-detail { color: #666; line-height: 1.6; margin-bottom: 20px; font-size: 0.95rem; }

.service-link {
    color         : var(--noir);
    font-weight   : 600;
    border-bottom : 2px solid var(--orange);
    padding-bottom: 3px;
    transition    : 0.3s;
}

.service-link:hover { color: var(--orange); }


/* ============================================================
   10. SECTION POURQUOI NOUS
   ============================================================ */

.why-section {
    padding   : 80px 20px;
    background: linear-gradient(135deg, #2C2416 0%, #4A4033 100%);
    color     : var(--ivoire);
}

.why-section .section-header h2 { color: var(--ivoire); }

.why-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap                  : 40px;
    max-width            : 1200px;
    margin               : 0 auto;
}

.why-item {
    text-align   : center;
    padding      : 30px 20px;
    background   : rgba(255,255,255,0.05);
    border-radius: 8px;
    border       : 1px solid rgba(232,93,4,0.3);
    transition   : 0.3s;
}

.why-item:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }

.why-icon    { font-size: 3rem; margin-bottom: 15px; }

.why-item h4 {
    font-size    : 1.4rem;
    margin-bottom: 10px;
    color        : var(--orange);
}

.why-item p  { color: #E2D5B5; line-height: 1.6; }


/* ============================================================
   11. SECTION ARTISAN LOCAL
   ============================================================ */

.local-section {
    padding      : 80px 20px;
    background   : var(--beige);
    border-top   : 3px solid var(--noir);
    border-bottom: 3px solid var(--noir);
}

.local-wrapper {
    max-width            : 1400px;
    margin               : 0 auto;
    display              : grid;
    grid-template-columns: 1fr 1fr;
    align-items          : center;
}

.local-image {
    height    : 100%;
    min-height: 500px;
    border-right: 3px solid var(--noir);
}

.local-image img { width: 100%; height: 100%; object-fit: cover; }

.local-content { padding: 60px; }

.local-content h2 {
    font-size    : 2.5rem;
    margin-bottom: 25px;
    color        : var(--noir);
}

.local-address {
    display      : flex;
    align-items  : start;
    gap          : 15px;
    background   : var(--ivoire);
    padding      : 20px;
    border-radius: 8px;
    border-left  : 4px solid var(--orange);
    margin-bottom: 25px;
}

.address-icon             { font-size: 1.8rem; }
.local-address strong     { color: var(--noir); font-size: 1.1rem; }
.local-content p          { margin-bottom: 20px; line-height: 1.7; color: #333; }

.local-buttons { display: flex; gap: 15px; flex-wrap: wrap; margin-top: 30px; }


/* ============================================================
   12. SECTION PROCESSUS
   ============================================================ */

.process-section  { padding: 80px 20px; background: var(--ivoire); }

.process-timeline {
    max-width            : 1000px;
    margin               : 0 auto;
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap                  : 30px;
}

.process-step { text-align: center; position: relative; }

.step-number {
    width        : 70px;
    height       : 70px;
    background   : var(--orange);
    color        : #fff;
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 2rem;
    font-weight  : bold;
    margin       : 0 auto 20px;
    border       : 4px solid var(--noir);
    box-shadow   : 0 4px 15px rgba(232,93,4,0.4);
}

.step-content h4 { font-size: 1.3rem; margin-bottom: 10px; color: var(--noir); }
.step-content p  { color: #666; line-height: 1.6; }


/* ============================================================
   13. TÉMOIGNAGES
   ============================================================ */

.testimonials-section {
    padding   : 80px 20px;
    background: linear-gradient(135deg, #2C2416 0%, #3D3427 100%);
    color     : var(--ivoire);
}

.testimonials-section .section-header h2 { color: var(--ivoire); }

.testimonials-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap                  : 30px;
    max-width            : 1200px;
    margin               : 0 auto 40px;
}

.testimonial-card {
    background   : rgba(255,255,255,0.05);
    padding      : 30px;
    border-radius: 8px;
    border       : 1px solid rgba(232,93,4,0.3);
    transition   : 0.3s;
}

.testimonial-card:hover { background: rgba(255,255,255,0.1); transform: translateY(-5px); }

.testimonial-stars  { color: var(--orange); font-size: 1.5rem; margin-bottom: 15px; }
.testimonial-text   { font-style: italic; line-height: 1.7; margin-bottom: 15px; color: #E2D5B5; }
.testimonial-author { color: var(--orange); font-weight: 600; }


/* ============================================================
   14. FORMAT CARDS (commun à toutes les pages)
   ============================================================ */

/* Grille flex centrée : 4 cartes par ligne */
.formats-grid,
.formats-grid--4 {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 25px;
    justify-content: center;
    max-width      : 1100px;
    margin         : 0 auto;
}

/* Carte de base */
.format-card {
    flex         : 0 0 calc(25% - 25px);
    min-width    : 200px;
    max-width    : 240px;
    background   : #fff;
    border       : 3px solid var(--noir);
    border-radius: 8px;
    padding      : 30px 20px;
    text-align   : center;
    transition   : all 0.3s ease;
    box-shadow   : 4px 4px 0 rgba(0,0,0,0.1);
    display      : flex;
    flex-direction: column;
    align-items  : center;
    min-height   : 200px;
    position     : relative;
    overflow     : hidden;
}

/* Barre orange en hover */
.format-card::before {
    content   : '';
    position  : absolute;
    top       : 0; left: 0;
    width     : 100%; height: 6px;
    background: linear-gradient(90deg, var(--orange), #ff6b35);
    transform : scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.format-card:hover::before { transform: scaleX(1); }

.format-card:hover {
    transform : translate(-2px, -2px) translateY(-10px) scale(1.03);
    box-shadow: 8px 8px 0 rgba(232,93,4,0.3);
    border-color: var(--orange);
}

/* Miniature / icône photo */
.format-icon-svg {
    width        : 100%;
    aspect-ratio : 4/3;
    overflow     : hidden;
    border-radius: 6px;
    margin-bottom: 15px;
    background   : #2C2C2C;
    display      : flex;
    align-items  : center;
    justify-content: center;
    border       : 2px solid var(--beige);
    flex-shrink  : 0;
}

.format-photo {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    display   : block;
    transition: transform 0.4s ease;
}

.format-card:hover .format-photo { transform: scale(1.05); }

/* Textes dans les cartes */
.format-card h3 { font-size: 1.4rem; margin-bottom: 8px; color: var(--noir); }
.format-type    { color: var(--orange); font-weight: 600; font-size: 0.95rem; margin-bottom: 15px; }
.format-desc    { color: #666; font-size: 0.95rem; line-height: 1.5; }

/* Animation icônes emoji (pages audio) */
.format-icon {
    font-size    : 4rem;
    margin-bottom: 20px;
    display      : block;
    animation    : float 3s ease-in-out infinite;
}

.format-card:nth-child(1) .format-icon { animation-delay: 0s;   }
.format-card:nth-child(2) .format-icon { animation-delay: 0.2s; }
.format-card:nth-child(3) .format-icon { animation-delay: 0.4s; }
.format-card:nth-child(4) .format-icon { animation-delay: 0.6s; }

/* Badges tableau */
.table-badge {
    display      : inline-block;
    background   : var(--orange);
    color        : white;
    padding      : 4px 12px;
    border-radius: 20px;
    font-size    : 0.8rem;
    font-weight  : 600;
    margin-top   : 5px;
}

.badge-warning { background: #f39c12; }


/* ============================================================
   15. TABLEAU DES FORMATS
   ============================================================ */

.formats-section,
.formats-fichier-section { padding: 80px 20px; background: var(--ivoire); }

.table-wrapper,
.formats-table-wrapper { max-width: 1000px; margin: 0 auto; overflow-x: auto; }

.formats-table {
    width           : 100%;
    border-collapse : separate;
    border-spacing  : 0;
    background      : #fff;
    border          : 3px solid var(--noir);
    border-radius   : 8px;
    overflow        : hidden;
    box-shadow      : 6px 6px 0 rgba(0,0,0,0.1);
}

.formats-table thead tr,
.formats-table thead     { background: var(--noir); color: var(--ivoire); }

.formats-table th {
    padding    : 18px 25px;
    text-align : left;
    font-weight: 700;
    font-size  : 1.1rem;
}

.formats-table td {
    padding      : 20px 25px;
    border-bottom: 2px solid #eee;
    color        : #333;
    vertical-align: top;
}

.formats-table td:first-child { background: #fafafa; font-weight: 500; width: 30%; }

.formats-table tbody tr:last-child td { border-bottom: none; }
.formats-table tbody tr:hover          { background: rgba(232,93,4,0.05); }


/* ============================================================
   16. MÉTHODE (étapes numérotées)
   ============================================================ */

.methode-section { padding: 80px 20px; background: var(--ivoire); }

/* Grille 2 colonnes */
.methode-grid {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : 40px;
    max-width            : 1200px;
    margin               : 0 auto;
}

/* Grille 3 colonnes (audio) */
.methode-grid-3 {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 30px;
    margin-top           : 50px;
    max-width            : 1200px;
    margin-left          : auto;
    margin-right         : auto;
}

.methode-card {
    background   : #fff;
    border       : 3px solid var(--noir);
    border-radius: 12px;
    padding      : 40px 35px;
    position     : relative;
    box-shadow   : 6px 6px 0 rgba(0,0,0,0.1);
    transition   : 0.3s;
    min-height   : 220px;
    display      : flex;
    flex-direction: column;
}

.methode-card:hover {
    transform : translate(-3px, -3px) translateY(-8px);
    box-shadow: 10px 10px 0 rgba(232,93,4,0.2);
    border-color: var(--orange);
}

.methode-number {
    position     : absolute;
    top          : -25px;
    left         : 35px;
    width        : 55px;
    height       : 55px;
    background   : var(--orange);
    color        : #fff;
    border       : 3px solid var(--ivoire);
    border-radius: 50%;
    display      : flex;
    align-items  : center;
    justify-content: center;
    font-size    : 1.8rem;
    font-weight  : bold;
    font-family  : 'Playfair Display', serif;
    box-shadow   : 3px 3px 0 rgba(0,0,0,0.2), 0 4px 15px rgba(232,93,4,0.4);
}

.methode-card h3,
.methode-card h4 {
    font-size    : 1.5rem;
    margin-bottom: 15px;
    margin-top   : 10px;
    color        : var(--noir);
}

.methode-card p { color: #555; line-height: 1.7; font-size: 1.05rem; }


/* ============================================================
   17. CONSEIL PATRICK
   ============================================================ */

.conseil-patrick {
    background   : #fff3cd;
    border-left  : 6px solid var(--orange);
    border-radius: 8px;
    padding      : 35px 40px;
    box-shadow   : 0 4px 15px rgba(0,0,0,0.1);
    max-width    : 1000px;
    margin       : 0 auto;
}

.conseil-header {
    display      : flex;
    align-items  : center;
    gap          : 15px;
    margin-bottom: 20px;
}

.conseil-avatar {
    width        : 60px;
    height       : 60px;
    border-radius: 50%;
    object-fit   : cover;
    border       : 3px solid var(--orange);
}

.conseil-icon     { font-size: 2.5rem; flex-shrink: 0; }

.conseil-patrick h3 { color: var(--orange); font-size: 1.8rem; margin: 0; }
.conseil-subtitle   { color: #666; font-size: 1rem; margin: 0; }
.conseil-lead       { font-size: 1.1rem; font-weight: 600; margin-bottom: 15px; }

.conseil-grid {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap                  : 20px;
    margin: 20px 0;
}

.conseil-item {
    background   : rgba(255,255,255,0.6);
    border-radius: 8px;
    padding      : 15px;
    text-align   : center;
}

.conseil-emoji { font-size: 2rem; display: block; margin-bottom: 8px; }
.conseil-item h4 { font-size: 1rem; margin-bottom: 6px; color: var(--noir); }
.conseil-item p  { font-size: 0.9rem; color: #555; margin: 0; }

.conseil-list { padding-left: 20px; margin: 15px 0; }
.conseil-list li { margin-bottom: 10px; line-height: 1.6; }

.conseil-note {
    background   : rgba(232,93,4,0.1);
    border-left  : 3px solid var(--orange);
    padding      : 12px 15px;
    border-radius: 4px;
    font-size    : 0.95rem;
    color        : #444;
    margin-top   : 15px;
}

.conseil-patrick p  { font-size: 1.05rem; line-height: 1.8; color: #333; margin-bottom: 15px; }
.conseil-patrick strong { color: var(--orange); font-weight: 700; }


/* ============================================================
   18. INFO BLOCKS
   ============================================================ */

.info-blocks {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap                  : 30px;
    max-width            : 1100px;
    margin               : 0 auto;
}

.info-block {
    background   : #fff;
    border       : 3px solid var(--noir);
    border-radius: 8px;
    padding      : 35px 40px;
    box-shadow   : 5px 5px 0 rgba(0,0,0,0.1);
    transition   : transform 0.3s ease, box-shadow 0.3s ease;
}

.info-block:hover {
    transform : translateY(-5px);
    box-shadow: 8px 8px 0 rgba(232,93,4,0.3);
}

.info-icon { font-size: 3rem; margin-bottom: 20px; display: block; }

.info-block h3 {
    color        : var(--orange);
    margin-bottom: 15px;
    font-size    : 1.5rem;
    display      : flex;
    align-items  : center;
    gap          : 10px;
}

.info-block p          { font-size: 1.05rem; line-height: 1.7; color: #333; margin-bottom: 15px; }
.info-block p:last-child { margin-bottom: 0; }
.info-highlight        { font-weight: 600; }


/* ============================================================
   19. SERVICE PLUS
   ============================================================ */

.service-plus {
    background   : linear-gradient(135deg, #FFF8E1 0%, #FFF3CD 100%);
    border       : 3px solid #FBC02D;
    border-radius: 8px;
    padding      : 35px;
    box-shadow   : 5px 5px 0 rgba(251,192,45,0.2);
}

.service-plus-header {
    display      : flex;
    align-items  : center;
    gap          : 15px;
    margin-bottom: 20px;
    border-bottom: 2px solid #FBC02D;
    padding-bottom: 15px;
}

.service-plus-icon { font-size: 2.5rem; }

.service-plus-header h3 {
    margin        : 0;
    color         : #F57C00;
    font-size     : 1.6rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-plus p          { font-size: 1.05rem; line-height: 1.8; color: #333; margin-bottom: 15px; }
.service-plus p:last-child { margin-bottom: 0; }
.service-plus strong     { color: #E65100; }


/* ============================================================
   20. COMPARAISON DIGITAL ICE (slider interactif)
   ============================================================ */

.ice-comparison-interactive {
    background   : linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding      : 50px 30px;
    border-radius: 12px;
    border       : 3px solid var(--noir);
    box-shadow   : 8px 8px 0 rgba(0,0,0,0.1);
    margin-top   : 40px;
}

.before-after-slider { max-width: 700px; margin: 0 auto; }

.comparison-container {
    position  : relative;
    width     : 100%;
    aspect-ratio: 4/3;
    overflow  : hidden;
    border-radius: 8px;
    border    : 4px solid var(--noir);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
    cursor    : ew-resize;
    user-select: none;
}

.image-wrapper {
    position: absolute;
    inset   : 0;
}

.comparison-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.image-after {
    clip-path: inset(0 0 0 50%);
    transition: clip-path 0.05s ease-out;
    z-index  : 2;
}

/* Labels AVANT / APRÈS */
.image-label {
    position      : absolute;
    bottom        : 20px;
    padding       : 12px 20px;
    background    : rgba(0,0,0,0.85);
    color         : white;
    font-weight   : bold;
    font-size     : 1rem;
    border-radius : 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height   : 1.4;
    box-shadow    : 0 4px 10px rgba(0,0,0,0.5);
    pointer-events: none;
}

/* label-before est positionné directement sur .comparison-container (pas dans image-wrapper)
   z-index 1 = sous .image-after (z-index 2) → il disparaît au passage du curseur */
.label-before { left: 20px; background: linear-gradient(135deg, #e74c3c, #c0392b); z-index: 1; }
.label-after  { right: 20px; background: linear-gradient(135deg, #27ae60, #229954); z-index: 3; }
.image-label small { display: block; font-size: 0.75rem; font-weight: normal; opacity: 0.9; margin-top: 3px; }

/* Ligne + bouton du slider */
.slider-handle {
    position      : absolute;
    top: 0; bottom: 0;
    left          : 50%;
    width         : 4px;
    transform     : translateX(-50%);
    z-index       : 10;
    pointer-events: none;
    animation     : slideIntro 2s ease-in-out 0.5s;
}

.handle-line {
    position : absolute;
    inset    : 0;
    left     : 50%;
    width    : 4px;
    background: white;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.handle-button {
    position      : absolute;
    top           : 50%; left: 50%;
    transform     : translate(-50%, -50%);
    width         : 50px; height: 50px;
    background    : white;
    border        : 4px solid var(--orange);
    border-radius : 50%;
    display       : flex;
    align-items   : center;
    justify-content: center;
    gap           : 2px;
    box-shadow    : 0 4px 15px rgba(0,0,0,0.4);
    cursor        : ew-resize;
    pointer-events: auto;
    transition    : transform 0.2s ease, box-shadow 0.2s ease;
}

.handle-button:hover  { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 20px rgba(232,93,4,0.6); }
.handle-button:active { transform: translate(-50%, -50%) scale(0.95); }
.handle-button span   { font-size: 1rem; color: var(--orange); font-weight: bold; line-height: 1; }

/* Comparaison statique (simple) */
.ice-comparison {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 30px;
    background     : linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    padding        : 40px;
    border-radius  : 8px;
    border         : 3px solid var(--noir);
    box-shadow     : 5px 5px 0 rgba(0,0,0,0.1);
}

.comparison-item  { flex: 1; max-width: 200px; }

.comparison-box {
    width        : 100%;
    aspect-ratio : 1;
    border-radius: 8px;
    display      : flex;
    flex-direction: column;
    align-items  : center;
    justify-content: center;
    gap          : 15px;
    border       : 3px solid var(--noir);
    box-shadow   : 3px 3px 0 rgba(0,0,0,0.2);
    transition   : transform 0.3s ease;
}

.comparison-box:hover  { transform: translateY(-5px); }
.comparison-box.before { background: linear-gradient(135deg, #ff6b6b, #ee5a6f); color: white; }
.comparison-box.after  { background: linear-gradient(135deg, #51cf66, #37b24d); color: white; }

.comparison-icon  { font-size: 3rem; }
.comparison-label { font-weight: bold; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 1px; }
.comparison-arrow { font-size: 3rem; color: var(--orange); font-weight: bold; animation: pulse 2s ease-in-out infinite; }


/* ============================================================
   21. CTA FINAL
   ============================================================ */

.cta-final {
    background : linear-gradient(135deg, var(--orange) 0%, #D04F03 100%);
    color      : #fff;
    padding    : 80px 20px;
    text-align : center;
    border-top : 3px solid var(--noir);
}

.cta-final h2 {
    font-size    : 2.8rem;
    margin-bottom: 20px;
    color        : #fff;
    text-shadow  : 2px 2px 4px rgba(0,0,0,0.3);
}

.cta-final p { color: var(--ivoire) !important; font-size: 1.2rem; margin-bottom: 30px; }

.cta-final .btn-pro {
    background: var(--noir);
    color     : var(--ivoire);
    border    : 2px solid var(--noir);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}

.cta-final .btn-pro:hover {
    background: var(--ivoire);
    color     : var(--noir);
    transform : translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}


/* ============================================================
   22. UTILITAIRES
   ============================================================ */

.container {
    max-width: 1200px;
    margin   : 0 auto;
    padding  : 0 20px;
}

.section-header {
    text-align   : center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size    : 2.8rem;
    margin-bottom: 15px;
    color        : var(--noir);
}

.section-subtitle {
    font-size : 1.2rem;
    color     : #666;
    max-width : 700px;
    margin    : 0 auto;
    font-weight: 400;
}

/* Restauration IA */
.ia-restauration { max-width: 1000px; margin: 0 auto; }
.video-demo      { margin-top: 30px; }


/* ============================================================
   23. KEYFRAMES
   ============================================================ */

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@keyframes glow {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; box-shadow: 0 0 10px var(--orange); }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.2); opacity: 1; }
}

@keyframes slideIntro {
    0%   { left: 50%; }
    50%  { left: 30%; }
    100% { left: 50%; }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* ============================================================
   24. RESPONSIVE
   ============================================================ */

/* ─── Tablette ≤ 1024px ─── */
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .methode-grid  { grid-template-columns: 1fr; }
    .format-card   { flex: 0 0 calc(33.333% - 25px); }
}

/* ─── Menu mobile ≤ 900px ─── */
@media (max-width: 900px) {
    .menu-toggle { display: block; }

    .nav-links {
        position  : fixed;
        top: 0; right: 0;
        width     : 100%;
        max-width : 350px;
        height    : 100vh;
        background: #E8DCC0;
        border-left: 4px solid var(--noir);
        flex-direction: column;
        align-items: flex-start;
        gap       : 0;
        padding   : 80px 20px 20px;
        box-shadow: -5px 0 20px rgba(0,0,0,0.3);
        transform : translateX(100%);
        transition: transform 0.4s ease;
        overflow-y: auto;
        z-index   : 999;
    }

    .nav-links.active { transform: translateX(0); }

    .nav-link {
        width        : 100%;
        padding      : 18px 20px;
        font-size    : 1.1rem;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        text-align   : left;
        border-radius: 0;
    }

    .nav-link:hover { background: rgba(232,93,4,0.1); color: var(--orange); padding-left: 25px; }

    /* Dropdown mobile */
    .dropdown {
        width        : 100%;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .dropdown-toggle {
        width        : 100%;
        padding      : 18px 20px;
        font-size    : 1.1rem;
        font-weight  : 600;
        background   : transparent;
        border       : none;
        text-align   : left;
        cursor       : pointer;
        display      : flex;
        justify-content: space-between;
        align-items  : center;
        border-radius: 0;
    }

    .dropdown-toggle:hover { background: rgba(232,93,4,0.1); color: var(--orange); }

    .dropdown-arrow { color: var(--orange); font-size: 0.8rem; }

    .dropdown-menu {
        position   : static;
        opacity    : 1;
        visibility : visible;
        transform  : none;
        display    : none;
        flex-direction: column;
        background : rgba(232,93,4,0.08);
        border-left: 3px solid var(--orange);
        border-radius: 0;
        box-shadow : none;
        min-width  : auto;
        border-top : none; border-right: none;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    .dropdown.active .dropdown-menu { display: flex; }

    .dropdown-menu a {
        padding      : 15px 20px 15px 35px;
        font-size    : 1rem;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        background   : transparent;
        border-radius: 0;
        color        : var(--noir);
    }

    .dropdown-menu a:hover { background: rgba(232,93,4,0.2); color: var(--orange); padding-left: 40px; }

    /* Bouton devis mobile */
    .nav-links .btn-pro {
        width        : calc(100% - 40px) !important;
        margin       : 20px auto !important;
        padding      : 18px !important;
        background   : var(--orange) !important;
        color        : #fff !important;
        text-align   : center;
        font-size    : 1.1rem;
        border-radius: 8px;
        box-shadow   : 0 4px 10px rgba(232,93,4,0.3);
        display      : block;
        text-transform: uppercase;
    }

    .methode-grid-3 {
        grid-template-columns: 1fr;
        gap                  : 50px;
    }

    .methode-number {
        left     : 50%;
        transform: translateX(-50%);
    }

    .methode-card { padding-top: 50px; }
}

/* ─── Mobile ≤ 768px ─── */
@media (max-width: 768px) {
    .section-header h2 { font-size: 2rem; }

    /* Services : 1 carte par ligne sur mobile */
    .services-grid { grid-template-columns: 1fr; }

    /* Hero */
    .hero,
    .hero-video,
    .hero-film,
    .hero-photos {
        padding           : 80px 20px;
        min-height        : 400px;
        background-attachment: scroll;
    }

    .hero h1 { font-size: 2.5rem; letter-spacing: -1px; }

    .hero-video h1,
    .hero-film  h1,
    .hero-photos h1 { font-size: 2.5rem; }

    .hero-subtitle          { font-size: 1.1rem; padding: 15px 20px; }
    .hero-video .hero-subtitle,
    .hero-film  .hero-subtitle,
    .hero-photos .hero-subtitle { font-size: 1.1rem; padding: 15px 20px; }

    .hero-buttons       { flex-direction: column; align-items: stretch; }

    .hero .btn-pro,
    .hero .btn-ivoire {
        width    : 100%;
        max-width: 320px;
        margin   : 0 auto;
        padding  : 16px 35px;
        font-size: 1.1rem;
    }

    /* Grilles */
    .local-wrapper          { grid-template-columns: 1fr; }
    .local-image            { min-height: 300px; border-right: none; border-bottom: 3px solid var(--noir); }
    .local-content          { padding: 40px 20px; }
    .local-buttons          { flex-direction: column; }
    .local-buttons .btn-pro,
    .local-buttons .btn-ivoire { width: 100%; }

    .process-timeline       { grid-template-columns: 1fr; }

    .format-card            { flex: 0 0 calc(50% - 25px); }

    /* Ecosystem */
    .ecosystem-label  { display: none; }
    .ecosystem-nav    { gap: 15px; flex-wrap: wrap; }
    .eco-link         { font-size: 0.75rem; }
    .eco-banniere     { display: none; }
    .eco-link               { font-size: 0.75rem; }

    /* Conseil Patrick */
    .conseil-patrick        { padding: 25px; }
    .conseil-header         { flex-direction: column; text-align: center; }

    /* Service plus */
    .service-plus           { padding: 25px; }
    .service-plus-header    { flex-direction: column; text-align: center; }
    .service-plus-header h3 { font-size: 1.3rem; }

    /* Info blocks */
    .info-blocks            { grid-template-columns: 1fr; }
    .info-block             { padding: 25px; }

    /* Slider */
    .ice-comparison-interactive { padding: 30px 20px; }
    .comparison-container       { aspect-ratio: 3/4; }
    .image-label                { font-size: 0.85rem; padding: 8px 12px; bottom: 10px; }
    .label-before               { left: 10px; }
    .label-after                { right: 10px; }
    .handle-button              { width: 40px; height: 40px; }
    .handle-button span         { font-size: 0.85rem; }

    /* Comparaison statique */
    .ice-comparison             { flex-direction: column; padding: 30px 20px; }
    .comparison-arrow           { transform: rotate(90deg); font-size: 2.5rem; }
    .comparison-item            { max-width: 160px; }

    /* Formats tableau */
    .formats-table th,
    .formats-table td           { padding: 12px; }
    .formats-table              { font-size: 0.9rem; }
    .formats-table td:first-child { width: 40%; }
}

/* ─── Petit mobile ≤ 480px ─── */
@media (max-width: 480px) {
    .hero,
    .hero-video,
    .hero-film,
    .hero-photos { padding: 60px 15px; min-height: 350px; }

    .hero h1                   { font-size: 2rem; }
    .hero-video h1,
    .hero-film  h1,
    .hero-photos h1            { font-size: 2rem; }

    .hero-subtitle             { font-size: 1rem; padding: 12px 15px; }
    .subtitle-icon             { font-size: 1.5rem; }

    .hero .btn-pro,
    .hero .btn-ivoire          { padding: 14px 30px; font-size: 1rem; }

    .section-header h2         { font-size: 1.8rem; }
    .format-card               { flex: 0 0 100%; }

    .image-label               { font-size: 0.75rem; padding: 6px 10px; }
    .image-label small         { font-size: 0.65rem; }
    .handle-button             { width: 35px; height: 35px; }
}


/* ============================================================
   23. PAGES INTRO (partagé video/film/photos/audio + pages géo)
   ============================================================ */

.intro-section    { padding: 60px 20px; background: #fff; }
.intro-container  { max-width: 720px; margin: 0 auto; text-align: left; }
.lead + .lead     { margin-top: 1.2em; }


/* ============================================================
   24. PAGES GÉOGRAPHIQUES — CSS PARTAGÉ
   ============================================================ */

/* ── Hero géo (gradient, pas d'image requise) ── */
.hero-geo {
    background : linear-gradient(135deg, var(--noir) 0%, #2d1a00 50%, #1a0a00 100%);
    padding    : 100px 20px 80px;
    text-align : center;
    position   : relative;
    overflow   : hidden;
}

.hero-geo::before {
    content       : '';
    position      : absolute;
    inset         : 0;
    background    : radial-gradient(ellipse at 60% 40%, rgba(232,93,4,0.15) 0%, transparent 70%);
    pointer-events: none;
}

.hero-breadcrumb {
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 8px;
    margin-bottom  : 24px;
    font-size      : 0.85rem;
    color          : rgba(255,255,255,0.5);
}

.hero-breadcrumb a {
    color          : rgba(255,255,255,0.65);
    text-decoration: none;
    transition     : color 0.2s;
}

.hero-breadcrumb a:hover { color: var(--orange); }

.hero-cta {
    margin-top : 28px;
    display    : inline-block;
    font-size  : 1.1rem;
    padding    : 15px 36px;
}

/* ── Formats (cartes légères sans image) ── */
.formats-grid--geo {
    display              : grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap                  : 16px;
    margin-top           : 32px;
}

.format-card-geo {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 8px;
    padding        : 24px 16px;
    background     : var(--ivoire);
    border-radius  : 10px;
    border         : 2px solid transparent;
    text-align     : center;
    transition     : border-color 0.25s, transform 0.25s;
}

.format-card-geo:hover {
    border-color: var(--orange);
    transform   : translateY(-3px);
}

.format-card-geo__icon { font-size: 2rem; }
.format-card-geo strong { color: var(--noir); font-size: 1rem; }
.format-card-geo span   { color: #666; font-size: 0.85rem; }

.formats-note {
    text-align: center;
    margin-top: 24px;
    color     : #555;
    font-size : 0.95rem;
}

/* ── Zone d'intervention ── */
.zone-section { background: var(--beige); padding: 70px 20px; }

.zone-intro {
    text-align : center;
    max-width  : 680px;
    margin     : 0 auto 32px;
    color      : #555;
    line-height: 1.7;
}

.cities-grid {
    display        : flex;
    flex-wrap      : wrap;
    gap            : 10px;
    justify-content: center;
    max-width      : 900px;
    margin         : 0 auto 24px;
}

.city-tag {
    display      : inline-block;
    padding      : 7px 16px;
    background   : #fff;
    border       : 1px solid rgba(0,0,0,0.1);
    border-radius: 999px;
    font-size    : 0.88rem;
    color        : var(--noir);
    white-space  : nowrap;
    transition   : background 0.2s, color 0.2s;
}

.city-tag--main {
    background  : var(--orange);
    color       : #fff;
    font-weight : 700;
    border-color: var(--orange);
}

.zone-note {
    text-align: center;
    color     : #666;
    font-size : 0.9rem;
}

/* ── FAQ accordéon ── */
.faq-section    { padding: 70px 20px; background: #fff; }
.faq-container  { max-width: 760px; margin: 0 auto; }
.faq-list       { display: flex; flex-direction: column; gap: 12px; margin-top: 40px; }

.faq-item {
    border       : 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    overflow     : hidden;
}

.faq-question {
    padding        : 18px 22px;
    cursor         : pointer;
    font-weight    : 600;
    color          : var(--noir);
    list-style     : none;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    font-size      : 1rem;
    transition     : background 0.2s;
}

.faq-question::-webkit-details-marker { display: none; }

.faq-question::after {
    content    : '▼';
    font-size  : 0.75rem;
    color      : var(--orange);
    transition : transform 0.3s;
    flex-shrink: 0;
    margin-left: 12px;
}

details[open] .faq-question           { background: #fff8f4; }
details[open] .faq-question::after    { transform: rotate(180deg); }

.faq-answer {
    padding   : 16px 22px 20px;
    border-top: 1px solid rgba(0,0,0,0.07);
    background: #fafafa;
}

.faq-answer p { color: #555; line-height: 1.7; font-size: 0.95rem; margin: 0; }

/* ── Liens connexes ── */
.related-section { padding: 50px 20px; background: #f8f8f8; }

.related-title {
    font-family  : 'Playfair Display', serif;
    text-align   : center;
    font-size    : 1.4rem;
    color        : var(--noir);
    margin-bottom: 24px;
}

.related-links {
    display        : flex;
    gap            : 14px;
    justify-content: center;
    flex-wrap      : wrap;
}

.related-link {
    padding        : 11px 22px;
    background     : #fff;
    border         : 1px solid rgba(0,0,0,0.1);
    border-radius  : 8px;
    text-decoration: none;
    color          : var(--noir);
    font-size      : 0.92rem;
    transition     : border-color 0.2s, color 0.2s;
}

.related-link:hover { border-color: var(--orange); color: var(--orange); }

/* ── CTA final (fonds sombres) ── */
.cta-section { padding: 70px 20px; background: var(--noir); }

.cta-box {
    max-width : 700px;
    margin    : 0 auto;
    text-align: center;
}

.cta-box h2 {
    color        : var(--ivoire);
    font-family  : 'Playfair Display', serif;
    font-size    : 1.9rem;
    margin-bottom: 14px;
}

.cta-box > p { color: rgba(255,255,255,0.7); margin-bottom: 28px; font-size: 1rem; }

.cta-buttons {
    display        : flex;
    gap            : 16px;
    justify-content: center;
    flex-wrap      : wrap;
}

.cta-horaires {
    margin-top   : 20px;
    font-size    : 0.85rem;
    color        : rgba(255,255,255,0.45);
    margin-bottom: 0;
}

/* ── Lien orange inline ── */
.link-orange {
    color          : var(--orange);
    font-weight    : 600;
    text-decoration: none;
}

.link-orange:hover { text-decoration: underline; }

/* ── Responsive pages géo ── */
@media (max-width: 768px) {
    .hero-geo          { padding: 70px 20px 60px; }
    .formats-grid--geo { grid-template-columns: 1fr 1fr; }
    .cta-buttons       { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 480px) {
    .formats-grid--geo { grid-template-columns: 1fr 1fr; }
    .cta-buttons       { flex-direction: column; align-items: center; }
    .faq-question      { font-size: 0.92rem; padding: 14px 16px; }
    .faq-answer        { padding: 14px 16px 16px; }
}
}