/* =====================================================================
   TimJ Photographies, feuille de style unique du site
   Fichier : /css/timj.css
   Version : 5 (14/09/2026)

   A QUOI SERT CE FICHIER
   Il remplace les blocs <style> qui etaient recopies dans chaque page.
   Une seule modification ici change les 18 pages d un coup.

   COMMENT LE METTRE A JOUR
   Apres chaque modification de ce fichier, incrementer le numero dans
   le lien des pages HTML : timj.css?v=1 devient timj.css?v=2, etc.
   Sans cela, le navigateur des visiteurs garde l ancienne version.

   ORGANISATION
   1. Variables (couleurs, polices, tailles)
   2. Base (reset, typographie generale)
   3. Structure (menu, sections, hero, pied de page)
   4. Composants (boutons, cartes, encadres, tarifs, avis)
   5. Elements flottants (WhatsApp, bandeau cookies, barre mobile)
   6. Utilitaires (apparition au defilement)
   7. Responsive (tablette et mobile)
   ===================================================================== */

/* Ordre des couches CSS. Une regle d une couche placee plus bas dans
   cette liste gagne toujours, quelle que soit sa position dans le
   fichier. Cela evite d avoir a empiler des !important. */
@layer variables, base, structure, composants, pages, flottants, utilitaires, responsive;

/* =====================================================================
   TRANSITION ENTRE LES PAGES
   Deux lignes suffisent : le navigateur enchaine l ancienne et la
   nouvelle page par un fondu au lieu d un clignotement blanc.
   Les navigateurs qui ne connaissent pas cette regle l ignorent, la
   navigation reste exactement la meme. Elle est desactivee si la
   personne a demande a son systeme de reduire les animations.
   ===================================================================== */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: tj-sortie 0.18s ease both; }
::view-transition-new(root) { animation: tj-entree 0.28s ease both; }
@keyframes tj-sortie { to   { opacity: 0; } }
@keyframes tj-entree { from { opacity: 0; transform: translateY(8px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}


/* =====================================================================
   1. VARIABLES
   ===================================================================== */
@layer variables {

  :root {
    /* ---- Palette papier et encre (validee le 14/09/2026) ----
       Principe : l interface est neutre, la couleur vient des photos. */
    --paper:   #F6F5F2;  /* fond principal */
    --ink:     #14161A;  /* texte principal, contraste 16,6:1 sur papier */
    --accent:  #17395B;  /* bleu encre, contraste 10,9:1, BOUTONS D ACTION UNIQUEMENT */
    --muted:   #6B7078;  /* texte secondaire */
    --line:    #D8D4CC;  /* filets et cadres, legerement assombri en v6 */
    --surface: #EAE6DE;  /* fond secondaire des bandes alternees, assombri en v6 */

    /* Variantes calculees a partir de l accent, pour les survols */
    --accent-fonce: #0F2740;
    --accent-clair: rgba(23, 57, 91, 0.08);

    /* ---- Alias de compatibilite ----
       Les anciennes pages contiennent 543 appels var(--bg), var(--text),
       var(--secondary), var(--border). On ne les supprime pas un par un :
       on les redirige ici vers la nouvelle palette. Ils basculent donc
       automatiquement, sans toucher au HTML. */
    --bg:        var(--paper);
    --text:      var(--ink);
    --secondary: var(--surface);
    --border:    var(--line);

    /* ---- Polices ----
       Un seul lien Google Fonts est charge dans chaque page. */
    --font-titre: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
    --font-corps: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
    --font-logo:  'Playfair Display', Georgia, 'Times New Roman', serif; /* logotype seul */

    /* ---- Echelle typographique fluide ----
       clamp(mini, calcul, maxi) : la taille grandit avec la largeur de
       l ecran, entre 400 px et 1400 px, puis se bloque.
       Corps 17 px, h3 24 px, h2 40 px, h1 64 px sur grand ecran. */
    --t-corps: clamp(1rem,     0.975rem + 0.10vw, 1.0625rem);
    --t-h3:    clamp(1.25rem,  1.150rem + 0.40vw, 1.5rem);
    --t-h2:    clamp(1.625rem, 1.275rem + 1.40vw, 2.5rem);
    --t-h1:    clamp(2.125rem, 1.375rem + 3.00vw, 4rem);
    --t-petit: 0.875rem;   /* 14 px, mentions */
    --t-nav:   0.9375rem;  /* 15 px, navigation */

    /* ---- Divers ---- */
    --rayon:   10px;   /* arrondi standard des cartes */
    --rayon-s: 6px;    /* arrondi des petits elements */
    --nav-h:   70px;   /* hauteur du menu fixe, sert a decaler les hero */
    --largeur: 1200px; /* largeur maximale de contenu */
    --transition: 0.25s ease;

    /* ---- Relief (nouveau en v6) ----
       Trois niveaux d ombre seulement. Elles sont toutes grises et tres
       peu opaques : sur un fond papier, une ombre noire fait sale.
       --ombre-1 : carte au repos, elle se decolle a peine du fond
       --ombre-2 : carte survolee ou element mis en avant
       --ombre-3 : photo d entete, le seul element vraiment detache */
    --ombre-1: 0 2px 5px rgba(20, 22, 26, 0.05), 0 1px 1px rgba(20, 22, 26, 0.04);
    /* Blanc chaud des cartes, un cran au-dessus du papier. */
    --carte: #FDFCFA;
    --ombre-2: 0 10px 28px rgba(20, 22, 26, 0.10), 0 2px 6px rgba(20, 22, 26, 0.04);
    --ombre-3: 0 24px 56px rgba(20, 22, 26, 0.16);

    /* ---- Entete en deux colonnes (nouveau en v6) ----
       Chaque page declare seulement sa photo dans son propre bloc de
       style, par exemple :  .hero { --hero-img: url('images/xxx.webp'); }
       --hero-pos regle la hauteur du recadrage. Valeur par defaut basse
       (12 %), pour les portraits verticaux ou la tete est en haut.
       Une photo au format paysage utilise plutot --hero-pos: center. */
    --hero-img: none;
    --hero-pos: center 12%;
    --hero-col: 42%;   /* largeur de la colonne photo */
  }

}


/* =====================================================================
   2. BASE
   ===================================================================== */
@layer base {

  /* Remise a zero des marges par defaut du navigateur. */
  * { margin: 0; padding: 0; box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    /* Les ancres ne passent plus sous le menu fixe. */
    scroll-padding-top: calc(var(--nav-h) + 16px);
    -webkit-text-size-adjust: 100%;
  }

  body {
    font-family: var(--font-corps);
    font-size: var(--t-corps);
    font-weight: 400;
    line-height: 1.65;
    background: var(--paper);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* Titres : Archivo, graisse forte, interlettrage resserre.
     Le resserrement negatif est ce qui donne l allure contemporaine. */
  h1, h2, h3, h4 {
    font-family: var(--font-titre);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-wrap: balance; /* evite les mots orphelins, ignore si non supporte */
  }
  h1 { font-size: var(--t-h1); letter-spacing: -0.025em; }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: var(--t-h3); font-weight: 600; letter-spacing: -0.015em; }
  h4 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }

  p { margin-bottom: 1rem; }
  p:last-child { margin-bottom: 0; }

  strong, b { font-weight: 600; color: var(--ink); }

  a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
  }

  ul { list-style: none; }

  img, video { max-width: 100%; }

  /* Focus clavier visible : obligatoire pour l accessibilite. */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  ::selection { background: var(--accent); color: var(--paper); }

  /* Barre de defilement discrete (Chrome, Edge, Safari). */
  ::-webkit-scrollbar { width: 10px; }
  ::-webkit-scrollbar-track { background: var(--surface); }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 5px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* Lien d evitement, visible uniquement au clavier. */
  .skip-link {
    position: absolute; top: -60px; left: 0;
    background: var(--accent); color: var(--paper);
    padding: 10px 18px; font-weight: 600; font-size: var(--t-petit);
    z-index: 9999; transition: top 0.2s;
  }
  .skip-link:focus { top: 0; }

}


/* =====================================================================
   3. STRUCTURE
   ===================================================================== */
