:root {
      --lin:       #f3ece0;
      --creme:     #faf6ef;
      --brique:    #b85c3a;
      --brique-cl: #d4845f;
      --terre:     #7a5c3f;
      --mousse:    #5e7052;
      --mousse-cl: #8fa37f;
      --encre:     #2c2318;
      --gris:      #9e9187;
      --or:        #c8963a;
      --bordure:   #ddd3c4;
    }

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

    body {
      background: var(--encre);
      color: var(--encre);
      font-family: 'Source Serif 4', serif;
      font-weight: 300;
      overflow-x: hidden;
    }

    #page { max-width: 1920px; margin: 0 auto; background: var(--creme); box-shadow: 0 0 60px rgba(0,0,0,0.2); }

    body::after {
      content:'';
      position:fixed; inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
      pointer-events:none; z-index:9000;
    }

    /* ══ NAV ══ */
    nav {
      /*position: sticky; top:0; z-index:200;*/
      background: var(--creme);
      border-bottom: 1px solid var(--bordure);
      padding: 1rem 3rem;
      display: flex; justify-content: space-between; align-items: center;
    }
    .nav-logo { display:flex; flex-direction:column; line-height:1; }
    .nav-logo-nom { font-family:'Caveat',cursive; font-size:1.55rem; font-weight:700; color:var(--encre); }
    .nav-logo-nom span { color:var(--brique); }
    .nav-logo-base { font-size:0.65rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--gris); font-style:italic; padding-top:0.15rem; }
    .nav-btn { background:var(--brique); color:white; padding:0.65rem 1.5rem; font-family:'Source Serif 4',serif; font-size:0.82rem; text-decoration:none; letter-spacing:0.03em; transition:background 0.25s; }
    .nav-btn:hover { background:var(--terre); }

    /* ══ HERO ══ */
    #hero {
      background: var(--lin);
      border-bottom: 1px solid var(--bordure);
      display: grid; grid-template-columns: 1.1fr 1fr;
      align-items: center; gap: 3rem;
      padding: 2rem 3rem 4.5rem;
      position: relative; overflow: hidden;
      height: 85vh; max-height: 850px; min-height: 680px;
    }
    #hero::before { content:''; position:absolute; right:-80px; top:-80px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(94,112,82,0.07) 0%, transparent 70%); pointer-events:none; }
    .hero-eyebrow { display:inline-flex; align-items:center; gap:0.7rem; font-size:0.8rem; font-style:italic; color:var(--gris); margin-bottom:1.4rem; }
    .hero-eyebrow::before { content:''; width:28px; height:1px; background:var(--bordure); display:block; }
    h1.hero-titre { font-family:'Lora',serif; font-size:clamp(2.4rem,4.2vw,3.6rem); font-weight:600; line-height:1.15; color:var(--encre); margin-bottom:0.5rem; }
    .hero-accroche { font-family:'Caveat',cursive; font-size:clamp(1.4rem,2.6vw,2rem); color:var(--brique); font-weight:600; margin-bottom:1.8rem; line-height:1.4; }
    .hero-desc { font-size:1rem; line-height:1.9; color:var(--terre); max-width:430px; margin-bottom:2.5rem; }
    .hero-deux-canaux { display:flex; gap:1.5rem; margin-bottom:2.8rem; flex-wrap:wrap; }
    .canal { display:flex; align-items:center; gap:0.6rem; font-size:0.85rem; color:var(--encre); }
    .canal-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .canal-dot.physique { background:var(--brique); }
    .canal-dot.ligne { background:var(--mousse); }
    .hero-btns { display:flex; gap:1rem; flex-wrap:wrap; }
    .btn-plein { background:var(--mousse); color:white; padding:0.9rem 2rem; font-family:'Source Serif 4',serif; font-size:0.88rem; text-decoration:none; letter-spacing:0.02em; transition:background 0.25s, transform 0.2s; }
    .btn-plein:hover { background:var(--encre); transform:translateY(-2px); }
    .btn-contour { border:1.5px solid var(--bordure); color:var(--terre); padding:0.9rem 2rem; font-family:'Source Serif 4',serif; font-size:0.88rem; text-decoration:none; background:transparent; letter-spacing:0.02em; transition:border-color 0.25s, color 0.25s; }
    .btn-contour:hover { border-color:var(--terre); color:var(--encre); }
    .hero-illus { display:flex; align-items:center; justify-content:center; animation:flottement 7s ease-in-out infinite; }
    @keyframes flottement { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

    /* ══ BANDEAU ══ */
    .bandeau { background:var(--brique); padding:0.9rem 0; overflow:hidden; white-space:nowrap; }
    .bandeau-track { display:inline-flex; animation:defiler 26s linear infinite; }
    .bandeau-item { font-family:'Caveat',cursive; font-size:1.05rem; color:rgba(255,255,255,0.9); padding:0 2.5rem; }
    .bandeau-item.sep { color:rgba(255,255,255,0.4); }
    @keyframes defiler { from{transform:translateX(0)} to{transform:translateX(-50%)} }

    /* ══ SECTIONS ══ */
    .bloc { padding:5.5rem 3rem; }
    .etiquette { font-family:'Caveat',cursive; font-size:1.05rem; color:var(--mousse); letter-spacing:0.05em; display:block; margin-bottom:0.5rem; }
    h2.ts { font-family:'Lora',serif; font-size:clamp(1.8rem,3vw,2.7rem); font-weight:600; line-height:1.22; color:var(--encre); }
    h2.ts em { font-style:italic; color:var(--brique); }
    .trait { width:48px; height:2px; background:var(--or); margin:1.4rem 0 2.4rem; }

    /* ══ POURQUOI ══ */
    #pourquoi { background:var(--creme); display:grid; grid-template-columns:1fr 1fr; gap:0; }
    .pq-gauche { padding:5.5rem 3.5rem 5.5rem 3rem; border-right:1px solid var(--bordure); }
    .pq-gauche p { font-size:0.97rem; line-height:1.95; color:var(--terre); margin-bottom:1.3rem; }
    .pq-droite { padding:5.5rem 3rem 5.5rem 3.5rem; display:flex; flex-direction:column; justify-content:center; }
    .chiffre-ligne { padding:2.2rem 0; border-bottom:1px solid var(--bordure); display:flex; align-items:center; gap:1.5rem; }
    .chiffre-ligne:first-of-type { border-top:1px solid var(--bordure); }
    .chiffre-nb { font-family:'Caveat',cursive; font-size:3.2rem; font-weight:700; color:var(--brique); min-width:90px; line-height:1; }
    .chiffre-txt { font-size:0.9rem; line-height:1.65; color:var(--terre); }

    /* ══ OFFRE ══ */
    #offre { background:var(--lin); border-top:1px solid var(--bordure); border-bottom:1px solid var(--bordure); }
    .offre-intro { max-width:540px; margin-bottom:3.5rem; }
    .offre-intro p { font-size:0.97rem; line-height:1.9; color:var(--terre); }
    .offre-grille { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
    .offre-carte { background:var(--creme); border:1px solid var(--bordure); padding:2.6rem 2.2rem; position:relative; transition:box-shadow 0.3s, transform 0.3s; }
    .offre-carte:hover { box-shadow:0 8px 28px rgba(44,35,24,0.09); transform:translateY(-4px); z-index:2; }
    .offre-carte-num { font-family:'Caveat',cursive; font-size:3.2rem; font-weight:700; color:var(--bordure); position:absolute; top:1rem; right:1.4rem; line-height:1; }
    .offre-icone { margin-bottom:1.5rem; }
    .offre-carte h3 { font-family:'Lora',serif; font-size:1.1rem; font-weight:600; color:var(--encre); margin-bottom:0.7rem; }
    .offre-carte p { font-size:0.88rem; line-height:1.85; color:var(--terre); }
    .offre-tag { display:inline-block; margin-top:1.6rem; font-family:'Caveat',cursive; font-size:0.88rem; color:var(--mousse); border-bottom:1px solid var(--mousse-cl); padding-bottom:1px; }

    /* ══ CRÉATEURS — CARDS DA CUSTOM ══ */
    #createurs { background:var(--creme); }
    .cr-header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:3rem; gap:2rem; flex-wrap:wrap; }
    .cr-header p { max-width:360px; font-size:0.95rem; line-height:1.85; color:var(--terre); }

    .cr-grille {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
      align-items: stretch;
    }

    /* ── Card générique base ── */
    .partner-card {
      border-radius: 2px;
      overflow: hidden;
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
      display: flex;
      flex-direction: column;
    }
    .partner-card:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.12); }

    .partner-card-top {
      padding: 2.8rem 2.5rem 2rem;
      position: relative;
      min-height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
    }

    .partner-badge {
      position: absolute; top: 1.4rem; left: 1.4rem;
      font-size: 0.72rem; letter-spacing: 0.12em;
      text-transform: uppercase;
      padding: 0.3rem 0.85rem;
      font-family: 'Source Serif 4', serif;
      font-weight: 400;
    }

    .partner-deco { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); opacity: 0.75; }

    .partner-nom { font-size: 2rem; line-height: 1.1; margin-bottom: 0.3rem; }
    .partner-type { font-size: 0.82rem; letter-spacing: 0.08em; opacity: 0.7; }

    .partner-card-bot { padding: 2rem 2.5rem; flex: 1; display: flex; flex-direction: column; }
    .partner-card-bot p { font-size:0.9rem; line-height:1.85; margin-bottom:1.4rem; }

    .partner-tags { display:flex; flex-wrap:wrap; gap:0.45rem; margin-top: auto; }
    .partner-tag { padding:0.25rem 0.7rem; font-size:0.82rem; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━
       SOS FLEURS — DA verte/florale
    ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .card-sos { border: 1px solid #c8dbb8; }
    .card-sos .partner-card-top { background: linear-gradient(135deg, #3d5c35 0%, #5e7a4a 60%, #7a9c5e 100%); }
    .card-sos .partner-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.9); border: 1px solid rgba(255,255,255,0.25); border-radius: 20px; }
    .card-sos .partner-nom { font-family: 'Lora', serif; font-style: italic; font-weight: 400; color: white; }
    .card-sos .partner-type { font-family: 'Caveat', cursive; font-size: 1rem; color: rgba(255,255,255,0.75); letter-spacing: 0.05em; }
    .card-sos .partner-card-bot { background: #f4f9f0; }
    .card-sos .partner-card-bot p { color: #3d5c35; }
    .card-sos .partner-tag { background: rgba(94,122,74,0.1); border: 1px solid #c8dbb8; color: #3d5c35; font-family: 'Caveat', cursive; }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━
       LUEUR DU SOIR — DA violette/bougies
    ━━━━━━━━━━━━━━━━━━━━━━━━━━ */
    .card-lueur { border: 1px solid #e6c9f0; }
    .card-lueur .partner-card-top { background: linear-gradient(135deg, #b874d9 0%, #DC9EE6 55%, #f0c8f5 100%); }
    .card-lueur .partner-badge { background: rgba(130,50,160,0.25); color: white; border: 1px solid rgba(130,50,160,0.35); border-radius: 20px; }
    .card-lueur .partner-nom { font-family: 'Lora', serif; font-style: italic; font-weight: 400; color: white; }
    .card-lueur .partner-type { font-family: 'Caveat', cursive; font-size: 1rem; color: rgba(80,20,100,0.8); letter-spacing: 0.05em; }
    .card-lueur .partner-card-bot { background: #faf3fc; }
    .card-lueur .partner-card-bot p { color: #5e4a66; }
    .card-lueur .partner-tag { background: rgba(220,158,230,0.15); border: 1px solid rgba(180,100,210,0.3); color: #7a3a99; font-family: 'Caveat', cursive; }

    /* Slot libre */
    .slot { border:1.5px dashed var(--bordure); background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:3rem 2rem; gap:1.2rem; text-decoration:none; min-height:300px; transition:border-color 0.3s, background 0.3s; }
    .slot:hover { border-color:var(--mousse-cl); background:rgba(94,112,82,0.04); }
    .slot-plus { width:48px; height:48px; border-radius:50%; border:1.5px solid var(--bordure); display:flex; align-items:center; justify-content:center; color:var(--gris); font-size:1.3rem; transition:border-color 0.3s, color 0.3s; }
    .slot:hover .slot-plus { border-color:var(--mousse); color:var(--mousse); }
    .slot p { font-family:'Lora',serif; font-style:italic; font-size:1rem; color:var(--gris); line-height:1.6; }
    .slot span { font-family:'Caveat',cursive; font-size:0.95rem; color:var(--mousse); letter-spacing:0.04em; }

    /* ══ TARIFS ══ */
    #tarifs { background: var(--lin); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }

    .tarifs-intro { max-width: 580px; margin-bottom: 4rem; }
    .tarifs-intro p { font-size:0.97rem; line-height:1.9; color:var(--terre); }

    .tarifs-grille {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      align-items: start;
    }

    .tarif-card {
      background: var(--creme);
      border: 1px solid var(--bordure);
      overflow: hidden;
      position: relative;
      transition: transform 0.3s, box-shadow 0.3s;
    }
    .tarif-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(44,35,24,0.1); z-index:2; }

    .tarif-card.featured { border-color: var(--mousse); }
    .tarif-card.featured .tarif-card-top { background: var(--mousse); }

    .tarif-card-top {
      background: var(--terre);
      padding: 2rem 2.2rem 1.8rem;
    }

    .tarif-badge {
      display: inline-block;
      background: rgba(255,255,255,0.15);
      color: rgba(255,255,255,0.85);
      font-family: 'Caveat', cursive;
      font-size: 0.82rem;
      padding: 0.2rem 0.7rem;
      border-radius: 20px;
      margin-bottom: 1rem;
      letter-spacing: 0.05em;
    }
    .tarif-card.featured .tarif-badge { background: rgba(255,255,255,0.2); }

    .tarif-nom {
      font-family: 'Lora', serif;
      font-size: 1.2rem;
      font-weight: 600;
      color: white;
      margin-bottom: 0.2rem;
    }
    .tarif-nom-sub {
      font-family: 'Caveat', cursive;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.6);
    }

    /* Toggle 3 mois / 1 an */
    .tarif-toggle-wrap {
      display: flex;
      gap: 0;
      margin: 0 0 2.2rem;
      border: 1px solid var(--bordure);
      overflow: hidden;
      width: fit-content;
    }

    .tarif-toggle-btn {
      padding: 0.5rem 1.2rem;
      font-family: 'Caveat', cursive;
      font-size: 0.9rem;
      background: transparent;
      border: none;
      cursor: pointer;
      color: var(--gris);
      transition: background 0.2s, color 0.2s;
      letter-spacing: 0.04em;
    }
    .tarif-toggle-btn.active {
      background: var(--mousse);
      color: white;
    }

    .tarif-card-bot { padding: 2rem 2.2rem; }

    /* Prix dynamiques */
    .tarif-prix-bloc { margin-bottom: 1.8rem; }
    .tarif-prix-principal {
      display: flex;
      align-items: baseline;
      gap: 0.4rem;
      margin-bottom: 0.3rem;
    }
    .tarif-montant {
      font-family: 'Caveat', cursive;
      font-size: 3rem;
      font-weight: 700;
      color: var(--encre);
      line-height: 1;
    }
    .tarif-periode {
      font-size: 0.82rem;
      color: var(--gris);
      font-style: italic;
    }
    .tarif-engagement {
      font-family: 'Caveat', cursive;
      font-size: 0.88rem;
      color: var(--brique);
    }

    .tarif-avantages { list-style: none; margin-bottom: 1.8rem; }
    .tarif-avantages li {
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--bordure);
      display: flex;
      align-items: flex-start;
      gap: 0.8rem;
      font-size: 0.88rem;
      line-height: 1.55;
      color: var(--terre);
    }
    .tarif-avantages li:first-child { border-top: 1px solid var(--bordure); }
    .tarif-check {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--mousse);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; margin-top: 0.15rem;
    }
    .tarif-check svg { width: 9px; height: 9px; }

    .tarif-commission {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1rem;
      padding: 0.5rem 1rem;
      background: rgba(184,92,58,0.07);
      border: 1px solid rgba(184,92,58,0.18);
      font-size: 0.82rem;
      color: var(--brique);
      width: 100%;
    }
    .tarif-commission strong { font-weight: 600; }

    .tarif-note {
      font-size: 0.78rem;
      font-style: italic;
      color: var(--gris);
      line-height: 1.7;
      margin-top: 1rem;
    }

    .btn-tarif {
      display: block;
      margin-top: 1.6rem;
      background: var(--brique);
      color: white;
      padding: 0.85rem 2rem;
      font-family: 'Source Serif 4', serif;
      font-size: 0.85rem;
      text-decoration: none;
      letter-spacing: 0.02em;
      text-align: center;
      transition: background 0.25s, transform 0.2s;
    }
    .btn-tarif:hover { background: var(--terre); transform: translateY(-2px); }
    .tarif-card.featured .btn-tarif { background: var(--mousse); }
    .tarif-card.featured .btn-tarif:hover { background: var(--encre); }

    /* ══ FAQ ══ */
    #faq { background: var(--creme); }

    .faq-layout {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 5rem;
      align-items: start;
    }

    .faq-intro p { font-size:0.97rem; line-height:1.9; color:var(--terre); }

    .faq-liste { display: flex; flex-direction: column; gap: 0; }

    .faq-item {
      border-bottom: 1px solid var(--bordure);
    }
    .faq-item:first-child { border-top: 1px solid var(--bordure); }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      text-align: left;
      padding: 1.5rem 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
      cursor: pointer;
      font-family: 'Lora', serif;
      font-size: 1rem;
      font-weight: 600;
      color: var(--encre);
      transition: color 0.2s;
    }
    .faq-question:hover { color: var(--brique); }

    .faq-chevron {
      width: 22px; height: 22px;
      border: 1px solid var(--bordure);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: transform 0.3s, border-color 0.2s, background 0.2s;
    }
    .faq-question:hover .faq-chevron { border-color: var(--brique); }

    .faq-item.open .faq-chevron {
      transform: rotate(180deg);
      background: var(--brique);
      border-color: var(--brique);
    }
    .faq-item.open .faq-chevron svg path { stroke: white; }

    .faq-reponse {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
    }

    .faq-item.open .faq-reponse {
      max-height: 500px;
    }

    .faq-reponse-inner {
      padding: 0 0 1.8rem;
      font-size: 0.93rem;
      line-height: 1.9;
      color: var(--terre);
    }
    .faq-reponse-inner strong { color: var(--encre); font-weight: 600; }

    /* ══ REJOINDRE ══ */
    #rejoindre { display:grid; grid-template-columns:1fr 1.2fr; }
    .rj-gauche { background:var(--terre); padding:5.5rem 3.5rem; display:flex; flex-direction:column; justify-content:center; }
    .rj-gauche .etiquette { color:rgba(240,235,225,0.55); }
    .rj-gauche h2 { font-family:'Lora',serif; font-size:clamp(1.8rem,2.8vw,2.5rem); font-weight:600; line-height:1.25; color:var(--lin); margin-bottom:0.6rem; }
    .rj-gauche h2 em { font-style:italic; color:var(--brique-cl); }
    .rj-gauche .trait { background:rgba(255,255,255,0.2); }
    .rj-gauche p { font-size:0.95rem; line-height:1.9; color:rgba(240,235,225,0.6); margin-bottom:1.3rem; }
    .canaux-bloc { margin:2rem 0 2.5rem; display:flex; flex-direction:column; gap:1rem; }
    .canal-item { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); padding:1.1rem 1.4rem; display:flex; align-items:center; gap:1rem; }
    .canal-puce { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .canal-puce.ph { background:var(--brique); }
    .canal-puce.on { background:var(--mousse); }
    .canal-item-txt strong { display:block; font-family:'Caveat',cursive; font-size:1rem; color:var(--lin); letter-spacing:0.03em; }
    .canal-item-txt span { font-size:0.8rem; color:rgba(240,235,225,0.5); font-style:italic; }
    .rs-titre { font-family:'Caveat',cursive; font-size:0.9rem; color:rgba(240,235,225,0.45); margin-bottom:0.8rem; letter-spacing:0.06em; }
    .rs-liste { display:flex; gap:0.7rem; flex-wrap:wrap; }
    .rs-lien { font-family:'Caveat',cursive; font-size:0.9rem; color:rgba(240,235,225,0.7); text-decoration:none; border:1px solid rgba(255,255,255,0.12); padding:0.35rem 0.9rem; transition:border-color 0.25s, color 0.25s; }
    .rs-lien:hover { border-color:var(--brique-cl); color:white; }
    .rj-droite { background:var(--creme); padding:5.5rem 3rem 5.5rem 3.5rem; }
    .rj-droite .etiquette { color:var(--mousse); }
    .rj-droite h2 { font-family:'Lora',serif; font-size:1.55rem; font-weight:600; color:var(--encre); margin-bottom:0.5rem; }
    .rj-droite .trait { width:36px; background:var(--brique-cl); margin:1.2rem 0 2rem; }
    .champ { margin-bottom:1.2rem; }
    .champ label { display:block; font-family:'Caveat',cursive; font-size:0.9rem; color:var(--gris); margin-bottom:0.4rem; letter-spacing:0.05em; }
    .champ input, .champ textarea, .champ select { width:100%; background:var(--lin); border:1px solid var(--bordure); color:var(--encre); padding:0.75rem 1rem; font-family:'Source Serif 4',serif; font-size:0.9rem; font-weight:300; outline:none; transition:border-color 0.25s; appearance:none; }
    .champ input:focus, .champ textarea:focus, .champ select:focus { border-color:var(--mousse); }
    .champ input::placeholder, .champ textarea::placeholder { color:var(--gris); font-style:italic; }
    .champ select option { background:white; }
    .champ textarea { min-height:90px; resize:vertical; }
    .champs-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
    .btn-envoyer { margin-top:0.6rem; background:var(--brique); color:white; border:none; padding:0.9rem 2.2rem; font-family:'Source Serif 4',serif; font-size:0.88rem; letter-spacing:0.02em; cursor:pointer; transition:background 0.25s, transform 0.2s; }
    .btn-envoyer:hover { background:var(--terre); transform:translateY(-2px); }

    /* ══ FOOTER ══ */
    footer { background:var(--encre); border-top:3px solid var(--brique); padding:2.5rem 3rem; display:flex; justify-content:space-between; align-items:center; }
    .footer-logo-nom { font-family:'Caveat',cursive; font-size:1.4rem; font-weight:700; color:var(--lin); }
    .footer-logo-nom span { color:var(--brique-cl); }
    .footer-baseline { font-size:0.7rem; font-style:italic; color:rgba(240,235,225,0.35); letter-spacing:0.1em; margin-top:0.2rem; }
    .footer-info { text-align:right; font-size:0.75rem; font-style:italic; color:rgba(240,235,225,0.3); line-height:1.7; }

    /* ══ REVEAL ══ */
    .r { opacity:0; transform:translateY(20px); transition:opacity 0.8s ease, transform 0.8s ease; }
    .r.v { opacity:1; transform:translateY(0); }
    .d1{transition-delay:0.1s} .d2{transition-delay:0.2s} .d3{transition-delay:0.3s}


    /* Retour en colonne unique dès que les cards sont trop serrées */
    @media(max-width:740px){
      .cr-grille { grid-template-columns: 1fr; }
      .cr-grille .slot { grid-column: span 1 !important; }
    }

    /* ══ RESPONSIVE ══ */
    @media(max-width:880px){
      nav{ padding:1rem 1.5rem; }
      #hero{ grid-template-columns:1fr; padding:4rem 1.5rem 3rem; gap:2.5rem; }
      .hero-illus{ display:none; }
      .bloc{ padding:4rem 1.5rem; }
      #pourquoi{ grid-template-columns:1fr; }
      .pq-gauche{ border-right:none; border-bottom:1px solid var(--bordure); padding:4rem 1.5rem; }
      .pq-droite{ padding:4rem 1.5rem; }
      .offre-grille{ grid-template-columns:1fr; gap:1px; }
      .cr-grille{ grid-template-columns:1fr; }
      .cr-grille .slot{ grid-column: span 1 !important; }
      .slot{ min-height:160px; }
      .tarifs-grille{ grid-template-columns:1fr; gap:1px; }
      .faq-layout{ grid-template-columns:1fr; gap:2rem; }
      #rejoindre{ grid-template-columns:1fr; }
      .rj-gauche{ padding:3rem 1.5rem; }
      .rj-droite{ padding:3rem 1.5rem; }
      .champs-2{ grid-template-columns:1fr; }
      .champs-2{ grid-template-columns:1fr; }
      footer{ flex-direction:column; gap:1rem; text-align:center; padding:2rem 1.5rem; }
      .footer-info{ text-align:center; }
      .cr-header{ flex-direction:column; align-items:flex-start; }
    }

    /* LÉGAL */
    .footer-legal{background:#1a110a;padding:1rem 3rem;display:flex;gap:2rem;align-items:center;border-top:1px solid rgba(240,235,225,0.06);flex-wrap:wrap}
    .footer-legal span{font-size:0.72rem;color:rgba(240,235,225,0.35);font-style:italic}
    .footer-legal a{font-size:0.72rem;color:rgba(240,235,225,0.35);text-decoration:none;font-style:italic;transition:color 0.2s;cursor:pointer}
    .footer-legal a:hover{color:var(--brique-cl)}
    .legal-panel{background:var(--lin);border-top:1px solid var(--bordure);display:none}
    .legal-panel.open{display:block}
    .legal-inner{max-width:720px;margin:0 auto;padding:4rem 2rem}
    .legal-inner h3{font-family:'Lora',serif;font-size:1.6rem;font-weight:600;color:var(--encre);margin-bottom:1.5rem}
    .legal-inner p{font-size:0.88rem;line-height:1.85;color:var(--terre);margin-bottom:1.4rem}
    .legal-inner p strong{color:var(--encre);display:block;margin-bottom:0.2rem}
    .legal-close{background:none;border:1px solid var(--bordure);color:var(--gris);padding:0.4rem 1rem;font-family:'Caveat',cursive;font-size:0.9rem;cursor:pointer;float:right;margin-bottom:1.5rem;transition:border-color 0.2s,color 0.2s}
    .legal-close:hover{border-color:var(--brique);color:var(--brique)}
    .legal-inner a { text-decoration: none; color: var(--brique); font-weight:400;}
    .legal-inner a:hover, .legal-inner a:focus { color: var(--terre);}
    @media(max-width:880px){.footer-legal{padding:1rem 1.5rem;gap:1rem}}

    /* iOS safe area */
    #page {
      padding-bottom: env(safe-area-inset-bottom);
    }
    nav {
      padding-top: max(1rem, env(safe-area-inset-top));
    }

    /* iOS Dynamic Island / notch fix */
    nav {
      padding-top: calc(1rem + env(safe-area-inset-top));
      background: var(--creme);
    }
    body {
      background: var(--creme);
    }

    /* Couvre la zone Dynamic Island en permanence au scroll */
    nav::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: env(safe-area-inset-top);
      background: var(--creme);
      z-index: 201;
    }