/*
  Motion Design (site A) — responsive.css — version 3 (chargée en dernier)
  Écrans courts, tablette (≤ 1100 px), téléphone (≤ 767 px). La page reste une colonne lisible : aucun
  élément ne dépasse l'écran, les films passent au-dessus ou en dessous du texte.
*/

/* Écrans courts (portables 1366 × 650) : le premier écran se resserre */
@media (max-height: 760px) and (min-width: 1101px) {
  .ouverture {
    padding-block: 104px 52px !important;
  }

  .heros-vente {
    max-width: 620px;
    margin-right: 0;
  }
}

/* ============================================================================================
   < 1280 px : navigation repliée dans le menu (1180 px avant le logo du 25/09/2026 : entre 1181 et
   1279 px, les liens passaient sur deux lignes à côté du logo)
   ============================================================================================ */

@media (max-width: 1279px) {
  .entete__nav {
    display: none;
  }

  .entete__barre {
    justify-content: space-between;
  }
}

/* ============================================================================================
   Tablette (≤ 1100 px)
   ============================================================================================ */

@media (max-width: 1100px) {
  .ouverture__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .ouverture__titre {
    font-size: clamp(2.1rem, 1.1rem + 3.1vw, 3.3rem);
  }

  .vitrine,
  .heros-vente {
    max-width: 680px;
  }

  .menu__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .carte--explicative,
  .carte--interface,
  .carte--objet,
  .carte--demo,
  .carte--labo {
    grid-column: auto;
    grid-row: auto;
  }

  .carte--explicative,
  .carte--labo {
    grid-column: 1 / -1;
  }

  .carte--interface,
  .carte--objet {
    flex-direction: column;
  }

  .carte--interface .carte__media--vertical,
  .carte--objet .carte__media--carre {
    width: auto;
    aspect-ratio: 16 / 10;
    margin: 10px 10px 0;
  }

  .projets__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chiffres__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chiffre:nth-child(3) {
    border-left: 0;
  }

  .chiffre:nth-child(n + 3) {
    border-top: 1px solid var(--filet);
  }

  .processus__etapes,
  .capot__outils {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .temoignages__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .temoignage,
  .temoignage--large {
    grid-column: span 1;
  }

  .offres__grille {
    grid-template-columns: minmax(0, 1fr);
    max-width: 560px;
    margin-inline: auto;
  }

  .tarifs__etapes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 560px;
    margin-inline: auto;
  }

  .guide__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide__sommaire {
    position: static;
  }

  .sommaire__carte {
    max-height: none;
  }

  .sommaire__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .pied__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .cine__vignettes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cine__vignette {
    max-height: 28vh;
  }

  .cine__vignette-secteur,
  .studio__secteur {
    display: none;
  }

  .studio__vignettes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .studio__vignette {
    max-height: 28vh;
  }
}

/* ============================================================================================
   Téléphone (≤ 767 px)
   ============================================================================================ */

