/* ============================================================
   THEME — "Deep" : profondeur, dégradés, transparence
   Chargé APRÈS style.css. Supprimer la ligne <link> pour revenir au beige.
   ============================================================ */

:root{
  /* --- base claire : os chaud plutôt que beige --- */
  --white:      #ffffff;
  --off-white:  #fbfaf8;
  --cream:      #f4f1ec;
  --parch:      #e9e5de;
  --parch-md:   #d4cec4;
  --warm-paper: #f1eee8;
  --deep-cream: #e3ded4;

  /* --- ancrage : vert-pétrole profond --- */
  --petrol:      #1b3a3a;
  --petrol-mid:  #2d5654;
  --petrol-lt:   #5b8481;
  --petrol-wash: #eef3f2;

  /* --- or, resserré : accent et non plus décor --- */
  --gold:       #a8762f;
  --gold-lt:    #c9a063;
  --gold-dk:    #74501d;
  --amber:      #bf8a3e;

  /* --- textes : encre froide, plus lisible et plus pro --- */
  --text:       #16211f;
  --text-lt:    #45534f;
  --text-xlt:   #7d8784;

  /* --- chaleur humaine --- */
  --clay:       #b5705a;
  --clay-lt:    #d9a894;
  --terracotta: #b5705a;
  --terracotta-dk: #804c3b;

  --sage:       #8fa39a;
  --sage-lt:    #c2cec7;
  --sage-deep:  #4d6560;
  --deep-clay:  #142625;

  /* compat */
  --rose:       #a8762f;
  --rose-lt:    #c9a063;
  --taupe:      #7d8784;
  --blush:      var(--petrol-wash);
  --blush-md:   var(--parch-md);
}

/* ---------- FONDS : dégradés plutôt qu'aplats ---------- */
body{ background:var(--off-white); color:var(--text); }

