/* ============================================================
   responsive.css — Optimisation multi-appareils
   Benoit Gros — Praticien en hypnose
   ------------------------------------------------------------
   Feuille chargée APRÈS le <style> de chaque page : elle affine
   l'affichage sur tablette et téléphone et ajoute les correctifs
   propres à iOS et Android. Le rendu ordinateur (>= 1025 px)
   n'est volontairement pas modifié.
   ============================================================ */

/* ---------- 1. Correctifs globaux iOS / Android ---------- */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:clip;            /* garde-fou anti-debordement horizontal */
}
a,button,summary,input,textarea,label{
  -webkit-tap-highlight-color:rgba(15,58,87,.12);
}
img,svg,iframe{ max-width:100%; }

/* Champs de formulaire a 16px mini : evite le zoom auto d'iOS Safari */
input,textarea,select,
.cform input,.cform textarea{ font-size:16px; }

/* Encoche / bords arrondis (iPhone) : marges laterales sures */
@supports(padding:max(0px)){
  .wrap{
    padding-left:max(24px,env(safe-area-inset-left));
    padding-right:max(24px,env(safe-area-inset-right));
  }
}

/* Ancres internes : la cible n'est plus cachee sous l'en-tete collant */
:target{ scroll-margin-top:120px; }

/* Bandeau d'accueil : hauteur stable malgre la barre d'outils mobile */
@supports(height:100dvh){
  .hero{ min-height:clamp(460px,60dvh,560px); }
}

/* ---------- 2. Tablette (<= 1024 px) ---------- */
@media(max-width:1024px){
  section{ padding:66px 0; }
  .hero-inner{ gap:40px; }
}
@media(min-width:901px) and (max-width:1120px){
  header nav ul{ gap:16px; }
  header nav a:not(.btn){ font-size:.86rem; }
  header nav a.btn{ font-size:1.05rem; padding:10px 20px; margin-left:8px; }
}

/* ---------- 3. Grand telephone / petite tablette (<= 760 px) ---------- */
@media(max-width:760px){
  .nav{ height:88px; }
  nav ul{ top:88px; }
  :target{ scroll-margin-top:100px; }
  section{ padding:56px 0; }
  .section-head{ margin-bottom:38px; }
  nav ul.open{ padding:16px 22px; gap:4px; }
  header nav ul.open a:not(.btn){
    display:block; padding:13px 2px; font-size:1rem;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  header nav ul.open a.btn{ margin:12px 0 2px; text-align:center; }
}

/* ---------- 4. Telephone (<= 560 px) ---------- */
@media(max-width:560px){
  .wrap{ padding:0 18px; }
  section{ padding:46px 0; }
  .section-head{ margin-bottom:30px; }
  header .brand{ gap:12px; margin-right:12px; }
  header .brand .txt{ font-size:1.5rem; -webkit-text-stroke:0; }
  header .brand .brand-logo{ width:44px; height:44px; }
  .hero h1{ font-size:clamp(1.7rem,7vw,2.1rem); }
  .section-head h2{ font-size:clamp(1.6rem,6.4vw,2rem); }
  .hero-cta{ width:100%; }
  .hero-cta .btn{ width:100%; text-align:center; }
  .cform .btn{ width:100%; justify-self:stretch; text-align:center; }
  .hero-meta{ gap:18px; }
}

/* ---------- 5. Tres petit telephone (<= 380 px) ---------- */
@media(max-width:380px){
  .wrap{ padding:0 15px; }
  header .brand .txt{ font-size:1.3rem; }
  .hero .hero-content{ padding-left:20px; padding-right:20px; }
}