@layer structure {

  /* ---- Menu fixe ---- */
  nav {
    position: fixed; top: 0; width: 100%; height: var(--nav-h);
    z-index: 1000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 clamp(16px, 5vw, 48px);
    background: rgba(246, 245, 242, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
  }

  /* Logotype : seul endroit du site ou Playfair Display est autorise.
     Une seule couleur, plus de bicolore or et blanc. */
  .logo {
    font-family: var(--font-logo);
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    z-index: 1001;
    white-space: nowrap;
  }
  .logo span { color: var(--ink); font-weight: 700; } /* neutralise l ancien or */

  .nav-links { display: flex; gap: 6px; align-items: center; }
  .nav-links a {
    font-family: var(--font-corps);
    font-size: var(--t-nav);
    font-weight: 500;
    letter-spacing: 0;
    color: var(--muted);
    white-space: nowrap;
    padding: 8px 10px;
    border-radius: var(--rayon-s);
  }
  .nav-links a:hover { color: var(--ink); background: var(--surface); }
  .nav-links a.active { color: var(--ink); font-weight: 600; }

  /* Bouton Reserver du menu : c est une action, donc il porte l accent. */
  .btn-nav {
    background: var(--accent);
    color: var(--paper) !important;
    border: 1px solid var(--accent);
    padding: 9px 18px !important;
    border-radius: 999px;
    font-weight: 600;
  }
  .btn-nav:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--paper) !important; }

  .burger {
    display: none;
    background: none; border: none; cursor: pointer;
    font-size: 1.75rem; line-height: 1; color: var(--ink);
    padding: 6px; z-index: 1001;
  }

  /* ---- Sections ---- */
  section {
    padding: clamp(56px, 7vw, 96px) clamp(16px, 6vw, 64px);
    text-align: center;
  }
  /* Section au fond secondaire : utilisee par l attribut
     style="background: var(--secondary)" encore present dans les pages. */

  /* Une page sans hero commence directement par du contenu. Sans ce
     decalage, son premier titre passerait sous le menu fixe. */
  main > section:first-child,
  main > .content:first-child,
  main > article:first-child {
    padding-top: calc(var(--nav-h) + 40px);
  }
  .content {
    max-width: 860px; margin: 0 auto;
    padding-left: clamp(16px, 5vw, 24px); padding-right: clamp(16px, 5vw, 24px);
    padding-bottom: 80px; text-align: left;
  }

  .section-title { font-size: var(--t-h2); margin-bottom: 2rem; }
  /* L ancien filet dore sous les titres devient un filet neutre et court. */
  .section-title::after {
    content: ''; display: block;
    width: 44px; height: 2px;
    background: var(--ink);       /* v6 : filet a l encre, il se voit enfin */
    margin: 18px auto 0;
  }
  .section-intro, .section-subtitle {
    max-width: 62ch; margin: 0 auto 2rem;
    color: var(--muted); font-size: 1.0625rem;
  }

  /* ---- Entete de page, en deux colonnes ----
     POURQUOI CE CHOIX (14/09/2026)
     L ancien entete etait une photo plein cadre avec un voile sombre et
     le texte pose dessus. Probleme : la plupart des photos du site sont
     au format vertical. Dans un bandeau large, un recadrage "cover"
     coupe la tete du modele, et un cadrage "contain" laisse deux bandes
     noires. Aucun reglage de position ne corrige cela, c est une
     contrainte de geometrie.
     SOLUTION : le texte passe a gauche sur fond papier, la photo entiere
     passe a droite dans un cadre vertical. La photo respire, le texte
     est lisible sans voile, et l ensemble est plus contemporain.

     CHAQUE PAGE DECLARE SEULEMENT SA PHOTO :
         .hero { --hero-img: url('images/xxx.webp'); }
     et, si le cadrage doit etre remonte ou descendu :
         .hero { --hero-pos: center 6%; }
  */
  .hero, .page-hero {
    position: relative;
    display: block;
    text-align: left;
    background: var(--paper);
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    min-height: clamp(460px, 58vh, 620px);
    padding: calc(var(--nav-h) + 56px) clamp(16px, 5vw, 64px) 60px;
    /* La colonne de droite est reservee a la photo : le texte s arrete
       avant, sans avoir besoin d un conteneur supplementaire. */
    padding-right: calc(var(--hero-col) + clamp(24px, 4vw, 56px));
  }
  .hero > *, .page-hero > * { position: relative; z-index: 2; }

  .hero h1, .page-hero h1 { color: var(--ink); margin-bottom: 18px; max-width: 17ch; }
  .hero h1 span, .page-hero h1 span { color: var(--ink); }
  .hero p, .page-hero p {
    color: var(--muted);
    max-width: 50ch; font-size: 1.0625rem; margin-bottom: 10px;
  }
  /* Sur-titre : petites capitales en mono, remplace l ancien texte dore. */
  .hero .subtitle, .hero-subtitle, .page-hero .badge {
    font-family: var(--font-mono);
    font-size: 0.8125rem; font-weight: 400;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--muted);
    display: inline-block;
    margin-bottom: 18px;
  }
  /* Le sur-titre de la page bons cadeaux est une pastille : on lui garde
     sa forme, avec les couleurs de la nouvelle charte. */
  .page-hero .badge {
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 6px 16px; border-radius: 999px;
  }
  /* ---- Preuve sociale dans l entete (nouveau en v8) ----
     Les avis Google etaient tout en bas de page, derriere un carrousel.
     Un visiteur qui hesite ne descend pas jusque la. Un seul avis, court
     et signe, pose sous le titre, fait le travail que le carrousel ne
     faisait pas.
     C est un lien : il ouvre la fiche Google, donc l avis est verifiable. */
  .hero-avis {
    display: block;
    max-width: 44ch;
    margin: 22px 0 26px;
    padding: 16px 20px;
    background: var(--carte);
    border: 1px solid var(--line);
    border-left: 2px solid var(--ink);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    box-shadow: var(--ombre-1);
    color: var(--ink);
    transition: border-color var(--transition), box-shadow var(--transition),
                transform var(--transition);
  }
  .hero-avis:hover {
    border-color: var(--muted); border-left-color: var(--ink);
    box-shadow: var(--ombre-2); transform: translateY(-2px);
  }
  .hero-avis-note {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .hero-avis-etoiles { color: var(--ink); letter-spacing: 2px; font-size: 0.875rem; }
  .hero-avis-note b { font-family: var(--font-mono); font-size: 0.9375rem; font-weight: 400; }
  .hero-avis-source {
    font-family: var(--font-mono); font-size: 0.6875rem;
    letter-spacing: 0.10em; text-transform: uppercase; color: var(--muted);
  }
  .hero-avis-texte {
    display: block; font-size: 0.9375rem; line-height: 1.5;
    color: var(--ink); margin-bottom: 8px;
  }
  .hero-avis-auteur {
    display: block; font-family: var(--font-mono);
    font-size: 0.6875rem; letter-spacing: 0.10em;
    text-transform: uppercase; color: var(--muted);
  }
  @media (max-width: 900px) {
    .hero-avis { margin-left: auto; margin-right: auto; text-align: left; }
  }

  .hero .stat, .page-hero .stat {
    font-family: var(--font-mono); font-size: 0.8125rem;
    letter-spacing: 0.06em; color: var(--muted);
  }

  /* La colonne photo. C est l ancien voile sombre, recycle en cadre.
     Aucun element n a ete ajoute dans le HTML : ce cadre est un
     pseudo-element, donc les pages restent identiques. */
  .hero::before, .page-hero::before {
    content: ''; position: absolute; z-index: 1;
    top: calc(var(--nav-h) + 40px);
    bottom: 44px;
    right: clamp(16px, 5vw, 64px);
    left: auto;
    width: var(--hero-col);
    background-image: var(--hero-img);
    background-position: var(--hero-pos);
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--surface);
    border-radius: var(--rayon);
    /* Le relief vient de l ombre, pas d un cadre dessine. */
    box-shadow: var(--ombre-3);
    /* Parallaxe : la photo se decale legerement au defilement. La valeur
       est posee par le script partage, et vaut zero par defaut. */
    transform: translate3d(0, var(--hero-decalage, 0px), 0);
    will-change: transform;
  }

  /* ---- Pied de page ---- */
  footer {
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 56px clamp(16px, 6vw, 48px);
    text-align: center;
    color: var(--muted);
    font-size: var(--t-petit);
  }
  footer p { margin: 6px 0; }
  footer a { color: var(--muted); border-bottom: 1px solid transparent; }
  footer a:hover { color: var(--ink); border-bottom-color: var(--line); }

  .social-icons { margin-bottom: 22px; display: flex; justify-content: center; gap: 20px; }
  .social-icons a { color: var(--muted); display: inline-flex; }
  .social-icons a:hover { color: var(--ink); }
  .social-icons i, .social-icons svg { font-size: 1.5rem; }
  .footer-social { margin-bottom: 22px; display: flex; justify-content: center; gap: 20px; }
  .footer-social a { color: var(--muted); }
  .footer-social a:hover { color: var(--ink); }

}


/* =====================================================================
   4. COMPOSANTS
   ===================================================================== */
@layer composants {

  /* ---- Boutons ----
     .btn         : bouton secondaire, contour neutre
     .btn-filled  : bouton principal, fond accent (action premiere)
     Les majuscules et l interlettrage large de l ancienne charte sont
     supprimes : ils datent le site. */
  .btn, .btn-gift, .btn-gift-outline, .btn-reserve, .tjbs-cta, .tj26-btn {
    display: inline-block;
    font-family: var(--font-corps);
    font-size: 0.9375rem; font-weight: 600;
    letter-spacing: 0; text-transform: none;
    padding: 13px 26px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
  }
  .btn:hover, .btn-gift-outline:hover, .tjbs-cta:hover, .tj26-btn:hover {
    background: var(--surface); border-color: var(--muted); color: var(--ink);
  }

  .btn-filled, .btn-gift, .btn-reserve, .pricing-card.featured .btn {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--paper);
  }
  .btn-filled:hover, .btn-gift:hover, .btn-reserve:hover, .pricing-card.featured .btn:hover {
    background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--paper);
  }
  /* v6 : l entete est desormais sur fond papier, les boutons reprennent
     donc l habillage normal du site. Le bouton principal reste le seul
     element colore de la page. */
  .hero .btn, .page-hero .btn {
    color: var(--ink);
    border-color: var(--line);
    background: transparent;
  }
  .hero .btn:hover, .page-hero .btn:hover {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--muted);
  }
  .hero .btn-filled, .page-hero .btn-filled, .page-hero .btn-gift {
    background: var(--accent); border-color: var(--accent); color: var(--paper);
    box-shadow: var(--ombre-1);
  }
  .hero .btn-filled:hover, .page-hero .btn-filled:hover, .page-hero .btn-gift:hover {
    background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--paper);
    box-shadow: var(--ombre-2);
  }

  /* ---- Cartes, modele commun ----
     Toutes les cartes du site partagent le meme habillage : fond
     secondaire, filet fin, angles arrondis. Aucune ombre lourde. */
  /* v6 : LE SYSTEME DE RELIEF
     Les bandes de section alternent papier et fond secondaire. Les cartes,
     elles, sont toujours en papier avec une ombre legere. Resultat :
       - sur une bande papier, la carte se detache par son ombre et son filet
       - sur une bande secondaire, la carte est en plus plus claire que le fond
     C est ce double effet qui donne du relief sans ajouter de couleur. */
  .audience-card, .reassurance-card, .benefit-card, .benefit, .zone-card,
  .myth-card, .do-card, .dont-card, .other-card, .gift-card, .blog-card,
  .pricing-card, .album-tile, .testimonial {
    background: var(--carte);
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    padding: 28px 24px;
    text-align: left;
    box-shadow: var(--ombre-1);
    transition: border-color var(--transition), transform var(--transition),
                box-shadow var(--transition), background-color var(--transition);
  }
  .audience-card:hover, .reassurance-card:hover, .benefit-card:hover, .benefit:hover,
  .zone-card:hover, .other-card:hover, .gift-card:hover, .blog-card:hover,
  .info-box:hover, .pricing-card:hover {
    border-color: var(--muted);
    transform: translateY(-3px);
    box-shadow: var(--ombre-2);
  }

  /* Titres et textes internes aux cartes. */
  /* Titres de cartes : 20 px. Volontairement plus petits qu un h3 isole
     (24 px), mais nettement au-dessus du corps de texte (17 px), pour que
     la hierarchie reste lisible a l interieur d une carte. */
  .audience-card h3, .reassurance-card h3, .benefit-card h3, .benefit h3,
  .zone-card h3, .other-card h3, .gift-card h3, .info-box h3, .step h3,
  .blog-content h3, .pricing-card h3 {
    font-size: 1.25rem; margin-bottom: 8px;
  }
  .audience-card p, .reassurance-card p, .benefit-card p, .benefit p,
  .zone-card p, .other-card p, .gift-card p, .info-box p, .step p {
    color: var(--muted); font-size: 0.9375rem; margin-bottom: 0;
  }

  /* Pictogrammes des cartes : neutres, jamais en couleur d accent. */
  .audience-card .icon, .reassurance-card i, .reassurance-card svg,
  .benefit .icon, .benefit-card i, .info-box i, .gift-card .gift-icon {
    font-size: 1.625rem;
    color: var(--ink);
    display: inline-block;
    margin-bottom: 14px;
  }

  /* ---- Grilles de cartes ----
     PROBLEME RESOLU ICI : avec une grille classique, une rangee incomplete
     reste collee a gauche. Avec 5 cartes sur 4 colonnes, la cinquieme se
     retrouvait seule dans le coin gauche. C est ce qui deseequilibrait la
     section "Pour qui ?" de l accueil.

     SOLUTION : on passe en flex avec justify-content:center. La derniere
     rangee, meme incomplete, est desormais centree. Les cartes gardent
     toutes la meme largeur grace au max-width commun.

     En plus, deux cas particuliers sont corriges au niveau du nombre de
     cartes, avec :has() :
       - exactement 5 cartes  -> 3 puis 2, centrees (au lieu de 4 puis 1)
       - exactement 6 cartes  -> 3 puis 3, parfaitement symetrique
     Si un navigateur ancien ne comprend pas :has(), il ignore ces deux
     regles et affiche simplement la derniere rangee centree. */
  .audience-grid, .reassurance-grid, .benefits-grid, .values-grid,
  .articles-grid, .two-col, .content-grid, .faq-grid,
  .other-services, .gift-cards, .gift-steps, .myth-grid, .do-dont, .zone-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    max-width: var(--largeur);
    margin: 0 auto;
  }
  .audience-grid > *, .reassurance-grid > *, .benefits-grid > *, .values-grid > *,
  .articles-grid > *, .two-col > *, .content-grid > *, .faq-grid > *,
  .other-services > *, .gift-cards > *, .gift-steps > *, .myth-grid > *,
  .do-dont > *, .zone-grid > * {
    flex: 1 1 280px;
    max-width: 380px;
  }

  /* Exactement 5 cartes : on elargit la base pour n en faire tenir que 3
     par rangee, ce qui donne 3 + 2 au lieu de 4 + 1. */
  .audience-grid:has(> :nth-child(5):last-child) > *,
  .reassurance-grid:has(> :nth-child(5):last-child) > *,
  .benefits-grid:has(> :nth-child(5):last-child) > *,
  .values-grid:has(> :nth-child(5):last-child) > *,
  .content-grid:has(> :nth-child(5):last-child) > *,
  .other-services:has(> :nth-child(5):last-child) > *,
  .gift-cards:has(> :nth-child(5):last-child) > * { flex-basis: 300px; }

  /* Exactement 6 cartes : 3 + 3. */
  .audience-grid:has(> :nth-child(6):last-child) > *,
  .reassurance-grid:has(> :nth-child(6):last-child) > *,
  .benefits-grid:has(> :nth-child(6):last-child) > *,
  .values-grid:has(> :nth-child(6):last-child) > *,
  .content-grid:has(> :nth-child(6):last-child) > *,
  .other-services:has(> :nth-child(6):last-child) > *,
  .gift-cards:has(> :nth-child(6):last-child) > * { flex-basis: 300px; }

  .steps-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 32px; max-width: 960px; margin: 0 auto;
  }
  .steps-grid > * { flex: 1 1 220px; max-width: 300px; }

  /* ---- Etapes numerotees ---- */
  .step { text-align: center; }
  .step-number, .step-num, .gift-step .step-num, .tj26-num {
    font-family: var(--font-mono);
    font-size: 1.125rem; font-weight: 400;
    color: var(--muted);
    letter-spacing: 0.06em;
    display: inline-block; margin-bottom: 10px;
  }

  /* ---- Encadres de contenu ---- */
  .tip-box, .cta-box, .info-box, .side-box, .contact-box, .tj26-encadre, .tj26-fix {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: 0 var(--rayon) var(--rayon) 0;
    padding: 20px 24px;
    margin: 28px 0;
    text-align: left;
  }
  .tip-box p, .tj26-encadre p, .tj26-fix p { margin-bottom: 0; color: var(--ink); }
  .tip-box strong { color: var(--ink); }

  .cta-box, .cta, .cta-section, .gift-cta-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    padding: 36px 28px;
    text-align: center;
    margin: 40px auto;
    max-width: 800px;
  }
  .cta-box .price, .cta-box p, .cta p { color: var(--muted); }

  /* ---- Tarifs ----
     L ancien bloc avait une double bordure doree. Une seule bordure fine,
     et le prix passe en IBM Plex Mono : plus technique, moins decoratif. */
  .pricing-highlight {
    max-width: 520px; margin: 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    padding: 40px 32px;
    box-shadow: none;
  }
  .pricing-highlight .price, .pricing-card .price, .price-table .price, .gift-card .gift-price {
    font-family: var(--font-mono);
    font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
    font-weight: 400;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1.1;
  }
  .pricing-highlight .label, .pricing-card .price-note, .gift-card .gift-price-label {
    font-family: var(--font-mono);
    font-size: 0.8125rem; letter-spacing: 0.04em;
    color: var(--muted); margin-top: 10px;
  }
  .pricing-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px; max-width: 1280px; margin: 0 auto;
  }
  .pricing-card { display: flex; flex-direction: column; }
  .pricing-card h3 { margin-bottom: 4px; }
  /* v6 : la formule recommandee passe sur fond encre. C est la mise en
     evidence la plus forte du site, elle est donc reservee a un seul bloc
     par page. Les variables sont redefinies localement : tout ce qui est
     a l interieur de la carte s inverse tout seul. */
  .pricing-card.featured {
    --paper: #1E2126; --ink: #F6F5F2; --surface: #262A30;
    --line: #333940; --muted: #A2A8B0;
    --accent: #F6F5F2; --accent-fonce: #FFFFFF;
    --bg: var(--paper); --text: var(--ink); --secondary: var(--surface); --border: var(--line);
    background: #14161A;
    border-color: #14161A;
    color: #F6F5F2;
    box-shadow: var(--ombre-2);
  }
  .pricing-card.featured:hover { border-color: #14161A; box-shadow: var(--ombre-3); }
  .pricing-card.featured h3, .pricing-card.featured .price { color: #F6F5F2; }
  .pricing-card.featured .badge { background: #F6F5F2; color: #14161A; }
  .pricing-card .badge, .gift-card .popular-tag, .article-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--paper); background: var(--ink);
    padding: 4px 10px; border-radius: 999px;
    margin-bottom: 10px;
  }
  .pricing-card .features, .includes-list { margin: 16px 0; text-align: left; }
  .pricing-card .features li, .includes-list li {
    position: relative; padding-left: 20px;
    font-size: 0.9375rem; color: var(--muted); margin-bottom: 8px;
  }
  .pricing-card .features li::before, .includes-list li::before {
    content: ''; position: absolute; left: 0; top: 0.7em;
    width: 10px; height: 1px; background: var(--muted);
  }

  /* Tableau de prix (page guide des tarifs). */
  .price-table { width: 100%; border-collapse: collapse; margin: 28px 0; text-align: left; }
  .price-table th, .price-table td {
    padding: 14px 12px; border-bottom: 1px solid var(--line); font-size: 0.9375rem;
  }
  .price-table th {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
    font-weight: 400;
  }
  .price-table tr:last-child td { border-bottom: none; }
  .price-table .price { font-size: 1rem; }

  /* ---- Questions frequentes ---- */
  .faq-item {
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    margin-bottom: 12px;
    overflow: hidden;
    background: var(--surface);
    text-align: left;
  }
  .faq-question {
    width: 100%; background: transparent; border: none;
    font-family: var(--font-corps); font-size: 1rem; font-weight: 600;
    color: var(--ink); cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 18px 20px; text-align: left;
  }
  .faq-question:hover { background: var(--paper); }
  .faq-icon { color: var(--muted); font-size: 1.1rem; flex-shrink: 0; transition: transform var(--transition); }
  .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
  .faq-answer {
    max-height: 0; overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    color: var(--muted); font-size: 0.9375rem; padding: 0 20px; text-align: left;
  }
  /* CORRECTIF IMPORTANT : l accordeon des questions frequentes est pilote
     par la classe .open, et c est le max-height qui fait l ouverture.
     Sans cette ligne, cliquer sur une question ne fait rien. */
  .faq-answer.open { max-height: 1200px; padding: 0 20px 18px; }

  .faq-list { max-width: 800px; margin: 0 auto; }

  /* Balises natives <details>/<summary>, utilisees sur certaines pages. */
  details.faq-item summary { list-style: none; cursor: pointer; }
  details.faq-item summary::-webkit-details-marker { display: none; }

  /* ---- Photos et portfolio ---- */
  .photo-item {
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--rayon);
    background: var(--surface);
    height: 300px;
  }
  .photo-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.5s ease;
  }
  .photo-item:hover img { transform: scale(1.04); }
  /* ---- Galerie du portfolio, mise en page editoriale ----
     AVANT : douze vignettes toutes identiques, alignees en trois colonnes.
     C etait lisible mais plat, ca ressemblait a une planche contact.

     MAINTENANT : quatre colonnes, et une grande image toutes les six. Le regard a un point d entree par rangee au lieu de balayer
     une trame reguliere. C est la mise en page d un livre photo.

     COMMENT CA TIENT
     Chaque vignette occupe une case de la grille. Les grandes en occupent
     quatre (deux colonnes sur deux rangees). "dense" demande au navigateur
     de reboucher les trous : quand un filtre masque des photos, la grille
     se recompose toute seule sans laisser de case vide. */
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: clamp(220px, 23vw, 330px);
    grid-auto-flow: row dense;
    gap: 14px; max-width: var(--largeur); margin: 0 auto 32px;
  }
  /* Rythme : une grande image toutes les six, en alternant le cote.
     Le cycle de six est choisi pour que la grille se referme exactement
     sur un nombre de photos multiple de six (12 aujourd hui). Si le
     nombre change, "dense" rebouche, au pire il reste une case vide en
     fin de galerie. */
  .portfolio-grid > :nth-child(6n + 1),
  .portfolio-grid > :nth-child(6n + 4) { grid-column: span 2; grid-row: span 2; }

  /* La vignette d album (la serie Armelle) est une carte ailleurs sur le
     site : dans la galerie, elle doit etre a fleur comme les autres. */
  .portfolio-grid > .album-tile {
    padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0;
  }

  /* La photo remplit toujours sa case, quelle que soit sa taille. */
  .portfolio-grid > .photo-link { display: block; height: 100%; margin: 0; }
  .portfolio-grid .photo-item {
    height: 100%; min-height: 0; aspect-ratio: auto;
    position: relative; overflow: hidden;
  }
  .portfolio-grid .photo-item img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.7s ease;
  }
  .portfolio-grid .photo-link:hover .photo-item img { transform: scale(1.04); }

  /* Sous 900 px, deux colonnes et des vignettes de meme taille : sur un
     ecran etroit, un rythme irregulier devient illisible. */
  @media (max-width: 900px) {
    .portfolio-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .portfolio-grid > :nth-child(6n + 1),
    .portfolio-grid > :nth-child(6n + 4) { grid-column: span 1; grid-row: span 1; }
    .portfolio-grid .photo-item { aspect-ratio: 4 / 5; }
  }
  @media (max-width: 520px) {
    .portfolio-grid { grid-template-columns: 1fr; }
  }

  /* Apercu de la galerie sur l accueil : trame reguliere, volontairement.
     C est un extrait, pas le portfolio. */
  .portfolio-preview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px; max-width: var(--largeur); margin: 0 auto 32px;
  }
  @media (max-width: 900px) { .portfolio-preview { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .portfolio-preview { grid-template-columns: 1fr; } }
  .article-img, .hero-img, .bio-photo {
    border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--line);
  }
  .article-img img, .hero-img img { display: block; width: 100%; height: auto; }

  /* ---- Avis clients ---- */
  .testimonial { text-align: left; }
  .quote { font-style: normal; color: var(--ink); margin-bottom: 16px; }
  .author { font-weight: 600; font-size: 0.9375rem; }
  .avatar {
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; flex: none;
  }
  /* Etoiles monochromes : la note reste lisible sans ajouter de couleur. */
  .stars, .review-stars { color: var(--ink); letter-spacing: 3px; font-size: 0.95rem; }
  .carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; }
  .dot.active { background: var(--ink); }

  /* Carrousel Swiper des avis Google. */
  .swiper { width: 100%; padding-bottom: 44px; }
  .swiper-slide {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    border-radius: var(--rayon);
    padding: 26px; text-align: left; height: auto;
    box-shadow: none;
  }
  .swiper-pagination-bullet { background: var(--line); opacity: 1; }
  .swiper-pagination-bullet-active { background: var(--ink); }

  /* Le carrousel des avis Google (.tj-swiper) construit sa propre carte
     (.tj-card) par script. On neutralise donc l habillage generique des
     diapositives, sinon on verrait deux cadres imbriques. */
  .tj-swiper .swiper-slide {
    background: transparent; border: none; border-left: none;
    border-radius: 0; padding: 0;
  }

  /* ---- Typographie des articles de blog ---- */
  article, .content { text-align: left; }

  /* Pages guides (conseils, preparation, guide des prix) : tout le contenu
     est dans un <article> sans classe. Le padding du haut integre la
     hauteur du menu fixe, sinon le titre passerait dessous.
     Le :not([class]) evite de toucher aux <article class="blog-card">
     de la page blog, qui sont des vignettes et non des pages d article. */
  article:not([class]) {
    max-width: 760px;
    margin: 0 auto;
    padding: calc(var(--nav-h) + 48px) clamp(16px, 5vw, 24px) 80px;
    text-align: left;
  }
  article:not([class]) h2 { margin: 2.5rem 0 1rem; }
  article:not([class]) h3 { margin: 2rem 0 0.75rem; }
  article:not([class]) p { color: var(--ink); }

  /* Dans une colonne de lecture de 760 px, l echelle du hero (64 px) est
     trop forte : le titre casse en 3 lignes et ecrase le texte. On
     redescend h1 a 44 px, h2 a 32 px, h3 a 21 px. Le corps reste a 17 px,
     donc les ecarts restent nets. */
  article:not([class]) h1, .tj26 h1 { font-size: clamp(1.875rem, 1.35rem + 2.1vw, 2.75rem); margin-bottom: 10px; }
  article:not([class]) h2, .tj26 h2 { font-size: clamp(1.375rem, 1.15rem + 0.90vw, 2rem); }
  article:not([class]) h3, .tj26 h3 { font-size: clamp(1.125rem, 1.05rem + 0.30vw, 1.3125rem); }
  article:not([class]) .article-meta, .tj26 .tj26-meta { margin-top: 6px; }

  /* Image d ouverture d un article : hauteur bornee pour ne pas manger
     tout l ecran sur les photos tres verticales. */
  .hero-img img { max-height: 480px; object-fit: cover; }

  /* ---- Rangees et grilles reutilisables ---- */
  .btn-row, .mini-links {
    display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
  }
  .links-box { max-width: 850px; margin: 0 auto; text-align: center; }
  .links-box p { color: var(--muted); margin-bottom: 20px; }
  .portfolio-filters {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 32px;
  }
  .tj26 { max-width: 760px; margin: 0 auto; text-align: left; }
  .tj26 h2 { margin: 2.5rem 0 1rem; }
  .tj26 h3 { margin: 2rem 0 0.75rem; }
  .tj26 p { margin-bottom: 1.1rem; color: var(--ink); }
  .tj26 ul, .tj26 ol { margin: 0 0 1.2rem 1.25rem; color: var(--ink); }
  .tj26 li { margin-bottom: 0.5rem; }
  .tj26 ol { list-style: decimal; }
  .tj26 ul { list-style: disc; }
  .tj26-lede, .tj26-hero p { font-size: 1.125rem; color: var(--muted); }
  .tj26-meta, .article-meta {
    font-family: var(--font-mono); font-size: 0.8125rem;
    letter-spacing: 0.04em; color: var(--muted); margin-bottom: 1.5rem;
  }
  ul.article-list { margin: 1rem 0 1.5rem; text-align: left; }
  ul.article-list li { position: relative; padding-left: 20px; margin-bottom: 8px; color: var(--ink); }
  ul.article-list li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--muted); }
  .article-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; flex-wrap: wrap; }
  .article-nav a { color: var(--muted); font-size: 0.9375rem; }
  .article-nav a:hover { color: var(--ink); }

  /* ---- Divers ---- */
  .breadcrumb { font-size: var(--t-petit); color: var(--muted); margin-bottom: 16px; }
  .breadcrumb a:hover { color: var(--ink); }
  .filter-btn {
    font-family: var(--font-corps); font-size: 0.875rem; font-weight: 500;
    padding: 8px 16px; border-radius: 999px;
    border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  }
  .filter-btn:hover { color: var(--ink); border-color: var(--muted); }
  .filter-btn.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  .micro-note, .small-italic { font-size: var(--t-petit); color: var(--muted); }
  .do-card { border-left: 3px solid var(--ink); }
  .dont-card { border-left: 3px solid var(--line); }
  .do-card .label, .dont-card .label {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }

  /* Section coulisses video de la page d accueil. */
  .tjbs { padding: clamp(56px, 7vw, 90px) clamp(16px, 6vw, 48px); }
  .tjbs-inner {
    max-width: 1000px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
    gap: 48px; align-items: center;
  }
  .tjbs-video {
    width: 100%; height: auto; display: block; aspect-ratio: 9/16;
    background: var(--ink); border: 1px solid var(--line); border-radius: var(--rayon);
  }
  .tjbs-eyebrow {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--muted); margin: 0 0 10px; font-weight: 400;
  }
  .tjbs h2 { font-size: var(--t-h2); margin: 0 0 18px; text-align: left; }
  .tjbs-texte { text-align: left; }
  .tjbs-texte p { color: var(--muted); margin: 0 0 14px; max-width: 58ch; }
  .tjbs-points { margin: 22px 0 26px; display: flex; flex-direction: column; gap: 9px; }
  .tjbs-points li { color: var(--ink); font-size: 0.9375rem; padding-left: 22px; position: relative; }
  .tjbs-points li::before { content: ''; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: var(--muted); }

}


/* =====================================================================
   5. ELEMENTS FLOTTANTS
   ===================================================================== */
@layer flottants {

  /* ---- Bouton flottant unique ----
     Avant : 3 boutons empiles (appel bleu iOS, WhatsApp vert, retour en
     haut dore). Maintenant : un seul, WhatsApp, repeint dans la charte.
     Le bouton telephone et le retour en haut sont retires du HTML. */
  .floating-contact {
    position: fixed; right: 18px; bottom: 18px; z-index: 1100;
    width: 52px; height: 52px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--accent); color: var(--paper);
    font-size: 22px;
    border: none;
    box-shadow: 0 6px 18px rgba(20, 22, 26, 0.18);
    transition: transform var(--transition), background-color var(--transition);
  }
  .floating-contact:hover { transform: scale(1.06); background: var(--accent-fonce); color: var(--paper); }

  /* ---- Fleche "retour en haut" ----
     Volontairement discrete : fond papier, filet fin, fleche encre. Elle
     n entre pas en concurrence avec le bouton WhatsApp, qui lui porte
     l accent. Son affichage est pilote par le script de chaque page :
     elle apparait au-dela de 300 px de defilement (display:flex en ligne)
     et reste masquee avant (display:none en ligne). */
  #back-to-top {
    display: none;
    position: fixed; right: 18px; bottom: 82px; z-index: 1099;
    width: 42px; height: 42px; border-radius: 50%;
    align-items: center; justify-content: center;
    border: 1px solid var(--line);
    background: var(--paper); color: var(--ink);
    font-size: 15px; cursor: pointer;
    box-shadow: 0 4px 14px rgba(20, 22, 26, 0.10);
    transition: background-color var(--transition), border-color var(--transition);
  }
  #back-to-top:hover { background: var(--surface); border-color: var(--muted); opacity: 1; }

  /* ---- Barre de reservation mobile ---- */
  .cta-sticky { display: none; }

  /* ---- Bandeau de consentement Analytics ----
     Le HTML porte encore des styles en ligne : les regles ci-dessous les
     completent la ou elles ne se chevauchent pas, et le bloc responsive
     plus bas le remonte au-dessus de la barre mobile (correctif du
     10/09/2026, conserve). */
  #cookie-banner {
    font-family: var(--font-corps);
    font-size: 0.9375rem;
    color: var(--ink);
  }
  #cookie-banner p { color: var(--ink); }

}