.bg-white{
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(45,86,84,0.05), transparent 70%),
    var(--white);
}
.bg-parchment{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(168,118,47,0.07), transparent 70%),
    linear-gradient(170deg, var(--cream), var(--parch));
}
.bg-blush{
  background:
    radial-gradient(900px 420px at 85% 0%, rgba(181,112,90,0.08), transparent 70%),
    linear-gradient(180deg, var(--petrol-wash), #e7eeec);
}
/* la section "sauge" devient une respiration profonde */
.bg-sage{
  background:
    radial-gradient(1000px 520px at 50% 0%, rgba(201,160,99,0.12), transparent 65%),
    linear-gradient(165deg, var(--petrol) 0%, var(--petrol-mid) 100%);
  color:#eaf1ef;
}
.bg-sage .title, .bg-sage h2, .bg-sage h3, .bg-sage h4{ color:#f4f8f7; }
.bg-sage .title em, .bg-sage em{ color:var(--gold-lt); }
.bg-sage p, .bg-sage li{ color:#cbd9d6; }
.bg-sage .eyebrow{ color:var(--gold-lt); }
.bg-sage .rule-dot{ color:var(--gold-lt); }
.bg-sage .for-you-grid li{ color:#cbd9d6; border-bottom-color:rgba(201,160,99,0.22); }
.bg-sage .for-you-grid li::before{ border-color:var(--gold-lt); }

/* ---------- CARTES : verre dépoli ---------- */
.tool-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.86), rgba(255,255,255,0.62));
  backdrop-filter:blur(8px) saturate(130%);
  -webkit-backdrop-filter:blur(8px) saturate(130%);
  border:1px solid rgba(45,86,84,0.14);
  box-shadow:0 1px 0 rgba(255,255,255,0.8) inset, 0 14px 40px -26px rgba(22,33,31,0.35);
}
.tool-card:hover{
  border-color:rgba(168,118,47,0.42);
  box-shadow:0 1px 0 rgba(255,255,255,0.9) inset, 0 26px 64px -30px rgba(22,33,31,0.48);
}
.tool-card .tc-n{ color:var(--gold); }
.bg-sage .tool-card{
  background:linear-gradient(160deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border-color:rgba(201,160,99,0.28);
}
.bg-sage .tool-card h3{ color:#f4f8f7; }
.bg-sage .tool-card p{ color:#c3d2cf; }

/* ---------- HERO : voile profond au lieu du voile crème ---------- */
.hero.has-bg::after{
  background:
    linear-gradient(100deg, rgba(27,58,58,0.80) 0%, rgba(27,58,58,0.46) 42%, rgba(27,58,58,0.12) 72%, transparent 100%),
    linear-gradient(180deg, rgba(20,38,37,0.35) 0%, transparent 30%, rgba(20,38,37,0.45) 100%);
}
.hero .hero-title .block{ color:#f6faf9; }
.hero .hero-title .gold{
  background:linear-gradient(100deg, var(--gold-lt), #e6c893 55%, var(--gold-lt));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .hero-tagline{ color:#dbe7e4; }
.hero .hero-credentials{ color:#a8bcb8; }
.hero .hero-credentials .ornament-mini{ background:var(--gold-lt); }
.hero .hero-services-inline a{ color:#dbe7e4; }
.hero .hero-services-inline a:hover{ color:var(--gold-lt); }
.hero .hero-scroll{ color:#a8bcb8; }

/* ---------- NAVIGATION ---------- */
nav.nav-scrolled{
  background:rgba(251,250,248,0.86);
  box-shadow:0 1px 0 rgba(45,86,84,0.12), 0 10px 34px -24px rgba(22,33,31,0.45);
}
.nav-logo{ color:var(--petrol); }
.nav-links a{ color:var(--text-lt); }
.nav-links a.active{ color:var(--gold-dk); }

/* ---------- BOUTONS ---------- */
.btn-rose{
  background:linear-gradient(135deg, var(--petrol), var(--petrol-mid));
  border-color:transparent; color:#fff;
  box-shadow:0 12px 32px -16px rgba(22,33,31,0.7);
}
.btn-rose::after{ background:linear-gradient(135deg, var(--gold-dk), var(--gold)); }
.btn-rose:hover{ color:#fff; box-shadow:0 16px 40px -16px rgba(22,33,31,0.8); }
.btn-outline-rose{ border-color:var(--petrol-mid); color:var(--petrol); }
.btn-outline-rose::after{ background:var(--petrol); }
.btn-outline-rose:hover{ color:#fff; }

/* ---------- BANDEAU DE CONFIANCE ---------- */
.trust{
  background:linear-gradient(180deg, var(--white), var(--petrol-wash));
  border-top-color:rgba(45,86,84,0.16);
  border-bottom-color:rgba(45,86,84,0.16);
}
.trust-item .ti-mark{
  border-color:rgba(168,118,47,0.5); color:var(--gold);
  background:rgba(255,255,255,0.7);
}

/* ---------- ÉTAPES ---------- */
.step-n{
  background:linear-gradient(150deg, #fff, var(--petrol-wash));
  border-color:rgba(45,86,84,0.3); color:var(--petrol);
}
.step:hover .step-n{
  background:linear-gradient(150deg, var(--petrol), var(--petrol-mid));
  border-color:transparent; color:var(--gold-lt);
}
.steps::before{ background:linear-gradient(var(--petrol-lt), transparent); }

/* ---------- MANIFESTO : nuit profonde ---------- */
.manifesto{
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(168,118,47,0.16), transparent 65%),
    linear-gradient(165deg, #142625 0%, #1b3a3a 55%, #244745 100%);
}
.manifesto-text{ color:#eef4f3; }
.manifesto-text em{ color:var(--gold-lt); }
.manifesto-symbol{ color:var(--gold-lt); }
.manifesto-attribution{ color:#8da5a1; }

/* ---------- CTA BAND ---------- */
.cta-band{
  background:
    radial-gradient(800px 380px at 50% 100%, rgba(45,86,84,0.10), transparent 70%),
    linear-gradient(180deg, var(--parch), var(--cream));
}

/* ---------- JOURNAL ---------- */
.blog-item{
  background:linear-gradient(160deg, rgba(255,255,255,0.9), rgba(255,255,255,0.68));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(45,86,84,0.13);
}
.blog-item[open]{ border-color:rgba(168,118,47,0.34); }
.blog-item-cat{ color:var(--gold-dk); }
.blog-filter{ border-color:rgba(45,86,84,0.26); color:var(--text-lt); }
.blog-filter.active{
  background:linear-gradient(135deg, var(--petrol), var(--petrol-mid));
  border-color:transparent; color:#fff;
}

/* ---------- CITATIONS ---------- */
.pull-quote{ border-left-color:var(--gold); }
.pull-quote p{ color:var(--petrol); }
.quote{
  background:linear-gradient(150deg, rgba(255,255,255,0.9), rgba(238,243,242,0.75));
  border-color:rgba(45,86,84,0.16);
}

/* ---------- FOOTER ---------- */
footer{
  background:
    radial-gradient(900px 420px at 50% 0%, rgba(168,118,47,0.10), transparent 65%),
    linear-gradient(170deg, #142625, #1b3a3a);
}

/* ---------- DIVERS ---------- */
.ornament-divider.warm{ color:var(--gold); }
::selection{ background:rgba(45,86,84,0.18); color:var(--text); }
.arc-line .v{ color:var(--petrol); }
.session .sub{ color:var(--gold-dk); }
.statement em{ color:var(--petrol); }

/* ---------- lisibilité sur fond profond (bat les styles inline) ---------- */
.bg-sage p,
.bg-sage .statement,
.bg-sage li{ color:#cbd9d6 !important; }
.bg-sage p em,
.bg-sage .statement em{ color:var(--gold-lt) !important; }
.bg-sage strong{ color:#f0f6f5 !important; }
.bg-sage .btn-outline-rose{ border-color:var(--gold-lt); color:var(--gold-lt); }
.bg-sage .btn-outline-rose::after{ background:var(--gold-lt); }
.bg-sage .btn-outline-rose:hover{ color:var(--petrol); }
.bg-sage .rule span, .bg-sage .rule::before, .bg-sage .rule::after{ background:rgba(201,160,99,0.45); }

/* ============================================================
   PASSE 2 — rythme tonal, matière, finitions
   ============================================================ */

/* ---------- 1. On tue le blanc pur ---------- */
:root{
  --paper-1:  #f7f5f1;   /* papier chaud clair */
  --paper-2:  #eef0ec;   /* papier légèrement refroidi */
  --paper-3:  #e4e8e5;   /* ton moyen, pour casser la série claire */
}
body{ background:var(--paper-1); }

.bg-white{
  background:
    radial-gradient(1100px 520px at 50% -8%, rgba(45,86,84,0.055), transparent 70%),
    linear-gradient(175deg, var(--paper-1) 0%, #f2f1ed 100%);
}
.bg-parchment{
  background:
    radial-gradient(900px 440px at 12% 0%, rgba(168,118,47,0.08), transparent 70%),
    linear-gradient(170deg, var(--paper-2) 0%, var(--paper-3) 100%);
}
.bg-blush{
  background:
    radial-gradient(900px 440px at 88% 0%, rgba(181,112,90,0.07), transparent 70%),
    linear-gradient(180deg, #eef2f0, #e4eae8);
}
.cta-band{
  background:
    radial-gradient(900px 420px at 50% 110%, rgba(45,86,84,0.12), transparent 70%),
    linear-gradient(180deg, var(--paper-3), var(--paper-2));
}
.trust{
  background:linear-gradient(180deg, #fbfaf8, var(--paper-2));
  border-top-color:rgba(45,86,84,0.14);
  border-bottom-color:rgba(45,86,84,0.14);
}

/* ---------- 2. Grain : de la matière sur les dégradés ---------- */
body::after{
  content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:0.040; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- 3. Liaisons douces entre sections ---------- */
section{ position:relative; }
section + section::before{
  content:''; position:absolute; top:0; left:0; right:0; height:90px;
  background:linear-gradient(to bottom, rgba(22,33,31,0.035), transparent);
  pointer-events:none;
}
.bg-sage + section::before, .manifesto + section::before{ display:none; }

/* ---------- 4. Typographie : plus serrée, plus assurée ---------- */
.title{ line-height:1.1; letter-spacing:-0.012em; }
h1{ letter-spacing:-0.018em; }
.eyebrow{ letter-spacing:0.34em; font-size:0.6rem; opacity:0.92; }
.page-header h1{ line-height:1.06; }
.subtitle{ max-width:46ch; margin-left:auto; margin-right:auto; }
.lead{ font-size:1.22rem; line-height:1.68; }
p{ text-wrap:pretty; }
h1,h2,h3,.title{ text-wrap:balance; }

/* ---------- 5. Ornement : variation plutôt que répétition ---------- */
.rule-dot{ opacity:0.85; }
.ornament-divider.warm svg{ opacity:0.75; }

/* ---------- 6. Cartes : relief plus net ---------- */
.tool-card{
  background:linear-gradient(158deg, rgba(255,255,255,0.94), rgba(255,255,255,0.66));
  border-color:rgba(45,86,84,0.13);
}
.bg-parchment .tool-card{
  background:linear-gradient(158deg, rgba(255,255,255,0.88), rgba(255,255,255,0.54));
}

/* ---------- 7. Accordéons : ouverture tenue ---------- */
.blog-item{ transition:box-shadow .45s ease, border-color .45s ease, background .45s ease; }
.blog-item summary{ transition:background .3s ease; }
.blog-item:hover{ border-color:rgba(168,118,47,0.3); }

/* ---------- 8. Accessibilité clavier (et ça fait soigné) ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- 9. Barre de défilement aux couleurs de la marque ---------- */
html{ scrollbar-color:var(--petrol-lt) var(--paper-2); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; }
::-webkit-scrollbar-track{ background:var(--paper-2); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--petrol-lt), var(--petrol-mid));
  border-radius:10px; border:2px solid var(--paper-2);
}
::-webkit-scrollbar-thumb:hover{ background:var(--petrol); }

/* ---------- 10. Formulaires ---------- */
.form input, .form select, .form textarea{
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(45,86,84,0.2);
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.form input:focus, .form select:focus, .form textarea:focus{
  border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 4px rgba(168,118,47,0.12);
}
.form button{
  background:linear-gradient(135deg, var(--petrol), var(--petrol-mid));
  color:#fff; border:none;
  box-shadow:0 12px 30px -16px rgba(22,33,31,0.7);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.form button:hover{
  background:linear-gradient(135deg, var(--gold-dk), var(--gold));
  transform:translateY(-2px);
  box-shadow:0 16px 38px -16px rgba(22,33,31,0.8);
}

/* ---------- Portrait : bloc "à propos" en deux colonnes ---------- */
.about-split{
  display:grid; grid-template-columns:0.85fr 1fr; gap:4rem;
  align-items:center; max-width:1000px; margin:0 auto; text-align:left;
}
@media (max-width:820px){
  .about-split{ grid-template-columns:1fr; gap:2.4rem; max-width:520px; text-align:center; }
}
.about-portrait{ position:relative; }
.about-portrait img{
  width:100%; height:auto; display:block;
  box-shadow:0 30px 70px -34px rgba(22,33,31,0.6);
}
/* filet doré décalé, comme un cadre */
.about-portrait::after{
  content:''; position:absolute; inset:18px -18px -18px 18px;
  border:1px solid rgba(168,118,47,0.45); z-index:-1; pointer-events:none;
}
.about-split .title{ margin-top:0; }
.about-split .rule{ justify-content:flex-start; }
@media (max-width:820px){ .about-split .rule{ justify-content:center; } }

/* ---------- Témoignages ---------- */
.tm-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; max-width:1040px; margin:0 auto; }
@media (max-width:820px){ .tm-grid{ grid-template-columns:1fr; } }
.tm{
  background:linear-gradient(158deg, rgba(255,255,255,0.92), rgba(255,255,255,0.64));
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(45,86,84,0.13);
  padding:2.2rem 2rem 1.8rem; position:relative;
  box-shadow:0 14px 40px -26px rgba(22,33,31,0.35);
}
.tm::before{
  content:'\201C'; position:absolute; top:-6px; left:18px;
  font-family:'Cormorant Garamond',serif; font-size:5rem; line-height:1;
  color:rgba(168,118,47,0.3);
}
.tm p{
  font-family:'Cormorant Garamond',serif; font-size:1.08rem; line-height:1.7;
  color:var(--text-lt); margin:0 0 1.1rem; position:relative; z-index:1;
}
.tm .who{
  font-family:'Jost',sans-serif; font-size:0.66rem; letter-spacing:0.22em;
  text-transform:uppercase; color:var(--gold-dk);
}
/* état vide, en attendant les vrais avis */
.tm-empty{
  max-width:640px; margin:0 auto; text-align:center; padding:3rem 2rem;
  border:1px dashed rgba(168,118,47,0.4);
  background:rgba(255,255,255,0.45);
}
.tm-empty p{ font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.15rem; color:var(--text-lt); margin:0; }

/* ============================================================
   MOBILE — confort tactile et lisibilité
   ============================================================ */
@media (max-width: 760px){

  /* --- bouton menu : cible tactile correcte (était 30x21) --- */
  .nav-toggle{
    width:46px; height:46px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:5px; margin-right:-10px;
  }
  .nav-toggle span{ width:22px; }

  /* --- menu ouvert : panneau plein, confortable --- */
  .nav-links.open{
    padding:0.9rem 1.6rem 1.8rem;          /* le padding horizontal doit rester */
    align-items:stretch;                    /* sinon les <li> font la largeur du texte */
    box-shadow:0 18px 40px -22px rgba(22,33,31,0.5);
    border-top:1px solid rgba(168,118,47,0.2);
  }
  .nav-links.open li{ width:100%; }
  .nav-links.open li a{
    display:flex; align-items:center; justify-content:flex-start;
    width:100%; min-height:54px; padding:0 0.2rem;
    font-size:0.82rem; letter-spacing:0.2em;
  }
  .nav-links.open li a.nav-cta{
    justify-content:center; min-height:52px; margin:1.1rem 0 0 !important;
    width:100%; padding:0 1.5rem !important;
  }

  /* --- hero : tient dans l'écran, respire --- */
  .hero.has-bg{ min-height:92vh; }
  .hero-title{ font-size:clamp(2.6rem, 13vw, 3.4rem); line-height:1.02; }
  .hero-tagline{ font-size:1.02rem; line-height:1.55; max-width:30ch; }
  .hero-cta-group{ flex-direction:column; align-items:flex-start; gap:1.1rem; }
  .hero-cta-group .btn{ width:100%; max-width:300px; text-align:center; min-height:52px;
                        display:flex; align-items:center; justify-content:center; }
  /* liens secondaires du hero : cibles trop petites (17px) */
  .hero-services-inline{ display:flex; flex-wrap:wrap; gap:0.2rem 0.9rem; font-size:0.74rem; }
  .hero-services-inline a{ min-height:40px; display:inline-flex; align-items:center; }
  .hero-scroll{ display:none; }

  /* --- boutons : pleine largeur, faciles à viser --- */
  .btn{ min-height:52px; display:inline-flex; align-items:center; justify-content:center; }
  .cta-band .btns .btn, .cta-band .btn{ width:100%; max-width:320px; }

  /* --- respiration verticale --- */
  section{ padding-top:3.6rem; padding-bottom:3.6rem; }
  .container{ padding-left:1.4rem; padding-right:1.4rem; }
  .title{ font-size:clamp(1.9rem, 8.5vw, 2.4rem); }
  .page-header h1{ font-size:clamp(2.1rem, 11vw, 3rem); }
  .page-header{ padding-top:5.2rem; padding-bottom:3rem; }
  .subtitle{ font-size:1rem; }

  /* --- grilles et cartes --- */
  .tool-card{ padding:1.7rem 1.4rem; }
  .for-you-grid li{ font-size:1.06rem; padding-left:1.7rem; }
  .trust-grid{ gap:2rem 1.2rem; }

  /* --- étapes --- */
  .step-b h3{ font-size:1.32rem; }
  .step-b p{ font-size:0.96rem; }

  /* --- Journal : en-têtes d'accordéon plus confortables --- */
  .blog-item summary{ padding:1.5rem 1.3rem; }
  .blog-item-title{ font-size:1.22rem; line-height:1.25; }
  .blog-item-excerpt{ font-size:0.95rem; }
  .blog-item-content{ padding:0 1.3rem 1.6rem; }
  .blog-filters{ gap:0.5rem; }
  .blog-filter{ min-height:42px; font-size:0.66rem; padding:0 0.9rem; }

  /* --- formulaires : 16px minimum, sinon iOS zoome tout seul --- */
  .form input, .form select, .form textarea{
    font-size:16px; min-height:52px; padding:0.9rem 1rem;
  }
  .form textarea{ min-height:130px; }
  .form button{ min-height:54px; width:100%; font-size:0.8rem; }

  /* --- portrait --- */
  .about-split{ gap:2rem; }
  .about-portrait::after{ inset:12px -12px -12px 12px; }

  /* --- témoignages --- */
  .tm{ padding:1.9rem 1.5rem 1.6rem; }

  /* --- pied de page : liens espacés et cliquables --- */
  footer nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:0.2rem 0.4rem; }
  footer nav a{
    min-height:44px; display:inline-flex; align-items:center;
    padding:0 0.75rem; font-size:0.68rem;
  }
  .footer-contact a{ min-height:44px; display:inline-flex; align-items:center; }

  /* --- CTA flottant : ne masque plus le bas de page --- */
  .mobile-cta{ min-height:54px; display:flex; align-items:center; justify-content:center;
               font-size:0.76rem; letter-spacing:0.2em; }
  /* garder la réserve d'espace : sinon le dernier contenu passe sous le bouton flottant */
  body{ padding-bottom:5.5rem; }
}

/* très petits écrans */
@media (max-width: 380px){
  .hero-title{ font-size:2.35rem; }
  .container{ padding-left:1.15rem; padding-right:1.15rem; }
  .trust-grid{ grid-template-columns:1fr; }
}

/* --- dernières cibles tactiles sous le seuil --- */
@media (max-width: 760px){
  .nav-logo{ min-height:44px; display:inline-flex; align-items:center; }
  .hero-services-inline a{ min-height:44px; }
}

/* --- hero mobile : voile vertical, lisibilité garantie --- */
@media (max-width: 760px){
  .hero.has-bg::after{
    background:
      linear-gradient(180deg,
        rgba(14,30,29,0.70) 0%,
        rgba(14,30,29,0.74) 30%,
        rgba(15,33,32,0.82) 62%,
        rgba(12,26,25,0.93) 100%);
  }
  .hero-title{ text-shadow:0 2px 24px rgba(10,22,21,0.55); }
  .hero-tagline{ color:#e6efed; text-shadow:0 1px 16px rgba(10,22,21,0.6); }
  .hero-credentials{ color:#bfd0cc; }
  .hero-services-inline a{ color:#e6efed; }
}

/* --- en-tête de page : moins de vide sur mobile --- */
@media (max-width: 760px){
  .page-header{ padding-top:4.4rem; padding-bottom:2.2rem; }
  .page-header-line{ height:46px; margin-top:1.4rem; }
  .page-header-frame{ display:none; }
  .page-header-symbol{ margin:1rem 0; }
  .page-header .subtitle{ margin-top:1.1rem; }
  .ornament-divider{ padding:1.8rem 0; }
}

/* --- derniers ajustements tactiles --- */
@media (max-width: 760px){
  .blog-filter{ min-height:44px; }
  /* lien email dans le texte de la page contact */
  .container p a[href^="mailto:"]{ min-height:44px; display:inline-flex; align-items:center; }
}

/* ============================================================
   SAFARI iOS — particularités
   ============================================================ */
@media (max-width: 760px){

  /* 1. Le bouton flottant doit disparaître quand le menu est ouvert */
  body.menu-open .mobile-cta{ opacity:0 !important; pointer-events:none !important; }

  /* 2. Hauteur d'écran : sur iOS, 100vh inclut la barre d'adresse,
        ce qui fait dépasser le contenu. dvh suit la zone réellement visible. */
  .hero.has-bg{ min-height:92vh; }
  @supports (height: 100dvh){
    .hero.has-bg{ min-height:88dvh; }
  }

  /* 3. Menu déroulant : calé sous la barre, défilable si l'écran est court */
  .nav-links.open{
    max-height:calc(100dvh - 66px);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* 4. Encoche et barre d'accueil des iPhone récents */
  .mobile-cta{ padding-bottom:calc(0.9rem + env(safe-area-inset-bottom, 0px)); }
  footer{ padding-bottom:calc(2.5rem + env(safe-area-inset-bottom, 0px)); }

  /* 5. Safari grossit parfois le texte tout seul en mode paysage */
  html{ -webkit-text-size-adjust:100%; }
}

/* 6. Le filigrane en verre dépoli est coûteux sur iPhone : on l'allège */
@media (max-width: 760px){
  .tool-card, .blog-item{
    backdrop-filter:none; -webkit-backdrop-filter:none;
    background:linear-gradient(158deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
  }
}

/* ============================================================
   CORRECTIFS iOS — barre fixe + hauteur du hero
   ============================================================ */
@media (max-width: 760px){

  /* --- BARRE DE NAVIGATION ---
     backdrop-filter + position:fixed = élément qui se détache
     pendant le défilement sur Safari iOS. Fond opaque + calque dédié. */
  nav{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:#fbfaf8 !important;
    transform:translateZ(0);              /* force un calque stable */
    -webkit-transform:translateZ(0);
    will-change:transform;
    border-bottom:1px solid rgba(45,86,84,0.12);
  }
  nav.nav-scrolled{
    background:#fbfaf8 !important;
    box-shadow:0 2px 18px -8px rgba(22,33,31,0.22);
  }

  /* --- HERO : plus de vide ---
     On neutralise les min-height cumulés et on centre le contenu. */
  .hero{
    min-height:auto;
    padding:66px 0 0;
  }
  .hero.has-bg{ min-height:auto; }
  .hero-text-block{
    min-height:auto;
    padding:3.2rem 1.5rem 3.6rem;
    justify-content:center;
  }
  /* hauteur plancher confortable, calée sur la zone réellement visible */
  @supports (height: 100dvh){
    .hero-text-block{ min-height:calc(100dvh - 66px); }
  }
  @supports not (height: 100dvh){
    .hero-text-block{ min-height:calc(100vh - 140px); }
  }

  /* le contenu du hero respire sans se disperser */
  .hero-credentials{ margin-top:2rem; }
  .hero-cta-group{ margin-top:1.6rem; }
}