/* Bande de conversion : les boutons passent sous le texte dès que la place manque */
@media (max-width: 1000px) {
  .rappel__bande {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .rappel__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* L'étiquette « le plus demandé » repasse dans le flux sur téléphone : en absolu, elle mordait
   sur le titre de la carte. */
@media (max-width: 767px) {
  .offre__drapeau {
    position: static;
    width: fit-content;
    margin-bottom: 12px;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }

  /* Barre du téléphone resserrée (25/09/2026) : logo complet, bouton de commande à deux icônes et menu
     tiennent dès 360 px de large (avant, la barre élargissait la page sous 405 px). */
  .entete {
    padding: 10px 8px;
  }

  .entete__barre {
    gap: 5px;
    padding: 6px;
  }

  /* Le logo grandit avec l'écran : 11,5 px à 360 px de large, 13,5 px à 412 px, 14,4 px au plus */
  .entete__marque {
    font-size: clamp(0.75rem, 3.85vw - 2.35px, 0.9rem);
  }

  .entete__barre .marque__nom,
  .entete__barre .marque__slogan {
    font-stretch: 90%;
  }

  .entete__actions {
    gap: 5px;
  }

  .entete__actions .bouton--vif {
    padding-left: 10px;
    font-size: 0.8rem;
  }

  .entete__menu {
    width: 40px;
    height: 40px;
  }

  .entete__outil,
  .entete__long {
    display: none;
  }

  .menu:not([hidden]) {
    max-height: calc(100svh - 90px);
    overflow-y: auto;
    padding: 22px 20px;
  }

  .menu__grille {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .ouverture {
    padding-block: 104px 64px !important;
  }

  .ouverture__titre {
    font-size: clamp(1.9rem, 0.95rem + 4.8vw, 2.5rem);
  }

  .ouverture__actions .bouton {
    width: 100%;
  }

  /* Bento gardé sur téléphone (27/09/2026) : deux 16:9 à gauche, le 9:16 à droite, cadres plus fins. */
  .vitrine {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
    gap: 10px;
  }

  .vitrine__film {
    padding: 5px;
  }

  .vitrine__note {
    padding-bottom: 0;
  }

  /* Boutons de lecture plus petits sur téléphone ; l'étiquette des films du héros ne garde que la marque
     (« Nitio · format vertical » débordait de la colonne de droite). */
  .vitrine__lecture {
    --coquille: 5px;
    --lecture-rond: 32px;
  }

  .vitrine__suite {
    display: none;
  }

  .client__lecture {
    --coquille: 5px;
    right: 10px;
    bottom: 10px;
  }

  .lecture--gelule {
    gap: 7px;
    padding: 7px 14px 7px 10px;
    font-size: 0.75rem;
  }

  .lecture--gelule .lecture__icone {
    width: 16px;
    height: 16px;
  }

  .vitrine__film figcaption {
    left: 11px;
    bottom: 11px;
    font-size: 0.75rem;
  }

  /* Le voile latéral (pensé pour un texte à gauche d'un écran large) noyait l'image sur téléphone :
     le texte y passe sous le film, donc un seul voile, par le bas. */
  .cine__scene::after {
    background: linear-gradient(0deg, rgba(1, 16, 15, 0.82) 0%, rgba(1, 16, 15, 0.22) 34%, rgba(1, 16, 15, 0) 52%);
  }

  .cine__textes {
    padding-bottom: 32px;
  }

  .cine__texte {
    padding: 20px 20px;
  }

  .cine__reperes,
  .cine__invite {
    display: none;
  }

  .cine__grille {
    padding-top: 80px;
  }

  .studio__contenu {
    padding-top: 80px;
  }

  .studio__vignette {
    max-height: 22vh;
  }

  .cine__vignette {
    max-height: 22vh;
  }

  .bento,
  .projets__liste,
  .processus__etapes,
  .capot__outils,
  .temoignages__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .carte__pieces {
    grid-template-columns: minmax(0, 1fr);
  }

  .chiffres__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .chiffre + .chiffre {
    border-left: 0;
    border-top: 1px solid var(--filet);
  }

  .sommaire__liste {
    grid-template-columns: minmax(0, 1fr);
  }

  .guide__contenu .edito {
    padding: 22px 18px;
  }

  .edito__outil {
    padding: 18px;
  }

  .edito__tableau-cadre {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  /* Tableaux : chaque ligne devient une carte avec l'intitulé de sa colonne (data-label posé à la génération) */
  .edito__tableau {
    min-width: 0;
  }

  .edito__tableau thead {
    display: none;
  }

  /* Légende en pleine largeur (28/09/2026) : dans un tableau passé en bloc, elle gardait la largeur d'un seul mot */
  .edito__tableau caption {
    display: block;
    width: 100%;
    padding: 0 2px 10px;
  }

  .edito__tableau,
  .edito__tableau tbody,
  .edito__tableau tr,
  .edito__tableau th,
  .edito__tableau td {
    display: block;
    width: 100%;
  }

  .edito__tableau tr {
    margin-bottom: 10px;
    border: 1px solid var(--filet);
    border-radius: var(--r-petit);
    background: var(--verre);
  }

  .edito__tableau th,
  .edito__tableau td {
    padding: 8px 14px;
    border-bottom: 0;
  }

  .edito__tableau td[data-label]::before {
    content: attr(data-label) " · ";
    font-family: var(--f-mono);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--texte-pale);
  }

  .contact-form__ligne {
    grid-template-columns: minmax(0, 1fr);
  }

  .pied__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__bas {
    flex-direction: column;
  }

  .pied__legal ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pied__legal li:nth-child(odd) {
    border-left: 0;
  }

  .pied__legal li:nth-child(n + 3) {
    border-top: 1px solid var(--filet);
  }
}

/* Bandeau des clients et bouton WhatsApp sur téléphone (21/09/2026) */
@media (max-width: 767px) {
  .client {
    width: min(78vw, 300px);
  }

  .clients__bandeau::before,
  .clients__bandeau::after {
    width: 8%;
  }

  /* Cartes verticales à deux colonnes sur téléphone (28/09/2026) : téléphone de 240 px, texte un peu plus petit. */
  .client--vertical {
    width: auto;
  }

  .client__carte--vertical .client__media--vertical {
    padding: 12px;
  }

  .client__carte--vertical .client__telephone {
    height: 240px;
  }

  .client__carte--vertical .client__corps {
    gap: 10px;
    width: 196px;
    padding: 16px 12px 16px 2px;
  }

  .client__carte--vertical .client__video-nom {
    font-size: 1rem;
  }

  .client__carte--vertical .client__video-duree {
    font-size: 0.84rem;
  }

  /* Logos des marques (28/09/2026) : un cinquième plus petits, la taille relative de chacun est gardée. */
  .marques__liste {
    zoom: 0.8;
  }

  /* WhatsApp : la phrase se montre à l'arrivée, puis le bouton se replie sur son icône pour ne rien
     masquer pendant la lecture. */
  .whatsapp {
    padding-right: 16px;
    font-size: 0.84rem;
  }

  .whatsapp {
    animation: whatsapp-replier-pastille 0.5s var(--ease-doux) 8s forwards;
  }

  [data-motion="full"] .whatsapp {
    animation:
      whatsapp-entree 0.7s var(--sortie-3) 1.2s backwards,
      whatsapp-replier-pastille 0.5s var(--ease-doux) 8s forwards;
  }

  .whatsapp__texte {
    animation: whatsapp-replier 0.5s var(--ease-doux) 8s forwards;
  }

  @keyframes whatsapp-replier {
    to {
      max-width: 0;
      opacity: 0;
    }
  }

  @keyframes whatsapp-replier-pastille {
    to {
      gap: 0;
      padding-right: 7px;
    }
  }

  .whatsapp__texte {
    max-width: 220px;
    overflow: hidden;
  }
}

/* Très petits téléphones (moins de 360 px) : seule l’icône du logo reste dans la barre, à côté du bouton
   de commande et du menu ; le nom revient dès 360 px (25/09/2026). */
@media (max-width: 767px) {
  .brief__envoi .bouton {
    width: 100%;
    /* « Envoyer mon brief par e-mail » passe sur deux lignes sous 390 px : sinon l'icône sortait du bouton et la
       pastille de la carte (vu le 28/09/2026) */
    padding-block: 8px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }

  /* Sur deux lignes, le bouton jaune fait 64 px : sa pastille de 46 px garde la même marge (9 px) en haut, en bas et à
     droite (30/09/2026, demande de l'utilisateur : marges intérieures égales autour de la pastille, sur tous les
     boutons) */
  .brief__envoi .bouton--vif {
    min-height: 64px;
    padding-right: 8px;
  }

  .brief__bloc {
    padding: 16px 14px 18px;
  }
}

/* Tarifs (28/09/2026) : sous 901 px, les cartes défilent de gauche à droite (accroche au bord), l'en-tête passe sur une
   colonne ; les étapes gardent leur règle (deux colonnes sous 1101 px). */
@media (max-width: 900px) {
  .tarifs__tete {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarifs__infos {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarifs__types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .vente__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .tarifs__grille {
    display: flex;
    gap: 18px;
    margin-inline: calc(var(--gouttiere) * -1);
    padding: 16px var(--gouttiere) 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }

  .tarifs__grille::-webkit-scrollbar {
    display: none;
  }

  .tarif {
    flex: 0 0 min(86%, 390px);
    scroll-snap-align: start;
  }

  .tarifs__glisser {
    display: block;
  }
}

/* Animation d'entrée : logo moins agrandi sur les écrans moyens et petits ; la copie du logo suit les réglages du logo de
   la barre au téléphone (police étroite), pour se poser exactement sur lui. */
@media (max-width: 1100px) {
  .intro-en-cours .intro {
    --echelle: 2.5;
  }
}

@media (max-width: 767px) {
  .intro-en-cours .intro {
    --echelle: 1.9;
  }

  .intro__marque .marque__nom,
  .intro__marque .marque__slogan {
    font-stretch: 90%;
  }
}

@media (max-width: 359px) {
  .intro__marque .marque__texte {
    display: none;
  }

  .tarifs__etapes {
    grid-template-columns: minmax(0, 1fr);
  }

  .entete__barre .marque__texte {
    display: none;
  }

  /* Boutons pleine largeur un peu plus compacts : « Commander ma vidéo » ne descendait pas sous 292 px
     et élargissait la page (et le formulaire de commande) à 320 px de large. */
  .bouton,
  .btn {
    gap: 7px;
    padding-inline: 16px;
    font-size: 0.9rem;
  }

  .bouton--vif,
  .btn-primary {
    padding-right: 5px;
  }
}

/* Section « Commandez la vôtre » (28/09/2026) : tête sur une colonne sous 1100 px, grille sur une colonne sur téléphone
   (le trait blanc ne sépare plus que les lignes). */
@media (max-width: 1100px) {
  .mosaique__tete {
    grid-template-columns: minmax(0, 1fr);
  }

  .mosaique__actions,
  .mosaique__preuves {
    justify-content: flex-start;
  }
}

@media (max-width: 767px) {
  .mosaique__grille {
    grid-template-columns: minmax(0, 1fr);
  }

  .mosaique__actions .bouton,
  .mosaique__pied .bouton {
    width: 100%;
  }
}

/* « Que voulez-vous créer ? » au petit téléphone : une colonne (LC16) */
@media (max-width: 520px) {
  .tarifs__types {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Comment ça marche ? au téléphone (30/09/2026) : les trois étapes l'une sous l'autre, icône à gauche, texte à droite
   (le fil horizontal n'a plus de sens : il disparaît) */
@media (max-width: 767px) {
  .marche__fil {
    display: none;
  }

  .marche__etapes {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .marche__etape {
    grid-template-columns: auto minmax(0, 1fr);
    justify-items: start;
    column-gap: 16px;
    row-gap: 4px;
    padding: 20px;
    text-align: left;
  }

  .marche__icone {
    grid-row: 1 / span 3;
    width: 52px;
    height: 52px;
    box-shadow: 0 0 0 6px rgba(228, 225, 53, 0.12);
  }

  .marche__icone svg {
    width: 24px;
    height: 24px;
  }

  .marche__numero {
    margin-top: 0;
  }

  .marche__texte {
    max-width: none;
  }
}

/* ============================================================================================
   AUDIT « APPLE-DESIGN » (30/09/2026) — téléphone
   ============================================================================================ */
@media (max-width: 767px) {
  /* [F4] Listes de cartes en rangées qui glissent au doigt, avec aimantation (comme les tarifs) : la page raccourcit
     d'environ 9 000 px et la carte suivante dépasse au bord pour inviter au geste */
  .bento,
  .processus__etapes,
  .capot__outils,
  .temoignages__grille {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gouttiere) * -1);
    padding: 4px var(--gouttiere) 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: none;
  }

  .bento::-webkit-scrollbar,
  .processus__etapes::-webkit-scrollbar,
  .capot__outils::-webkit-scrollbar,
  .temoignages__grille::-webkit-scrollbar {
    display: none;
  }

  .bento > *,
  .processus__etapes > *,
  .capot__outils > *,
  .temoignages__grille > * {
    flex: 0 0 min(84%, 340px);
    scroll-snap-align: start;
  }

  /* [I1] Un glissement au bord d'une rangée ne déclenche pas le « retour » du navigateur */
  .tarifs__grille {
    overscroll-behavior-x: contain;
  }

  /* [H1] Bouton du menu : 44 px */
  .entete__menu {
    width: 44px;
    height: 44px;
  }
}