/* ============================================================
   Arroseo — couche partagée
   ------------------------------------------------------------
   Chargée APRÈS le <style> inline de chaque page. Deux rôles :

   §1 à §6  la couche mobile. Tout y est scopé à une media query
            mobile ou tactile : à spécificité égale la dernière
            règle gagne, donc ces surcharges s'appliquent sans
            toucher au rendu desktop, qui reste identique au pixel.

   §7 et +  les composants communs ajoutés ensuite, valables à
            TOUTES les largeurs (boutons de store du header, avis).

   Pas de `!important` : tout passe par l'ordre de chargement.
   ============================================================ */


/* ── 1. BASE — s'applique partout, sans effet de bord ────────── */

html {
  /* Le header est fixe : sans ça, une ancre (#features) se cale
     sous le header et le titre visé reste invisible. */
  scroll-padding-top: 120px;
  /* iOS gonfle le texte au passage en paysage sans cette ligne. */
  -webkit-text-size-adjust: 100%;
}

body {
  /* Le flash gris par défaut au tap est remplacé par un voile vert. */
  -webkit-tap-highlight-color: rgba(39, 71, 50, 0.10);
}

/* Rien ne doit pouvoir élargir la page. */
img, video, svg, iframe, table { max-width: 100%; }

/* Supprime le délai de 300 ms et le double-tap-zoom sur les cibles. */
a, button, .btn, summary, [role="button"] { touch-action: manipulation; }

/* Les mots longs (« Confidentialité », URLs) ne cassent plus la mise en page. */
h1, h2, h3, h4, p, li, td, th, .btn { overflow-wrap: break-word; }

/* Anneau de focus aux couleurs de la marque, au lieu du bleu système.
   :focus-visible ne s'affiche qu'au clavier — jamais au tap. */
