/* ============================================================
   Dorine Home Organiser — mobile.css
   Surcouche additive chargée APRÈS creative.min.css.
   Objectif : réparer les bugs (reveal Safari, flip cards tactiles,
   débordements) et améliorer l'UX mobile SANS changer le style visuel
   ni le rendu desktop. Tout est isolé en media queries mobiles,
   sauf le correctif reveal (cross-navigateur, sans effet visible ailleurs).
   Retirable proprement : il suffit de délier ce fichier.
   ============================================================ */


/* ════════════════════════════════════════════════════════════
   0. SEO — titre d'accueil en <h1>
   Le titre du masthead est passé de <h2> à <h1> (un <h1> unique et
   descriptif est requis pour le référencement). Le thème stylait
   « header.masthead h1 » avec une taille plus grande que l'ancien h2.
   On fige donc la taille à l'identique du rendu précédent (2rem) pour
   ne rien changer visuellement, à toutes les tailles d'écran.
   ════════════════════════════════════════════════════════════ */
header.masthead h1 {
  font-size: 2rem;
}

/* Performance LCP : on sert l'image du hero en WebP (430 Ko au lieu de 704 Ko)
   avec repli JPG automatique via image-set. Le dégradé d'origine est conservé,
   donc rendu visuel identique. */
header.masthead {
  background-image:
    linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%),
    image-set(
      url("../img/kaboompics_Peony.webp") type("image/webp"),
      url("../img/kaboompics_Peony.jpg") type("image/jpeg")
    );
  background-image:
    linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%),
    -webkit-image-set(
      url("../img/kaboompics_Peony.webp") type("image/webp"),
      url("../img/kaboompics_Peony.jpg") type("image/jpeg")
    );
}


/* ════════════════════════════════════════════════════════════
   1. SCROLL-REVEAL — pilotage par IntersectionObserver (P0)
   Le creative.min.css repose sur « animation-timeline: view() ». Safari 26
   déclare le supporter (CSS.supports renvoie true) mais n'évalue pas la
   timeline ici : aucune animation ne se joue, et le fallback .is-visible du
   thème ne s'active pas non plus → reveal mort sur Safari.
   On reprend donc le contrôle : on neutralise le mécanisme animation-timeline
   et on anime via une transition pilotée par la classe .reveal-in posée par
   mobile.js (IntersectionObserver). Fonctionne sur tous les navigateurs,
   animation comprise. Le rendu visuel (fondu + glissé vers le haut) est
   identique à l'intention d'origine.
   ════════════════════════════════════════════════════════════ */
.js-reveal .data-aos {
  /* on annule l'animation/timeline défaillante */
  animation: none !important;
  animation-timeline: auto !important;
  /* état initial : caché, légèrement décalé vers le bas */
  opacity: 0;
  translate: 0 2.5rem;
  transition: opacity 0.7s ease, translate 0.7s ease;
  will-change: opacity, translate;
}
/* variantes d'origine respectées */
.js-reveal .data-aos[data-animation="fade-left"] { translate: -2rem 0; }
.js-reveal .data-aos[data-animation="fade-in"]   { translate: 0 0; }

/* état révélé */
.js-reveal .data-aos.reveal-in {
  opacity: 1;
  translate: 0 0;
}

/* stagger des cartes (Objectifs/Prestations) via delay de transition —
   sûr ici car c'est une transition, pas une animation de timeline */
.js-reveal .data-aos[data-delay="2"] { transition-delay: 80ms; }
.js-reveal .data-aos[data-delay="3"] { transition-delay: 160ms; }
.js-reveal .data-aos[data-delay="4"] { transition-delay: 240ms; }
.js-reveal .data-aos[data-delay="5"] { transition-delay: 320ms; }
.js-reveal .data-aos[data-delay="6"] { transition-delay: 400ms; }
.js-reveal .data-aos[data-delay="7"] { transition-delay: 480ms; }
.js-reveal .data-aos[data-delay="8"] { transition-delay: 560ms; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal .data-aos {
    transition: none;
    opacity: 1;
    translate: 0 0;
  }
}


