/* Le téléphone d'abord (16 octobre, audit de quatre agents spécialistes du mobile).
   Chargée en dernier sur toutes les pages A : elle passe après pages-a.css, telephones-bleu.css et projet.css.
   Règle : au doigt, tout se voit, tout se lit, tout se touche (44 px au moins), rien ne recouvre le contenu. */

/* ---------- partout ---------- */
html { scroll-padding-top: 88px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* le réel « à venir » de la page Instagram n'a plus l'air cassé */
.type__visuel--reel img { opacity: 1; filter: none; }
/* les images servies en version téléphone gardent leur place dans la mise en page */
.defile picture, .h-extrait picture { display: contents; }

/* le menu (tablette et téléphone) : un voile, la page ne défile plus derrière, un toucher à côté le referme */
@media (max-width: 1385px) {
  .va-entete__in { position: relative; }
  .va-nav.est-ouvert { position: absolute; top: calc(100% + 8px); left: 0; right: 0; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior: contain; }
  .va-nav.est-ouvert a[aria-current="page"] { color: var(--color-bleu); }
  html:has(body.menu-ouvert) { overflow: hidden; }
  body.menu-ouvert::before { content: ""; position: fixed; inset: 0; z-index: 95; background: var(--color-voile-contact); }
}
@media (max-width: 1385px) and (prefers-reduced-motion: no-preference) {
  .va-nav.est-ouvert { animation: menu-entree 320ms var(--ease-sortie); }
}
@keyframes menu-entree { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 767px) {
  :root { --dur-revele: 450ms; }

  /* l'en-tête : il s'efface à la descente et revient à la remontée ; le texte ne se voit plus au-dessus de la capsule */
  .va-entete.est-cache { transform: translateY(calc(-100% - 12px)); }
  .va-entete.est-fixe::before { content: ""; position: absolute; inset: 0 0 -12px; z-index: -1; pointer-events: none; background: linear-gradient(var(--color-blanc) 55%, transparent); }

  /* la barre du bas : elle s'efface en fin de page, menu ouvert et pendant la saisie */
  .projet-barre { transition: transform 300ms var(--ease-sortie); }
  .projet-barre.est-masquee, body.menu-ouvert .projet-barre, body:has(:is(input, textarea, select):focus) .projet-barre { transform: translateY(110%); }
  /* la barre propose déjà WhatsApp : pas de doublon en haut de page */
  .pa-tete .pa-actions a[href*="wa.me"] { display: none; }

  /* cibles tactiles */
  .pa-fleche { min-height: 44px; }
  .h-extrait figcaption a, .z-maquette__contact a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .vp-pied__liens { row-gap: 0; }
  .vp-pied__liens a, .vp-pied__contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .vp-pied__icone { display: none; }
  .sur-grand-ecran { display: none; }

  /* l'aiguillage des accueils de test recouvrait la visite : au téléphone, il se fait discret en haut à droite */
  .aiguillage { display: flex; position: absolute; top: 84px; right: 8px; bottom: auto; left: auto; padding-left: 4px; }
  .aiguillage span { display: none; }
  .aiguillage a { height: 26px; padding: 0 9px; }

  /* ---------- accueil ---------- */
  /* premier écran : la photo et la visite remontent sous le titre */
  .mh .mh-grille { gap: 0; }
  .mh-texte { display: contents; }
  .mh-texte > * { margin-inline: var(--va-marge); }
  .mh-texte > .pa-surtitre { margin-top: 84px; }
  /* la photo et la visite sont posées en absolu dans .mh-visuel : sur iPhone (WebKit), la grille étire l'élément à la
     hauteur de son contenu, nulle, et ignore aspect-ratio. Une cale dans le flux lui donne sa hauteur partout. */
  .mh-visuel { order: 1; margin-top: 24px; aspect-ratio: auto; align-self: start; }
  .mh-visuel::before { content: ""; display: block; padding-top: 105%; }
  .mh .a-hero__detail, .mh .pa-actions, .mh .pa-mention { order: 2; }
  .mh .a-hero__detail { margin-top: 24px; }
  .mh-visite { width: 60%; }
  .mh-visite__legende { font-size: 12px; }
  .mh-visite__legende b { display: inline-flex; align-items: center; gap: 6px; opacity: 1; }
  .mh-visite__legende b::before { content: ""; border-left: 8px solid var(--color-blanc); border-block: 5px solid transparent; }
  .mh-visite__legende span { display: none; }

  /* publications : un carrousel aimanté, une publication lisible à la fois */
  .h-posts, .c-carte__media--insta {
    display: flex; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--va-marge)); padding-inline: var(--va-marge); scroll-padding-inline: var(--va-marge);
  }
  .h-posts::-webkit-scrollbar, .c-carte__media--insta::-webkit-scrollbar { display: none; }
  .h-post { flex: 0 0 78%; scroll-snap-align: start; }
  .c-carte__media--insta > img { flex: none; width: 78%; scroll-snap-align: start; }
  .c-carte__media--insta { aspect-ratio: auto; padding-block: 0; border-radius: 0; background: none; margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }

  /* captures de sites : le haut de page, en grand */
  .h-chaine__site img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 0 0; }
  .h-extrait__page img { aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: 50% 0; }
  .h-extrait__zoom { position: static; width: 100%; margin: 12px 0 0; border: 0; }

  /* fiche Google de la carte 04 : image entière, légende dessous */
  .c-carte__media--capture { aspect-ratio: auto; }
  .c-carte__media--capture > img { position: static; height: auto; }
  .c-carte__media--capture .va-modele { position: static; display: inline-block; margin: 10px; }

  /* la vidéo de Niel en pleine largeur */
  .f-video { max-width: none; }

  /* ---------- page Site ---------- */
  .pa-tete { padding-top: 88px; }
  .pa-tete__grille { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .pa-tete__grille > .pa-tete__texte { display: contents; }
  .pa-tete__grille .pa-tete__media { order: 3; margin-top: 24px; }
  .pa-tete__grille .pa-chapo { order: 4; }
  .pa-tete__grille .pa-actions { order: 5; }
  /* le modèle Roussel tel qu'il paraît sur un téléphone : cadre en portrait, page qui défile dessous */
  .pa-defile .defile { aspect-ratio: 2 / 3; }
  .pa-defile .defile--roussel .defile__page { animation-name: defile-roussel-tel; animation-duration: 48s; }

  /* réalisations : la grille glisse au doigt (le ruban 3D est réservé aux grands écrans) */
  html.js .ruban[data-ruban] + .realisations__secours {
    display: flex; gap: 12px; margin: 28px calc(-1 * var(--va-marge)) 0; padding: 0 var(--va-marge) 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--va-marge);
    overscroll-behavior-x: contain; scrollbar-width: none;
  }
  .realisations__secours > li { flex: 0 0 86%; scroll-snap-align: start; }
  .realisations__secours .site__visuel { padding: 10px; }

  /* tableau des mesures */
  .pa-tableau table { min-width: 0; font-size: 14px; }
  .pa-tableau th, .pa-tableau td { padding: 12px 8px; }
  .pa-tableau thead th { font-size: 12px; }
  .pa-tableau tr > :nth-child(5) { display: none; }

  /* ---------- tarifs : les cartes s'empilent, chaque prix se voit sans glisser ---------- */
  .pa-formule__deux, .pa-prix { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }

  /* le panneau Composer : il ne déborde plus, son pied reste compact */
  .projet-pied { margin-inline: -20px; padding: 10px 20px 12px; }
  .projet-pied__aide { display: none; }
  .projet-pied .projet-envois { margin-top: 10px; gap: 6px; }
  .projet-pied .projet-bouton { height: 44px; }

  /* ---------- page Vidéo 3D ---------- */
  .vz__scene { display: block; height: auto; min-height: 0; }
  .vz__fond { position: relative; z-index: 0; aspect-ratio: 4 / 3; }
  .vz__fond::after { background: linear-gradient(180deg, var(--color-voile-ex-0) 55%, var(--color-nuit-bleue) 100%); }
  .vz__contenu { margin-top: -40px; padding-top: 0; }
  .vz__explorer { width: 100%; justify-content: flex-start; }
  .vz .va-pilule--contour { display: none; }
  .vz__prix { min-height: 44px; }
  .vz-formats .vz-formats__exemple { top: -14px; right: 12px; }
  #prix .pa-entete-section { display: contents; }
  #prix > .va-conteneur { display: flex; flex-direction: column; }
  #prix .pa-entete-section .pa-actions { order: 2; margin-top: 24px; }

  /* la visite au doigt : boutons de 44 px, carte d'aide en bas */
  .ex__pieces button, .ex__lecture { height: 44px; }
  .mode-doigt .ex__tuto { top: auto; bottom: calc(env(safe-area-inset-bottom) + 132px); padding: 16px 16px 14px; transform: translate(-50%, 12px); }
  .mode-doigt.tuto-carte:not(.a-touche) .ex__tuto { transform: translate(-50%, 0); }
  .mode-doigt .ex__gestes { gap: 8px; }
  .mode-doigt .ex__geste { padding: 10px 8px; }
  .mode-doigt .ex__geste .geste { max-width: 72px; }
  .mode-doigt .ex__tuto-titre { margin-top: 12px; font-size: 1.3rem; }
  .mode-doigt .ex__tuto-texte { font-size: 15px; }

  /* ---------- Instagram ---------- */
  .pa-tete--insta .tels { height: min(124vw, 36rem); }

  /* ---------- Comprendre : la vidéo de Niel ne passe plus sur le texte ---------- */
  .va-conteneur.pa-cote--videos { grid-template-columns: minmax(0, 1fr); }
  .pa-cote--videos .f-video { width: min(100%, 320px); max-width: none; margin-inline: auto; }
  .cc-detail { scroll-margin-bottom: 96px; }
}
@keyframes defile-roussel-tel { 0%, 4% { transform: translateY(0); } 96%, 100% { transform: translateY(calc(-100% + 121.8cqw)); } }