:focus-visible {
  outline: 3px solid var(--accent, #10B981);
  outline-offset: 2px;
}


/* ── 2. ÉCRANS TACTILES — neutralise les effets de survol ────── */
/* Au doigt, :hover se déclenche au tap et reste collé : la carte
   garde son translateY et son ombre jusqu'au tap suivant. */

@media (hover: none) {
  .btn:hover,
  .trust-pill:hover,
  .step-card:hover,
  .value-card:hover,
  .feature-card:hover,
  .testimonial-card:hover,
  .pricing-card:hover,
  .blog-card:hover,
  .faq-item:hover,
  .article-card:hover,
  .related-card:hover {
    transform: none;
    box-shadow: none;
  }
  /* Exception : les cartes qui ont une ombre au repos la gardent. */
  .testimonial-card:hover { box-shadow: 0 10px 30px rgba(39, 71, 50, 0.15); }

  /* Un retour tactile net au moment de l'appui, lui, est utile. */
  .btn:active { transform: scale(0.98); }
}


/* ── 3. MOBILE — ≤ 768px ─────────────────────────────────────── */

@media (max-width: 768px) {

  html { scroll-padding-top: 88px; }

  /* --- Header : 104px → 68px ------------------------------------
     Le header fixe mangeait 12 % de la hauteur d'un iPhone à
     chaque écran.
     Depuis l'harmonisation, le logo est `logo-tight.png` : le dessin
     occupe toute l'image, donc la hauteur CSS est la hauteur réellement
     vue. 38px face aux trois cibles de 44px de droite — la marque reste
     l'élément dominant sans écraser le header. --- */
  .header-inner {
    height: 68px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .logo-icon {
    height: 38px;
  }
  .site-header.scrolled { box-shadow: 0 2px 16px rgba(39, 71, 50, 0.08); }

  /* Burger : 32×24 → 44×44, le minimum tactile recommandé. */
  .hamburger {
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    margin-right: -8px;
    border-radius: 12px;
  }
  .hamburger span { width: 22px; }

  /* --- Menu mobile ----------------------------------------------
     Il passait SOUS le header (z-index 99 < 100) : le bouton ✕
     était masqué et le menu ne pouvait plus se refermer. --- */
  .mobile-nav {
    z-index: 200;
    gap: 4px;
    padding: 84px 24px 40px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .mobile-nav a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 340px;
    min-height: 56px;
    padding: 12px 16px;
    font-size: 21px;
  }
  .mobile-nav a:not(.btn) {
    border-bottom: 1px solid rgba(255, 252, 244, 0.12);
  }
  /* Le CTA était .btn-primary : vert foncé SUR le vert foncé du
     menu. Il ne se lisait pas comme un bouton. */
  .mobile-nav .btn-primary {
    background: var(--bg-warm, #FFFCF4);
    color: var(--primary, #274732);
    border-radius: 14px;
    margin-top: 24px;
    border: none;
  }
  .mobile-nav-close {
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 30px;
    line-height: 1;
  }

  /* --- Gouttières et rythme vertical -----------------------------
     100 à 120px de padding par section, c'est trois écrans de
     défilement pour rien sur un téléphone. --- */
  .container { padding-left: 20px; padding-right: 20px; }

  .how-it-works,
  .features,
  .testimonials,
  .features-section,
  .comparison-section,
  .pricing-section,
  .faq-section,
  .blog-section,
  .mission-section,
  .story-section,
  .values-section,
  .timeline-section,
  .cta-section,
  .contact-cta,
  .related {
    padding-top: 64px;
    padding-bottom: 64px;
  }
  .cta-final { padding: 72px 0; }
  .stats { padding: 56px 0; }
  .stats.stats-lifestyle { padding: 64px 0; }
  .trust-strip { padding: 36px 0; }
  .article-body { padding: 40px 0 48px; }
  .site-footer { padding: 48px 0 24px; }

  .section-subtitle { font-size: 16px; margin-bottom: 32px; }
  .steps-grid { gap: 24px; }

  /* --- Hero de la home -------------------------------------------
     Le header faisait 104px mais le hero ne réservait que 64px de
     padding : la première ligne du H1 passait dessous.
     min-height:100vh en prime, qui saute quand la barre d'adresse
     d'iOS se rétracte. --- */
  .hero {
    min-height: auto;
    padding-top: 100px;
    padding-bottom: 56px;
  }
  .hero-inner { gap: 32px; }
  .hero-text h1 { margin-bottom: 18px; }
  .hero-text p { font-size: 16px; margin-bottom: 28px; }
  .hero-buttons { margin-bottom: 28px; }

  /* Hero des pages secondaires : 140px de padding haut. */
  .page-hero { padding: 100px 0 48px; }
  .article-hero { padding: 100px 0 40px; }

  /* --- Boutons ----------------------------------------------------
     48px de haut minimum, pour être visé au pouce. --- */
  .btn {
    min-height: 48px;
    padding: 13px 22px;
  }
  .btn-sm {
    min-height: 42px;
    padding: 10px 18px;
  }

  /* --- Téléphone du hero -----------------------------------------
     60px de marge haute creusaient un trou une fois les colonnes
     empilées. L'écart avec les badges est géré en §7.3. --- */
  .phone-mockup { margin-top: 8px; }

  /* --- Badges de store --------------------------------------------
     Gris #6B7280 sur gris #d1d5db en 12px : 3:1 de contraste, sous
     le seuil AA, et ça se lit comme un bouton désactivé. On reprend
     les jetons de la charte (fond crème, liseré vert). --- */
  .store-badge {
    background: var(--card-bg, #fff);
    border: 1.5px solid rgba(39, 71, 50, 0.25);
    color: var(--primary, #274732);
    font-size: 13px;
  }

  /* --- Bandeau note App Store ------------------------------------ */
  .rating-card {
    gap: 16px;
    padding: 18px 20px;
    margin-bottom: 40px;
  }
  .rating-card-num { font-size: 44px; }
  .rating-card-label { font-size: 12px; letter-spacing: 0.04em; }

  .trust-row { gap: 8px; }
  .trust-pill { padding: 9px 14px; font-size: 13px; }

  /* --- Bloc fonctionnalités en zigzag ---------------------------- */
  .feature-row { margin-bottom: 56px; }
  .feature-text p { font-size: 15px; }

  /* --- Pied de page ----------------------------------------------
     Les liens faisaient 22px de haut : deux fois trop petits, et
     collés les uns aux autres. --- */
  .footer-grid { gap: 32px; margin-bottom: 32px; }
  /* Même hauteur que le logo du header : depuis le détourage, la hauteur
     CSS est la hauteur réellement vue, des deux côtés de la page. */
  .footer-brand .logo-icon { height: 38px; }
  .footer-brand p { margin-bottom: 16px; }
  .footer-col h4 { margin-bottom: 8px; }
  .footer-col a {
    padding: 10px 0;
    margin-bottom: 0;
    font-size: 15px;
  }
  .social-link {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .lang-switcher { gap: 2px; }
  .lang-switcher a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    font-size: 14px;
  }
  .footer-bottom { padding-top: 20px; }

  /* --- Modale de téléchargement -----------------------------------
     Elle affichait un QR code de 240px avec « Scanne ce code » à
     quelqu'un qui est DÉJÀ sur son téléphone. Sur mobile on montre
     directement les deux boutons de store. Le QR reste servi tel
     quel sur desktop, là où il a du sens. --- */
  .qr-modal { padding: 16px; }
  .qr-modal-card {
    padding: 28px 20px 24px;
    border-radius: 24px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .qr-modal-logo { height: 88px; margin-bottom: 14px; }
  .qr-modal-card h3 { font-size: 25px; }
  .qr-modal-tagline { font-size: 15px; margin-bottom: 22px; }
  .qr-img-wrap { display: none; }
  .qr-store-row {
    flex-direction: column;
    gap: 10px;
  }
  .qr-store-btn {
    width: 100%;
    justify-content: flex-start;
    min-height: 60px;
    padding: 12px 20px;
    border-radius: 14px;
  }
  .qr-modal-close {
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
  }

  /* --- FAQ, filtres, tableau comparatif -------------------------- */
  .faq-question { min-height: 56px; padding: 16px 18px; }
  .filter-btn { min-height: 44px; }
  .comp-table thead th:nth-child(3)::before { right: 6px; font-size: 9px; }

  /* --- Pages légales : sommaire en pastilles --------------------- */
  .sidebar-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
  }

  /* --- Article de blog ------------------------------------------- */
  .breadcrumb { gap: 4px; }
  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 4px;
  }
  .share-btn { width: 44px; height: 44px; }
  .back-to-blog { min-height: 44px; padding: 8px 0; }

  /* Un champ sous 16px déclenche un zoom automatique sur iOS. */
  input, select, textarea { font-size: 16px; }
}


/* ── 4. PETITS ÉCRANS — ≤ 480px ──────────────────────────────── */

@media (max-width: 480px) {

  .hero { padding-top: 92px; }

  /* Les deux CTA du hero en pleine largeur, empilés : une cible
     nette par ligne plutôt que deux boutons serrés. */
  .hero-buttons {
    width: 100%;
    max-width: 380px;
    gap: 12px;
  }
  .hero-buttons .btn { width: 100%; }

  .store-badges { gap: 10px; }
  .store-badge { padding: 10px 14px; min-height: 44px; }

  .cta-final .btn { width: 100%; max-width: 380px; }
  .cta-section .btn,
  .contact-cta .btn { width: 100%; max-width: 380px; }

  .rating-card {
    flex-direction: column;
    text-align: center;
    gap: 8px;
    padding: 22px 20px;
  }
  .rating-card-stars { letter-spacing: 3px; }

  /* Le pied de page passait en UNE colonne sous 480px : marque +
     trois listes empilées, soit près de trois écrans de défilement.
     La marque garde toute la largeur, les listes se remettent à
     deux colonnes — même contenu, trois fois moins haut. */
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { gap: 8px; }
}


/* ── 5. TRÈS PETITS ÉCRANS — ≤ 380px (iPhone SE, mini) ──────── */

@media (max-width: 380px) {
  .container { padding-left: 16px; padding-right: 16px; }
  .hero-text h1 { font-size: 34px; }
  .section-title { font-size: 28px; }
  .cta-final h2 { font-size: 28px; }
  .mobile-nav a { font-size: 19px; min-height: 52px; }
  .qr-store-btn { padding: 12px 16px; }
}


/* ── 6. VIEWPORT COURT — téléphone en paysage ────────────────── */

/* Le hero est en `min-height:100vh` + `align-items:center`. Dès que
   la hauteur tombe sous ~520px — téléphone couché, fenêtre de bureau
   écrasée — le contenu, plus haut que le viewport, déborde des DEUX
   côtés du centrage : la première ligne du H1 repart sous le header
   fixe. Le centrage vertical n'a plus de sens à cette hauteur.

   Cette règle n'est pas bornée en largeur : le défaut est le même à
   1280×500 qu'à 844×390. */
@media (max-height: 520px) {
  .hero {
    min-height: auto;
    align-items: flex-start;
    padding-top: 128px;   /* header desktop : 104px */
    padding-bottom: 48px;
  }
}
@media (max-height: 520px) and (max-width: 768px) {
  .hero { padding-top: 92px; }   /* header mobile : 68px */
}

/* Menu plein écran : la liste centrée ne tient plus, on la cale en
   haut et on la rend défilable. */
@media (max-width: 900px) and (max-height: 480px) {
  .mobile-nav {
    justify-content: flex-start;
    padding-top: 64px;
  }
  .mobile-nav a { min-height: 48px; font-size: 18px; }
}


/* ============================================================
   §7. COMPOSANTS COMMUNS — toutes largeurs
   ------------------------------------------------------------
   Au-delà d'ici, les règles s'appliquent aussi sur desktop.
   ============================================================ */


/* ── 7.1 BOUTONS DE STORE DANS LE HEADER ─────────────────────
   Présents sur chaque page : où qu'on se trouve dans le site,
   son store est à un tap. Ils nomment explicitement leur store
   (icône + aria-label), ils pointent donc en dur vers celui-ci
   plutôt que vers /go — c'est la règle posée en §3 de la doc.

   Placement sans toucher à la structure du header : `margin-left:auto`
   sur .nav-links absorbe l'espace libre avant que `space-between`
   n'entre en jeu. Le logo reste à gauche, tout le reste à droite —
   exactement le rendu desktop actuel. */

.header-inner { gap: 14px; }
.nav-links { margin-left: auto; }

.header-stores {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.header-store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--card-bg, #fff);
  border: 1.5px solid rgba(39, 71, 50, 0.22);
  color: var(--primary, #274732);
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.header-store svg {
  width: 20px;
  height: 20px;
  display: block;
}
.header-store:hover {
  background: var(--primary, #274732);
  border-color: var(--primary, #274732);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 768px) {
  /* Sans la nav, c'est aux boutons d'absorber l'espace libre. */
  .header-stores { margin-left: auto; gap: 6px; }
  .header-store { width: 44px; height: 44px; border-radius: 12px; }
  .header-store svg { width: 21px; height: 21px; }
}
@media (max-width: 360px) {
  /* Même à 320px les trois cibles tiennent en 44px : on ne resserre
     que les écarts, jamais les cibles elles-mêmes. */
  .header-stores { gap: 4px; }
  .header-inner { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .hamburger { margin-right: -10px; }
}
@media (hover: none) {
  .header-store:hover {
    background: var(--card-bg, #fff);
    border-color: rgba(39, 71, 50, 0.22);
    color: var(--primary, #274732);
    transform: none;
  }
  .header-store:active { background: rgba(39, 71, 50, 0.08); }
}


/* ── 7.2 PROFONDEUR : LE TEXTE PASSE AU-DESSUS DES TÉLÉPHONES ─
   Les visuels arrivent après les textes dans le DOM : sans
   z-index ils peignent PAR-DESSUS. Avec la parallaxe qui les
   déplace au défilement, un téléphone venait recouvrir le texte.
   L'ordre est maintenant explicite dans les deux sens. */

.hero-text,
.feature-text {
  position: relative;
  z-index: 2;
}
.hero-visual,
.feature-visual {
  position: relative;
  z-index: 1;
}


/* ── 7.3 BADGES DE STORE DU HERO ──────────────────────────────
   Le téléphone, remonté par la parallaxe, venait percuter les
   deux badges. On lui réserve sa place. */

.store-badges { position: relative; z-index: 2; }

@media (max-width: 1024px) {
  /* Colonnes empilées : le téléphone passe sous les badges. */
  .hero-visual { margin-top: 12px; }
}


/* ── 7.4 MODALE DE TÉLÉCHARGEMENT ─────────────────────────────
   Le logo utilisait `logo.png`, un carré 1024×1024 dont 63 % de
   la hauteur est du vide transparent : agrandir la balise creusait
   un trou au lieu de grossir la marque. Elle pointe maintenant sur
   `logo-tight.png`, recadré sur le dessin — à hauteur égale, la
   marque est près de trois fois plus grande.

   Et « Télécharger sur l'App Store » tient sur une seule ligne : le
   <small> et le <strong> étaient empilés en colonne. */

.qr-modal-logo { height: 104px; margin-bottom: 22px; }

.qr-store-btn span {
  flex-direction: row;
  align-items: baseline;
  gap: 0;
  white-space: nowrap;
}
.qr-store-btn small {
  font-size: 14px;
  font-weight: 500;
  opacity: 1;
}
.qr-store-btn strong { font-size: 15px; }

/* Le texte sur une ligne rend les boutons trop larges pour tenir
   côte à côte : on les empile franchement, à largeur identique. */
.qr-store-row {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.qr-store-btn {
  width: 100%;
  max-width: 300px;
  justify-content: flex-start;
  padding: 12px 20px;
}

@media (max-width: 768px) {
  .qr-modal-logo { height: 84px; margin-bottom: 16px; }
  .qr-store-btn small { font-size: 13px; }
  .qr-store-btn strong { font-size: 14px; }
}
@media (max-width: 360px) {
  .qr-store-btn small { font-size: 12px; }
  .qr-store-btn strong { font-size: 13px; }
}


/* ── 7.5 AVIS ─────────────────────────────────────────────────
   Les trois témoignages étaient inventés (Marie L., Thomas K.,
   Sophie B.) et portaient un badge « Vérifié ». Ce sont désormais
   de vrais avis App Store, avec leur pseudo et leur date : le
   badge dit enfin la vérité.

   `.testimonial-title` reprend le titre de l'avis, comme sur la
   fiche App Store. `.verified-badge` n'existait que dans le CSS
   de la page FR : il est défini ici pour les deux langues. */

.testimonial-title {
  color: var(--bg-warm, #FFFCF4);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}
.testimonials .stars { margin-bottom: 10px; }

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  padding: 2px 8px;
  background: rgba(255, 252, 244, 0.15);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bg-warm, #FFFCF4);
  vertical-align: middle;
  white-space: nowrap;
}
.verified-badge::before { content: '✓'; font-size: 11px; }

/* Le pseudo et son badge doivent pouvoir passer à la ligne. */
.author-info strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
}

@media (max-width: 768px) {
  .testimonial-title { font-size: 15px; }
  .testimonial-card { padding: 24px 20px; }
  .testimonial-text { font-size: 14.5px; }
}

/* Les avis n'ont pas la même longueur : sans cela le bloc auteur
   flottait au milieu du vide sur les cartes les plus courtes. */
.testimonial-card {
  display: flex;
  flex-direction: column;
}
.testimonial-author { margin-top: auto; padding-top: 4px; }


/* ── 7.6 RÉSEAUX SOCIAUX DU PIED DE PAGE ──────────────────────
   Avant : deux émojis 📷 et 🎵 dans des carrés de 36px. Personne
   ne comprenait qu'il s'agissait d'Instagram et de TikTok — un
   émoji n'est pas un logo, et son dessin change à chaque OS.

   Maintenant : le vrai glyphe de chaque marque en SVG (même
   technique que les boutons de store du §7.1 : viewBox 0 0 24 24,
   fill=currentColor) ET le nom du réseau écrit à côté. Le nom sert
   aussi de nom accessible, l'aria-label n'a donc plus lieu d'être.

   Au repos les deux pastilles sont identiques : c'est la même
   logique graphique que le reste du site. La couleur de marque
   n'apparaît qu'au survol, là où elle confirme la cible sans
   casser l'harmonie du pied de page. */

.footer-social { margin-bottom: 4px; }

.footer-social-label {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-on-dark, #e6edf3);
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: auto;
  height: 44px;
  padding: 0 16px 0 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
  color: var(--text-on-dark, #e6edf3);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.social-link svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.social-link:hover {
  color: #fff;
  transform: translateY(-1px);
}
/* Le dégradé Instagram, à plat pour rester lisible derrière le texte. */
.social-link--instagram:hover {
  background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF);
  border-color: transparent;
}
.social-link--tiktok:hover {
  background: #FE2C55;
  border-color: transparent;
}

@media (hover: none) {
  /* Au doigt, aucun survol : la couleur de marque ne doit pas
     rester collée après le tap. */
  .social-link:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-on-dark, #e6edf3);
    transform: none;
  }
  .social-link--instagram:hover,
  .social-link--tiktok:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.16);
  }
  .social-link:active { background: rgba(255, 255, 255, 0.14); }
}