/* ════════════════════════════════════════════════════════════
   Tout le reste : MOBILE UNIQUEMENT (≤ 991.98px = breakpoint Bootstrap lg)
   Aucune règle ci-dessous ne s'applique au desktop.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

  /* ── 2. FLIP CARDS : tactiles + fluides ──────────────────────
     Desktop = flip au :hover (inchangé). Mobile = flip au tap via la
     classe .is-flipped posée par mobile.js. Et on rend les dimensions
     fixes (170/310px) fluides pour éviter les débordements. */
  .flip-container,
  .front,
  .back {
    width: 100%;
    max-width: 320px;
    height: 220px;
    margin-inline: auto;
  }
  .flip-container2,
  .front2,
  .back2 {
    width: 100%;
    max-width: 340px;
    height: 340px;
    margin-inline: auto;
  }
  /* Retournement déclenché par le tap (classe JS), pas par le hover */
  .flip-container.is-flipped .flipper { transform: rotateY(180deg); }
  .flip-container2.is-flipped .flipper2 { transform: rotateY(180deg); }
  /* Sur tactile, le :hover « collant » iOS retournerait la carte au scroll :
     on neutralise le hover, seul le tap (JS) agit. */
  .flip-container:hover .flipper,
  .flip-container2:hover .flipper2 { transform: none; }
  .flip-container.is-flipped:hover .flipper,
  .flip-container2.is-flipped:hover .flipper2 { transform: rotateY(180deg); }
  /* Indice visuel discret : la carte est cliquable (curseur + retour tactile) */
  .flip-container, .flip-container2 { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .flip-container:active, .flip-container2:active { filter: brightness(0.98); }


  /* ── 3. ZONES TACTILES ≥ 44px (WCAG 2.2 / Apple HIG) ─────────
     On agrandit les cibles sans changer leur apparence. */
  #mainNav .navbar-nav .nav-item .nav-link {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .navbar-toggler { padding: 0.5rem 0.75rem; }
  /* Icônes sociales de la navbar : zone de tap confortable */
  #navbarTogglerDemo03 > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0.5rem;
  }


  /* ── 4. RÉAGENCEMENT / RESPIRATION MOBILE ────────────────────
     Le thème a un padding vertical de 8rem par section → trop sur mobile.
     On réduit pour limiter le scroll, sans toucher au style des blocs. */
  .page-section { padding: 4.5rem 0; }

  /* Masthead : padding démesuré sur mobile, on resserre */
  header.masthead {
    padding-top: 7.5rem;
    padding-bottom: 3.5rem;
  }

  /* Boutons groupés (section Métier) : pleine largeur, faciles à toucher,
     empilés proprement sans déborder de l'encadré */
  #about .btn-outline-primary {
    display: block;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }


  /* ── 5. MASQUER LE SUPERFLU DÉCORATIF SUR MOBILE ─────────────
     Les chevrons « scroll down » et certains <hr> répétés encombrent
     le petit écran sans rien apporter. On les retire en mobile only. */
  .fa-chevron-down { display: none; }
  /* Les <hr> en cascade (souvent 2-3 d'affilée) : on en garde l'effet
     mais on réduit les marges énormes (my-6 = grosses marges). */
  #about hr.hr-light + hr,
  #services hr.hr-light + hr { display: none; }


  /* ── 6. GALERIE : carrousel horizontal au swipe ──────────────
     24 photos empilées = mur interminable sur mobile. On transforme la
     grille (4 colonnes flex) en une piste horizontale à défilement tactile
     avec scroll-snap : ~1,5 photo visible, le reste se swipe. Desktop
     inchangé (cette règle est sous @media max-width:991.98px).
     Spécificité #gallery .row pour l'emporter sur le <style> inline du thème. */
  #gallery .row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 0.6rem;
    padding: 0 1rem;
    /* barre de scroll masquée (le défilement reste actif) */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  #gallery .row::-webkit-scrollbar { display: none; }

  /* Chaque colonne devient une « piste » qui ne casse pas le flux horizontal :
     on aligne ses images côte à côte plutôt qu'empilées, pour un défilement
     continu de toutes les photos. */
  #gallery .column {
    flex: 0 0 auto;
    max-width: none;
    display: flex;
    flex-direction: row;
    gap: 0.6rem;
    padding: 0;
  }

  /* Chaque photo : largeur fixe en proportion de l'écran, point d'ancrage snap */
  #gallery .column picture,
  #gallery .column img {
    scroll-snap-align: center;
  }
  #gallery .column img {
    width: 78vw;
    max-width: 320px;
    height: 58vw;
    max-height: 240px;
    object-fit: cover;
    margin-top: 0;
    border-radius: 8px;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
  }
  #gallery .column img:active { filter: brightness(0.95); }

  /* Barre de progression du carrousel (insérée par JS).
     Se remplit en fonction de la position de scroll horizontal. */
  #gallery .carousel-progress {
    width: 64px;
    height: 3px;
    margin: 1rem auto 0;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.25);
    overflow: hidden;
  }
  #gallery .carousel-progress > span {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: #fff;
    /* la largeur est pilotée par JS ; transition douce pour le suivi du doigt */
    transition: width 0.12s linear;
  }
}


/* ════════════════════════════════════════════════════════════
   7. CTA FIXE « APPELER » (mobile only)
   Ajout d'une barre d'action fixe en bas, dans la palette existante
   (turquoise #95CFD8 / brun #5c4d42), pour le réflexe d'appel mobile.
   ════════════════════════════════════════════════════════════ */
.mobile-cta { display: none; }

@media (max-width: 991.98px) {
  .mobile-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1030; /* au-dessus du contenu, sous les modals Bootstrap (1050+) */
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.12);
    /* respect de l'encoche iOS */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #fff;
    /* apparition au scroll (classe JS) */
    transform: translateY(110%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .mobile-cta.is-visible { transform: translateY(0); }

  .mobile-cta a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-cta a:active { filter: brightness(0.93); }
  .mobile-cta .cta-call { background: #95CFD8; color: #3d3028; }
  .mobile-cta .cta-mail { background: #5c4d42; color: #fff; }
  .mobile-cta i { font-size: 1rem; }

  /* Quand la barre est visible, on réserve l'espace pour ne pas masquer
     le footer / les mentions. */
  body.has-mobile-cta footer { padding-bottom: calc(3rem + 52px + env(safe-area-inset-bottom, 0px)); }

  /* On masque la barre quand le menu burger est ouvert (évite le chevauchement) */
  body.nav-expanded .mobile-cta { transform: translateY(110%); }
}


/* ════════════════════════════════════════════════════════════
   8. ACCESSIBILITÉ & FEEDBACK (tous viewports, style conservé)
   ════════════════════════════════════════════════════════════ */

/* Focus clavier visible : contour turquoise discret, uniquement au clavier
   (:focus-visible n'apparaît pas au clic souris/tactile). Couleur de marque. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.navbar-toggler:focus-visible,
.flip-container:focus-visible,
.flip-container2:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #95CFD8;
  outline-offset: 3px;
  border-radius: 4px;
}
/* On retire l'outline par défaut uniquement quand :focus-visible prend le relais */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) { outline: none; }

/* Transitions de survol plus douces sur les boutons (desktop).
   Aucune couleur changée : on rend juste le passage hover/active fluide. */
.btn,
.btn-outline-primary,
.btn-primary,
.btn-outline-light,
.btn-outline-info {
  transition: color 0.2s ease, background-color 0.2s ease,
              border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

/* Feedback tactile : léger enfoncement au tap/clic actif sur tous les boutons.
   Indispensable sur mobile (pas de hover) et agréable au clic desktop. */
.btn:active {
  transform: translateY(1px) scale(0.99);
}

/* Suppression du surlignage bleu/gris au tap iOS/Android sur les éléments
   interactifs (cohérence avec ce qui est déjà fait pour cartes/galerie). */
a, button, .btn, .nav-link, .navbar-toggler {
  -webkit-tap-highlight-color: transparent;
}


/* ════════════════════════════════════════════════════════════
   9. CONTRASTE WCAG AA (tous viewports)
   Le gris « text-muted » (#6c757d) echoue le seuil AA sur les fonds
   colores : 2.72 sur le turquoise (sections Objectifs), 2.45 sur le fond
   sombre (Contact). On le fonce/eclaircit UNIQUEMENT sur ces fonds pour
   atteindre AA, sans toucher au gris sur fond blanc (deja conforme).
   Le texte reste gris et discret, juste lisible.
   ════════════════════════════════════════════════════════════ */

/* Sur turquoise (#services) : gris fonce -> ratio 6.0 (au lieu de 2.72) */
#services .text-muted {
  color: #3d4044 !important;
}

/* Sur fond sombre (#contact) : gris clair -> ratio 5.5 (au lieu de 2.45) */
#contact .text-muted {
  color: #adb5bd !important;
}
/* Les icones telephone/enveloppe du contact : meme traitement, plus visibles */
#contact .fas.text-muted {
  color: #adb5bd !important;
}