/* =====================================================================
   6. UTILITAIRES
   ===================================================================== */
@layer utilitaires {

  /* Apparition douce au defilement, pilotee par le script des pages.
     Desactivee si le visiteur a demande moins d animations. */
  @media (prefers-reduced-motion: no-preference) {
    .rv {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
                  transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: opacity, transform;
    }
    .rv.reveal { opacity: 1; transform: none; }
    .rv-d1 { transition-delay: 0.07s; }
    .rv-d2 { transition-delay: 0.14s; }
    .rv-d3 { transition-delay: 0.21s; }
  }

  .txt-centre { text-align: center; }
  .txt-gauche { text-align: left; }
  .mono { font-family: var(--font-mono); }

}


/* =====================================================================
   7. RESPONSIVE
   ===================================================================== */
@layer responsive {

  /* ---- Tablette ---- */
  @media (max-width: 1024px) {
    .tjbs-inner { grid-template-columns: 1fr; gap: 28px; }
    .tjbs-media { max-width: 320px; margin: 0 auto; }
    .tjbs h2 { text-align: left; }
  }

  /* ---- Menu : bascule en burger ----
     Le menu compte 9 liens plus le bouton Reserver. En dessous de 1150 px
     il ne tient plus sur une ligne : il passait sous le logo et debordait.
     Il bascule donc en panneau lateral des 1150 px, et non 768 px. */
  @media (max-width: 1150px) {
    .burger { display: block; }
    .nav-links {
      position: fixed; top: 0; right: 0;
      width: min(78%, 340px); height: 100vh; height: 100dvh;
      background: var(--paper);
      border-left: 1px solid var(--line);
      flex-direction: column; justify-content: center; align-items: center;
      gap: 4px;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      z-index: 999;
      overflow-y: auto;
      padding: 80px 0 40px;
    }
    .nav-links.nav-active { transform: translateX(0); }
    .nav-links li { margin: 8px 0; }
    .nav-links a { font-size: 1.0625rem; }
  }

  /* Entre 1151 et 1360 px, le menu tient mais serre : on reduit
     legerement le corps et les espacements plutot que de le casser. */
  @media (min-width: 1151px) and (max-width: 1360px) {
    .nav-links { gap: 2px; }
    .nav-links a { font-size: 0.875rem; padding: 8px 7px; }
    .btn-nav { padding: 8px 14px !important; font-size: 0.875rem; }
    .logo { font-size: 1.1875rem; }
    nav { padding-left: 24px; padding-right: 24px; }
  }

  /* ---- Entete en deux colonnes : repli sur une colonne ----
     Sous 900 px, la colonne photo ne fait plus 42 % de l ecran : elle
     passe au-dessus du texte, en pleine largeur, et le texte se centre.
     C est le meme contenu, simplement empile. */
  @media (max-width: 900px) {
    .hero, .page-hero {
      text-align: center;
      min-height: 0;
      padding: calc(var(--nav-h) + 26px) clamp(16px, 5vw, 32px) 46px;
    }
    .hero h1, .page-hero h1, .hero p, .page-hero p {
      margin-left: auto; margin-right: auto;
    }
    .hero::before, .page-hero::before {
      position: static;
      display: block;
      width: 100%;
      height: clamp(280px, 42vh, 360px);
      margin-bottom: 26px;
      box-shadow: var(--ombre-2);
    }
  }

  /* ---- Mobile ---- */
  @media (max-width: 768px) {

    /* Les tableaux de prix ont quatre colonnes. Sur un telephone, ils
       debordaient de 13 px vers la droite, ce qui faisait apparaitre une
       barre de defilement horizontale sur toute la page. On reduit la
       taille et les marges internes, et on autorise le tableau a defiler
       tout seul si le contenu reste trop large. */
    .price-table, .comparison-table, article table {
      display: block; width: 100%;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      font-size: 0.8125rem;
    }
    .price-table th, .price-table td,
    .comparison-table th, .comparison-table td,
    article table th, article table td { padding: 9px 8px; }

    /* v6 : l entete en deux colonnes ne tient pas sur un telephone.
       Le repli est gere plus bas, dans le bloc dedie a 900 px. */

    .photo-item { height: 240px; }

    /* Sur telephone, une carte occupe toute la largeur : on leve le
       plafond de 380 px, sinon elle flotterait au milieu avec des marges. */
    .audience-grid > *, .reassurance-grid > *, .benefits-grid > *, .values-grid > *,
    .articles-grid > *, .two-col > *, .content-grid > *, .faq-grid > *,
    .other-services > *, .gift-cards > *, .gift-steps > *, .myth-grid > *,
    .do-dont > *, .zone-grid > *, .steps-grid > * { max-width: none; }
    .pricing-highlight { padding: 30px 22px; }

    /* Barre de reservation fixe en bas d ecran */
    .cta-sticky {
      display: flex; position: fixed;
      left: 14px; right: 14px; bottom: 14px; z-index: 1200;
      justify-content: center; align-items: center;
      padding: 15px 20px;
      background: var(--accent); color: var(--paper);
      font-family: var(--font-corps); font-weight: 600;
      font-size: 0.9375rem; letter-spacing: 0;
      border-radius: 999px;
      box-shadow: 0 8px 22px rgba(20, 22, 26, 0.22);
    }
    /* Espace en bas de page pour que la barre ne masque pas le contenu. */
    body { padding-bottom: 86px; }

    /* Le bouton WhatsApp remonte au-dessus de la barre de reservation.
       Sur telephone, analytics-events.js le masque au profit de la barre
       CTA en bas d ecran : cette regle ne sert que si ce script ne charge pas. */
    .floating-contact { bottom: 82px; width: 48px; height: 48px; }

    /* La fleche se cale juste au-dessus de la barre CTA mobile (54 px). */
    #back-to-top { bottom: 68px; right: 14px; width: 40px; height: 40px; }

    /* Correctif du 10/09/2026 conserve : le bandeau cookies passait sous
       la barre fixe. Il remonte au-dessus des deux elements flottants.
       Le !important reste necessaire car le bandeau porte encore des
       styles en ligne dans le HTML. */
    #cookie-banner {
      bottom: 140px !important;
      left: 14px !important;
      right: 14px !important;
      max-width: none !important;
    }
  }

  /* ---- Petits telephones (400 px et moins) ---- */
  @media (max-width: 400px) {
    section { padding-left: 16px; padding-right: 16px; }
    .logo { font-size: 1.1875rem; }
    .btn, .btn-filled { padding: 12px 20px; font-size: 0.9rem; }
  }

  /* ---- Impression ---- */
  @media print {
    nav, .floating-contact, .cta-sticky, #cookie-banner, #back-to-top { display: none !important; }
    body { background: #fff; color: #000; padding: 0; }
  }

}


/* =====================================================================
   8. COMPOSANTS PROPRES A CERTAINES PAGES
   Regroupes ici plutot que recopies dans chaque page : une seule source
   pour tout le site. Ce calque passe apres "composants", donc ses regles
   l emportent sur les regles generiques quand les deux se croisent.
   ===================================================================== */
@layer pages {

  /* ---- Carrousel de temoignages (photo LinkedIn, photo rencontre) ----
     Une seule fiche visible a la fois. La classe .active est posee par le
     script de la page : sans le display:none ci-dessous, les 3 fiches
     s afficheraient en meme temps. */
  .testimonial-carousel { max-width: 800px; margin: 0 auto; }
  .testimonial { display: none; }
  .testimonial.active { display: block; }
  .quote { font-size: 1.05rem; font-style: normal; margin-bottom: 20px; color: var(--ink); }
  .author { display: flex; align-items: center; gap: 14px; font-weight: 600; color: var(--ink); }
  .carousel-dots { margin-top: 22px; text-align: center; }
  .dot { display: inline-block; margin: 0 5px; }

  /* ---- Questions frequentes, variante en colonne ---- */
  .faq { max-width: 720px; margin: 0 auto; text-align: left; display: grid; gap: 12px; }
  .faq-question span:first-child { flex: 1; }
  .faq-answer p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }

  /* ---- Cartes de la page Tarifs ---- */
  .other-card .price-small {
    font-family: var(--font-mono); color: var(--ink);
    font-weight: 400; font-size: 1.0625rem;
  }
  .pricing-card .btn { width: 100%; display: block; text-align: center; }

  /* ---- Vignettes du blog ----
     PROBLEME RESOLU ICI (16/09/2026)
     Les photos des articles n ont pas toutes le meme format : certaines
     sont verticales, d autres horizontales, et le sujet n est jamais
     place au meme endroit. Recadrees en "cover" dans une vignette de
     hauteur fixe, les unes perdaient le haut du crane, les autres
     n etaient visibles qu en partie. Remonter le point de cadrage ne
     reglait le probleme que pour une photo sur deux.

     SOLUTION : la photo est affichee EN ENTIER (object-fit: contain), et
     le vide autour d elle est comble par la meme photo, agrandie et
     floutee. Resultat : aucune tete coupee, aucune photo tronquee, et
     aucune bande vide. La couleur du fond s accorde toujours a l image
     puisque c est l image elle-meme.

     Le chemin de la photo est passe par la variable --vignette, posee
     sur le <figure> dans la page. Si elle est absente, la vignette
     retombe simplement sur un fond neutre. */
  .blog-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
  .blog-card figure {
    position: relative; overflow: hidden;
    width: 100%; height: 240px; margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    display: block;
  }
  /* Fond : la meme photo, debordant du cadre puis floutee. */
  .blog-card figure::before {
    content: ''; position: absolute; inset: -30px; z-index: 0;
    background-image: var(--vignette);
    background-size: cover; background-position: center;
    filter: blur(24px) saturate(0.8) brightness(0.95);
  }
  /* Voile tres leger : il separe la photo nette de son fond flou. */
  .blog-card figure::after {
    content: ''; position: absolute; inset: 0; z-index: 1;
    background: rgba(20, 22, 26, 0.10);
  }
  /* Photo nette, entiere, centree. */
  .blog-card img {
    position: relative; z-index: 2;
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block;
  }
  .blog-content { padding: 22px; display: flex; flex-direction: column; flex-grow: 1; }
  .blog-content h3 { font-size: 1.1875rem; margin-bottom: 10px; line-height: 1.35; }
  .blog-content p { color: var(--muted); font-size: 0.9375rem; margin-bottom: 14px; }
  .blog-read { margin-top: auto; color: var(--accent); font-size: 0.9375rem; font-weight: 600; }

  /* ---- Page A propos ---- */
  .bio-container {
    max-width: 820px; margin: 0 auto;
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--rayon); padding: 40px; box-shadow: none;
  }
  .bio-photo {
    width: 200px; height: 200px; object-fit: cover; object-position: top center;
    border-radius: 50%; border: 1px solid var(--line);
    margin: 0 auto 34px; display: block; box-shadow: none;
  }
  .bio-text { font-size: 1.0625rem; font-weight: 400; margin-bottom: 18px; color: var(--ink); text-align: left; }
  .bio-text strong { color: var(--ink); font-weight: 600; }
  .value-item {
    background: var(--paper); border: 1px solid var(--line);
    border-left: 3px solid var(--ink); border-radius: 0 var(--rayon) var(--rayon) 0;
    padding: 16px 20px; text-align: left;
  }
  .value-item h4 {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 400;
    color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 6px;
  }
  .value-item p { font-size: 0.9rem; color: var(--ink); margin: 0; }

  /* ---- Page Contact ---- */
  .hero-inner { max-width: 900px; }
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(320px, 650px) minmax(280px, 420px);
    gap: 28px; align-items: start; justify-content: center;
    max-width: 1180px; margin: 0 auto;
  }
  .box-title { font-family: var(--font-titre); font-size: 1.5rem; letter-spacing: -0.02em; margin-bottom: 10px; }
  .box-text { color: var(--muted); margin-bottom: 22px; font-size: 0.95rem; }
  .divider-top { border-top: 1px solid var(--line); padding-top: 22px; }
  .contact-method {
    display: flex; align-items: center; gap: 14px;
    padding: 16px 0; border-bottom: 1px solid var(--line);
  }
  .contact-method:last-child { border-bottom: none; }
  .contact-method .icon-circle {
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.1rem; color: var(--paper); background: var(--ink); flex-shrink: 0;
  }
  .contact-method .info { text-align: left; }
  .contact-method .info .label {
    font-family: var(--font-mono); font-size: 0.75rem;
    letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px;
  }
  .contact-method .info a, .contact-method .info span.value {
    color: var(--ink); font-weight: 600; font-size: 1rem; word-break: break-word;
  }
  .contact-method .info a:hover { color: var(--accent); text-decoration: underline; }
  .info-list { display: grid; gap: 14px; margin-top: 12px; }
  .info-item { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
  .info-item i, .info-item svg { color: var(--muted); margin-top: 3px; flex-shrink: 0; }
  .info-item p { color: var(--muted); font-size: 0.95rem; margin: 0; }
  .faq-item h3 { font-size: 1.0625rem; margin-bottom: 8px; color: var(--ink); }
  .faq-item p { color: var(--muted); font-size: 0.9375rem; }

  /* Formulaire de contact. Les identifiants et le comportement du script
     ne changent pas, seul l habillage des champs est repris. */
  #tj-contact .tjcf-in {
    width: 100%; box-sizing: border-box;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--rayon-s); color: var(--ink);
    padding: 13px 15px; font-size: 0.95rem; font-family: inherit;
    transition: border-color .25s ease;
  }
  #tj-contact .tjcf-in::placeholder { color: var(--muted); }
  #tj-contact .tjcf-in:focus { outline: none; border-color: var(--accent); }
  #tj-contact #cf-btn {
    background: var(--accent); color: var(--paper); border: 0;
    padding: 14px 24px; border-radius: 999px;
    font-family: var(--font-corps); font-weight: 600; letter-spacing: 0;
    text-transform: none; font-size: 0.95rem; cursor: pointer;
    transition: background-color .25s ease, transform .1s ease;
  }
  #tj-contact #cf-btn:hover { background: var(--accent-fonce); }
  #tj-contact #cf-btn:active { transform: scale(.99); }
  #tj-contact #cf-btn:disabled { opacity: .55; cursor: default; }
  #tj-contact #tj-fiche {
    margin-top: 24px; padding: 16px 18px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--ink); border-radius: 0 var(--rayon) var(--rayon) 0;
  }
  #tj-contact #tj-fiche p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--muted); text-align: left; }
  /* Information RGPD sous le bouton du formulaire. Discrete mais lisible :
     elle doit etre visible sans concurrencer le bouton. */
  .tjcf-rgpd {
    margin: 14px 0 0;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--muted);
    text-align: left;
  }
  .tjcf-rgpd a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
  .tjcf-rgpd a:hover { color: var(--ink); }

  #tj-contact #tj-fiche strong { color: var(--ink); }
  #tj-contact #tj-fiche a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  #tj-contact #tj-fiche a:hover { color: var(--accent-fonce); }

  /* ---- Page Bons cadeaux ----
     Depuis la v6, .page-hero suit exactement le meme modele que .hero
     (entete en deux colonnes). Les regles sont dans la partie STRUCTURE,
     il n y a plus rien de specifique ici. */
  .gift-card { text-align: center; border-top: 3px solid var(--ink); position: relative; }
  .gift-card .gift-icon { font-size: 2rem; margin-bottom: 16px; display: block; }
  .gift-card h3 { margin-bottom: 10px; }
  .gift-card p { color: var(--muted); font-size: 0.9rem; margin-bottom: 18px; }
  .gift-card .gift-price { display: block; margin-bottom: 4px; }
  .gift-card .gift-price-label { display: block; }
  .gift-card .popular-tag {
    position: absolute; top: -1px; right: 20px;
    background: var(--ink); color: var(--paper);
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 400;
    padding: 4px 12px; letter-spacing: 0.08em; text-transform: uppercase;
    border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  }
  .gift-card .btn-order {
    display: inline-block; margin-top: 18px;
    background: var(--accent); border: 1px solid var(--accent); color: var(--paper);
    padding: 11px 24px; border-radius: 999px;
    font-size: 0.9375rem; font-weight: 600; letter-spacing: 0; text-transform: none;
    transition: background-color .25s ease;
  }
  .gift-card .btn-order:hover { background: var(--accent-fonce); border-color: var(--accent-fonce); color: var(--paper); }
  .gift-how {
    max-width: 880px; margin: 0 auto 46px;
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--ink); border-radius: 0 var(--rayon) var(--rayon) 0;
    padding: 36px clamp(20px, 4vw, 44px);
  }
  .gift-how h3 {
    font-family: var(--font-mono); color: var(--muted); font-size: 0.8125rem;
    font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 26px; text-align: center;
  }
  .gift-step { text-align: center; }
  .gift-step .step-num {
    width: 40px; height: 40px; background: var(--ink); color: var(--paper);
    font-family: var(--font-mono); font-weight: 400; font-size: 1rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin: 0 auto 12px;
  }
  .gift-step h4 { margin-bottom: 6px; }
  .gift-step p { color: var(--muted); font-size: 0.85rem; margin: 0; }
  .gift-security { max-width: 880px; margin: 0 auto 46px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .gift-security-item {
    flex: 1 1 260px; max-width: 380px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--rayon);
    padding: 20px 22px; display: flex; align-items: flex-start; gap: 14px; text-align: left;
  }
  .gift-security-item .sec-icon { font-size: 1.35rem; flex-shrink: 0; margin-top: 2px; }
  .gift-security-item h4 { font-size: 0.95rem; margin-bottom: 4px; }
  .gift-security-item p { color: var(--muted); font-size: 0.85rem; margin: 0; }
  .gift-cta-box {
    max-width: 720px; margin: 0 auto; text-align: center;
    background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--ink);
    border-radius: var(--rayon); padding: 46px clamp(20px, 4vw, 40px);
  }
  .gift-cta-box h2 { font-size: var(--t-h2); margin-bottom: 12px; }
  .gift-cta-box p { color: var(--muted); margin-bottom: 24px; }
  .breadcrumb span { color: var(--ink); }

  /* ---- Mentions legales ---- */
  a.link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  a.link:hover { color: var(--accent-fonce); }
  .back-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--muted); font-size: 0.9rem; margin-top: 44px;
  }
  .back-link:hover { color: var(--ink); }

  /* ---- Articles de conseil ---- */
  .article-meta span { display: inline-flex; align-items: center; gap: 6px; }
  .cta h3 { font-family: var(--font-titre); font-size: var(--t-h3); margin-bottom: 12px; }
  .steps-list { display: flex; flex-direction: column; gap: 18px; margin: 28px 0; }
  .step-item { display: flex; gap: 18px; align-items: flex-start; text-align: left; }
  .step-content h3 { margin: 0 0 6px; font-size: 1.0625rem; }
  .step-content p { margin: 0; font-size: 0.95rem; color: var(--muted); }
  .myth-card .myth-label {
    font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px;
  }
  .myth-card .myth-text { font-size: 0.9375rem; color: var(--muted); margin-bottom: 12px; }
  .myth-card .reality { font-size: 0.9375rem; color: var(--ink); }
  .myth-card .reality strong { color: var(--ink); }

  /* A faire / a eviter : le vert et le rouge sont conserves. Ce sont des
     reperes de lecture, pas de la decoration. Ils sont simplement
     desatures pour ne pas jurer avec la palette. */
  .do-card li, .dont-card li {
    font-size: 0.9375rem; color: var(--ink); padding: 6px 0;
    border-bottom: 1px solid var(--line); list-style: none;
  }
  .do-card li:last-child, .dont-card li:last-child { border-bottom: none; }
  .do-card li::before { content: '\2713\00a0'; color: #3F7A3A; font-weight: 700; }
  .dont-card li::before { content: '\2715\00a0'; color: #A8443C; font-weight: 700; }

  .color-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; }
  .swatch {
    width: 60px; height: 60px; border-radius: var(--rayon-s);
    border: 1px solid var(--line);
    display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  }
  .swatch span {
    font-family: var(--font-mono); font-size: 9px; color: #fff;
    background: rgba(0,0,0,.55); padding: 1px 4px; border-radius: 2px;
  }

  /* ---- Articles au format tj26 (photo rencontre) ---- */
  .tj26-hero { padding-top: calc(var(--nav-h) + 40px); }
  .tj26-cta { text-align: center; margin: 34px 0 0; }
  .tj26-grid {
    display: grid; gap: 10px;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    margin: 26px 0 8px;
  }
  .tj26-fig { margin: 0; }
  .tj26-fig img {
    width: 100%; height: auto; display: block;
    border-radius: var(--rayon-s); object-fit: cover; aspect-ratio: 4/5;
  }
  .tj26-note { font-size: 0.9rem; color: var(--muted); max-width: 68ch; }
  @media (max-width: 600px) {
    .tj26-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  }

  /* ---- Responsive des blocs ci-dessus ---- */
  @media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 768px) {
    .bio-container { padding: 26px 20px; }
    .bio-photo { width: 160px; height: 160px; margin-bottom: 26px; }
    .gift-how { padding: 26px 20px; }
    .blog-card figure { height: 220px; }
  }

  /* =================================================================
     BANDE SOMBRE : la mise en evidence (nouveau en v6)
     =================================================================
     Une page alterne des bandes papier et des bandes secondaires. Pour
     faire ressortir UN bloc en particulier (les tarifs, l appel a
     l action), on lui donne la classe "bande-sombre" dans le HTML :

         <section class="bande-sombre"> ... </section>

     COMMENT CA MARCHE
     La regle ne repeint pas chaque element un par un. Elle redefinit les
     variables de couleur pour toute la bande. Tout ce qui est a
     l interieur, y compris les anciens attributs style="color:var(--muted)"
     restes dans les pages, s inverse donc automatiquement.

     REGLE D USAGE : une seule bande sombre par page, sinon l effet de
     mise en evidence disparait. */
  .bande-sombre {
    --paper:   #1E2126;   /* fond des cartes posees dans la bande */
    --ink:     #F6F5F2;   /* texte */
    --surface: #262A30;   /* encadres internes */
    --line:    #333940;   /* filets */
    --muted:   #A2A8B0;   /* texte secondaire, contraste 7,4:1 sur le fond */
    --accent:        #F6F5F2;  /* sur fond sombre, l action est un bouton blanc */
    --accent-fonce:  #FFFFFF;
    --bg: var(--paper); --text: var(--ink);
    --secondary: var(--surface); --border: var(--line);

    background: #14161A;
    color: #F6F5F2;
    border-top: 1px solid #14161A;
    border-bottom: 1px solid #14161A;
  }
  .bande-sombre h1, .bande-sombre h2, .bande-sombre h3,
  .bande-sombre h4, .bande-sombre strong, .bande-sombre b { color: #F6F5F2; }
  .bande-sombre p, .bande-sombre li { color: #A2A8B0; }
  .bande-sombre .section-title::after { background: #F6F5F2; }

  /* Les cartes de la bande sont plus claires que le fond : c est ce
     decalage, et non une ombre, qui cree le relief sur fond sombre. */
  .bande-sombre .audience-card, .bande-sombre .reassurance-card,
  .bande-sombre .benefit-card, .bande-sombre .benefit, .bande-sombre .zone-card,
  .bande-sombre .other-card, .bande-sombre .gift-card, .bande-sombre .blog-card,
  .bande-sombre .pricing-card, .bande-sombre .testimonial {
    background: #1E2126;
    border-color: #333940;
    box-shadow: none;
  }
  .bande-sombre .audience-card:hover, .bande-sombre .reassurance-card:hover,
  .bande-sombre .benefit-card:hover, .bande-sombre .benefit:hover,
  .bande-sombre .zone-card:hover, .bande-sombre .other-card:hover,
  .bande-sombre .gift-card:hover, .bande-sombre .blog-card:hover,
  .bande-sombre .pricing-card:hover {
    border-color: #5A626C;
    background: #23272D;
    box-shadow: none;
  }

  /* Boutons : le bouton principal devient blanc, le secondaire garde un
     contour clair. Le bleu d accent serait illisible sur ce fond. */
  .bande-sombre .btn, .bande-sombre .tj26-btn, .bande-sombre .tjbs-cta {
    color: #F6F5F2; border-color: rgba(246, 245, 242, 0.45); background: transparent;
  }
  .bande-sombre .btn:hover, .bande-sombre .tj26-btn:hover, .bande-sombre .tjbs-cta:hover {
    color: #F6F5F2; background: rgba(246, 245, 242, 0.12); border-color: #F6F5F2;
  }
  .bande-sombre .btn-filled, .bande-sombre .btn-reserve, .bande-sombre .btn-gift,
  .bande-sombre .pricing-card.featured .btn {
    background: #F6F5F2; border-color: #F6F5F2; color: #14161A;
  }
  .bande-sombre .btn-filled:hover, .bande-sombre .btn-reserve:hover,
  .bande-sombre .btn-gift:hover, .bande-sombre .pricing-card.featured .btn:hover {
    background: #FFFFFF; border-color: #FFFFFF; color: #14161A;
  }

  /* Dans une bande deja sombre, la formule recommandee ne peut pas se
     distinguer en devenant sombre : elle s eclaircit au contraire. */
  .bande-sombre .pricing-card.featured {
    --paper: #F6F5F2; --ink: #14161A; --surface: #EAE6DE;
    --line: #D8D4CC; --muted: #6B7078;
    --accent: #17395B; --accent-fonce: #0F2740;
    background: #F6F5F2; border-color: #F6F5F2; color: #14161A;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45);
  }
  .bande-sombre .pricing-card.featured:hover { border-color: #FFFFFF; background: #FFFFFF; }
  .bande-sombre .pricing-card.featured h3,
  .bande-sombre .pricing-card.featured .price,
  .bande-sombre .pricing-card.featured strong { color: #14161A; }
  .bande-sombre .pricing-card.featured p,
  .bande-sombre .pricing-card.featured li { color: #6B7078; }
  .bande-sombre .pricing-card.featured .badge { background: #14161A; color: #F6F5F2; }
  .bande-sombre .pricing-card.featured .btn,
  .bande-sombre .pricing-card.featured .btn-filled {
    background: #17395B; border-color: #17395B; color: #F6F5F2;
  }
  .bande-sombre .pricing-card.featured .btn:hover,
  .bande-sombre .pricing-card.featured .btn-filled:hover {
    background: #0F2740; border-color: #0F2740; color: #F6F5F2;
  }

  /* Le bloc de tarifs d une bande sombre porte l action principale : son
     bouton passe en blanc plein plutot qu en contour. */
  .bande-sombre .pricing-highlight .btn,
  .bande-sombre .cta-box .btn, .bande-sombre .cta .btn {
    background: #F6F5F2; border-color: #F6F5F2; color: #14161A;
  }
  .bande-sombre .pricing-highlight .btn:hover,
  .bande-sombre .cta-box .btn:hover, .bande-sombre .cta .btn:hover {
    background: #FFFFFF; border-color: #FFFFFF; color: #14161A;
  }

  /* Liens, pastilles et encadres internes a la bande. */
  .bande-sombre a { color: #F6F5F2; }
  .bande-sombre .badge, .bande-sombre .article-tag, .bande-sombre .popular-tag {
    background: rgba(246, 245, 242, 0.14); color: #F6F5F2;
  }
  .bande-sombre .tip-box, .bande-sombre .cta-box, .bande-sombre .info-box,
  .bande-sombre .side-box, .bande-sombre .contact-box, .bande-sombre .tj26-encadre {
    background: #1E2126; border-color: #333940; border-left-color: #F6F5F2;
  }
  .bande-sombre .faq-item, .bande-sombre .faq-question { border-color: #333940; color: #F6F5F2; }
  .bande-sombre .faq-answer, .bande-sombre .faq-answer p { color: #A2A8B0; }

}