/* au doigt, le bouton de la visite montre une lecture plutôt qu'une souris */
@media (pointer: coarse) {
  .vz__souris::before { width: 0; height: 0; border-radius: 0; box-shadow: none; border-left: 13px solid var(--color-blanc); border-block: 8px solid transparent; margin-left: 4px; }
  .vz__souris i { display: none; }
  .vz-gestes li:nth-child(-n+2) { display: none; }
  .vz-gestes { grid-template-columns: minmax(0, 1fr); }
}

/* visite en portrait au téléphone : une image carrée plus grande plutôt qu'une bande 4:3 au milieu du noir */
@media (max-width: 767px) and (orientation: portrait) {
  .mode-doigt .ex__cadre { inset: auto 0; top: 50%; height: min(100vw, 58dvh); transform: translateY(-50%); }
  .mode-doigt .ex__affiche, .mode-doigt .ex__video { object-fit: cover; }
}
/* téléphone en paysage */
@media (orientation: landscape) and (max-height: 500px) {
  .vz__scene { height: calc(100svh - 100px); min-height: 0; }
  .vz__chapo, .vz__piece { display: none; }
  .mode-doigt .ex__tuto { bottom: 76px; width: min(480px, calc(100% - 32px)); }
}
@media (max-width: 767px) and (max-height: 700px) { .vz__chapo { display: none; } }

/* sur iPhone, un effet de survol reste collé après le toucher : on le réserve aux souris */
@media (hover: none) {
  .vz-piece:hover img, .vz__scene:hover .vz__fond img, .vz__scene:hover .vz__fond video { transform: none; }
}

/* la flèche « ↗ » après le nom des sites n'existe pas dans la police : un petit trait dessiné la remplace partout */
/* la flèche après le nom du modèle : la même que celle des liens « pa-fleche » */
.site__nom::after { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-left: 0.3em; vertical-align: -0.05em; background: var(--color-bleu); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 11.5 11.5 4.5M5.5 4.5h6v6' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }