/* ============================================================================
   Adaptation aux telephones.

   REGLE DE CE FICHIER : chaque regle est enfermee dans une media query "max-width". Sur un
   ordinateur, ce fichier ne s'applique pas du tout - la version bureau a ete validee telle
   quelle et ne doit pas bouger d'un pixel. La verification a ete faite par empreinte de mise en
   page (position et taille de chaque element) avant et apres, sur les 11 pages, a 1366px.

   Charge EN DERNIER sur chaque page, pour l'emporter sur les feuilles propres a chaque page sans
   avoir a surencherir en specificite.
   ============================================================================ */

/* --- Barre de navigation des pages connectees ---------------------------------------------
   Sur un telephone, marque + Appel + Dashboard + langue + profil ne tiennent pas sur une ligne :
   la barre debordait de 13px, "Profil" etait coupe et toute la page defilait de travers.
   On la reorganise sur deux lignes : la marque, la langue et le profil en haut ; les deux
   onglets Appel / Dashboard en dessous, a parts egales, comme une barre d'onglets.
   `display: contents` sur le conteneur des liens permet de ranger ses enfants directement dans
   la barre, sans toucher au HTML partage avec la version bureau.
   Limite aux barres qui ont un menu de profil (:has) : celle des pages legales tient deja sur
   une ligne et n'a pas a changer. */
@media (max-width: 640px) {
  .topnav-inner:has([data-account-menu]) {
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 10px;
    padding: 10px 16px;
  }

  .topnav-inner:has([data-account-menu]) .topnav-links {
    display: contents;
  }

  .topnav-inner:has([data-account-menu]) .topnav-brand {
    order: 1;
    margin-right: auto;
  }

  .topnav-inner:has([data-account-menu]) [data-lang-switcher] {
    order: 2;
    display: inline-flex;
  }

  .topnav-inner:has([data-account-menu]) [data-account-menu] {
    order: 3;
    display: inline-flex;
  }

  .topnav-inner:has([data-account-menu]) .topnav-links > a {
    order: 4;
    /* 40% : trop large pour rester sur la premiere ligne, assez etroit pour que les deux onglets
       se partagent la seconde. */
    flex: 1 1 40%;
    text-align: center;
    white-space: nowrap;
    padding: 9px 10px;
  }

  .topnav-inner:has([data-account-menu]) .lang-switch,
  .topnav-inner:has([data-account-menu]) .account-menu {
    margin-left: 0;
  }
}

/* --- Statistiques (dashboard, et son apercu sur la page d'accueil) ------------------------
   Quatre grandes cartes empilees prenaient un ecran entier pour quatre chiffres. En 2 x 2, tout
   tient d'un coup d'oeil. */
@media (max-width: 640px) {
  .stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .stat-tile {
    padding: 14px;
  }

  .stat-tile-label {
    font-size: 11px;
    letter-spacing: 0.03em;
  }

  .stat-tile-value {
    font-size: 22px;
  }
}

/* --- Ecran d'appel --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* Demarrer et Arreter a parts egales, sur toute la largeur : ce sont les deux boutons qu'on
     vise sans regarder. */
  .controls-row {
    flex-wrap: nowrap;
    gap: 10px;
  }

  .controls-row .btn {
    flex: 1 1 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .stat-row {
    gap: 8px;
  }

  .stat-card {
    padding: 12px 8px;
  }

  .stat-label {
    font-size: 10.5px;
    letter-spacing: 0.02em;
  }

  /* Vendeur / Prospect / Basculer sur une ligne, a parts egales. */
  .role-btn-group {
    flex-wrap: nowrap;
    gap: 6px;
  }

  .role-btn-group .pill-btn {
    flex: 1 1 auto;
    padding: 9px 8px;
    white-space: nowrap;
  }

  /* "Espace pour basculer" : sans clavier, l'astuce n'a pas de sens. */
  .role-toggle-hint {
    display: none;
  }
}

/* --- Page Profil ----------------------------------------------------------------------------
   Libelle et valeur cote a cote coupaient l'adresse e-mail en trois morceaux. Sur telephone, le
   libelle passe au-dessus de sa valeur. */
@media (max-width: 640px) {
  .account-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .info-list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .info-list dd {
    margin-bottom: 10px;
    overflow-wrap: anywhere;
  }
}

/* --- Page d'accueil ---------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* "Essayer gratuitement" passait sur deux lignes dans la barre du haut. */
  .landing-nav-cta .btn {
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  /* Le retour a la ligne force du titre est pense pour l'ordinateur ; sur telephone il isolait
     un mot seul. On laisse le navigateur equilibrer les lignes. */
  .hero-title br {
    display: none;
  }

  .hero-title {
    text-wrap: balance;
  }

  /* Pack de minutes : le texte au-dessus, le prix et le bouton en dessous, sans que le bouton
     soit ecrase sur deux lignes. */
  .pricing-addon {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .pricing-addon-action {
    justify-content: space-between;
  }

  .pricing-addon-action .btn {
    white-space: nowrap;
  }

  /* Cartes de fonctionnalites un peu plus compactes : sur une seule colonne, six cartes font
     deja une longue page. */
  .feature-card {
    padding: 20px 20px 22px;
  }

  .feature-icon {
    margin-bottom: 16px;
  }

  .feature-card h3 {
    margin-bottom: 10px;
  }
}

/* --- Zones tactiles ----------------------------------------------------------------------
   Un doigt vise moins precisement qu'un pointeur : les recommandations tournent autour de 40px
   de haut minimum. Onglets, selecteur de langue, menu de profil et petites icones (fleches du
   calendrier, croix de fermeture) etaient entre 27 et 35px. */
@media (max-width: 640px) {
  .topnav-inner:has([data-account-menu]) .topnav-links > a {
    padding-top: 11px;
    padding-bottom: 11px;
  }

  .lang-switch-current,
  .account-menu-trigger {
    min-height: 38px;
  }

  .btn-icon {
    min-width: 38px;
    min-height: 38px;
  }
}

/* --- Detail d'un appel (fenetre superposee, dashboard et apercu de l'accueil) ------------- */
@media (max-width: 640px) {
  .overlay {
    padding: 12px;
  }

  .overlay-panel {
    padding: 22px 18px;
  }

  /* Le champ gardait sa largeur minimale naturelle et poussait "Enregistrer" hors de l'ecran. */
  .phone-box-row input[type="tel"] {
    min-width: 0;
  }

  /* Quatre onglets repartis sur la largeur, sans que le dernier colle au bord. */
  .detail-tabs {
    justify-content: space-between;
    gap: 0;
  }

  .detail-tab {
    margin-right: 0;
    padding: 11px 4px;
  }
}

/* --- Champs de saisie ----------------------------------------------------------------------
   Sur iPhone, un champ ecrit en moins de 16px declenche un zoom automatique de la page des
   qu'on le touche, et la page reste zoomee ensuite. */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="url"],
  select,
  textarea,
  .field input[type="text"],
  .field input[type="email"],
  .field input[type="password"],
  .field textarea,
  .field select,
  .phone-box input[type="tel"],
  .appointment-box input[type="datetime-local"],
  .notes-textarea {
    font-size: 16px;
  }
}

/* --- Barre de bienvenue (page d'accueil, connecte) -----------------------------------------
   "Demarrer un appel" et "Tableau de bord" passaient chacun sur deux lignes. Les boutons gardent
   leur libelle sur une ligne : cote a cote s'ils tiennent, l'un sous l'autre sinon. */
@media (max-width: 640px) {
  .welcome-bar-actions .btn {
    flex: 1 1 auto;
    white-space: nowrap;
  }
}

/* Petites commandes de la fenetre de detail : marqueur "Closing", modifier/supprimer le RDV. */
@media (max-width: 640px) {
  .closing-toggle-btn {
    width: 38px;
    height: 38px;
    right: 60px;
  }

  .overlay-panel .btn-ghost {
    min-height: 38px;
  }
}

@media (max-width: 640px) {
  /* Le logo de la barre est un lien : zone tactile a la hauteur des boutons voisins. */
  .topnav-brand {
    min-height: 38px;
  }

  .connection-row .btn {
    min-height: 38px;
  }
}

@media (max-width: 720px) {
  .landing-nav-cta .btn {
    min-height: 38px;
  }

  /* Liens du pied de page : 16px de haut, trop fins pour un doigt. */
  .legal-footer-links a {
    display: inline-block;
    padding: 10px 6px;
  }
}

@media (max-width: 720px) {
  /* Compense l'espace ajoute autour de chaque lien ci-dessus. */
  .legal-footer-links {
    gap: 0 8px;
    margin-top: 6px;
  }
}

/* --- Tres petits ecrans (320 a 380px : ancien iPhone SE, petits Android) -------------------
   A 320px, la barre du haut, le bouton du pack de minutes et la barre fixe du bas debordaient
   ensemble de 49px. On resserre les marges et les libelles plutot que de laisser la page
   defiler de travers. */
@media (max-width: 380px) {
  .landing-nav-inner {
    padding-left: 12px;
    padding-right: 12px;
  }

  .landing-nav-cta .btn {
    font-size: 12.5px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .landing-nav .lang-switch-globe,
  .landing-nav .lang-switch-caret {
    display: none;
  }

  .landing-nav-inner,
  .landing-nav-cta {
    gap: 6px;
  }

  .sticky-cta {
    gap: 6px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .sticky-cta-secondary {
    font-size: 13px;
    padding: 0 6px;
  }

  .sticky-cta-main {
    font-size: 14px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media (max-width: 480px) {
  /* Si le prix et le bouton ne tiennent plus cote a cote, le bouton passe dessous, en entier. */
  .pricing-addon-action {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pricing-addon-action .btn {
    flex: 1 1 auto;
  }
}

/* ============================================================================================
   PAGE D'ACCUEIL COMPACTE SUR TELEPHONE
   L'audience vient surtout d'ordinateurs ; sur telephone, la page sert a convaincre en quelques
   secondes quelqu'un qui arrive d'un lien. Tout y etait simplement a la taille bureau, empile :
   des ecrans entiers pour six cartes. On garde TOUS les textes, mais en plus petit et en grilles
   serrees, pour que chaque section tienne en un ou deux ecrans.
   ============================================================================================ */
@media (max-width: 640px) {
  /* --- Rythme general --- */
  .section {
    padding: 44px 14px;
  }

  .section-kicker {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .section-title {
    font-size: 22px;
    margin-bottom: 8px;
  }

  .section-subtitle {
    font-size: 13.5px;
    margin-bottom: 22px;
  }

  #pricing .section-title {
    margin-bottom: 22px;
  }

  /* --- Hero --- */
  .hero {
    padding: 36px 16px 0;
  }

  .hero-title {
    font-size: 26px;
    margin-bottom: 12px;
  }

  .hero-subtitle {
    font-size: 14.5px;
    margin-bottom: 20px;
  }

  .hero-cta {
    gap: 8px;
    margin-bottom: 10px;
  }

  .hero-cta .btn-lg {
    padding: 11px 18px;
    font-size: 14.5px;
  }

  .cta-reassure {
    font-size: 12px;
    margin: 10px 0 14px;
  }

  .hero-trust {
    gap: 6px;
    margin-bottom: 24px;
  }

  .hero-trust span {
    font-size: 11.5px;
    padding: 4px 10px;
  }

  .mock-body {
    padding: 16px 16px 20px;
  }

  .mock-live {
    margin-bottom: 10px;
  }

  .mock-suggestion-text {
    font-size: 17px;
  }

  /* Reserve de hauteur recalee sur la taille reduite : le plus long detail tient en deux lignes
     a 375px. Sans reserve suffisante, la maquette qui s'ecrit en boucle ferait bouger la page. */
  .mock-suggestion-detail {
    font-size: 12.5px;
    min-height: 3.1em;
  }

  .section-logos {
    padding: 18px 14px;
  }

  .trust-band {
    gap: 6px 14px;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .section-logos p {
    font-size: 12px;
  }

  /* --- Fonctionnalites : les six cartes sur deux lignes --- */
  .feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .feature-card {
    padding: 11px 9px 12px;
    border-radius: 10px;
  }

  .feature-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    margin-bottom: 8px;
  }

  .feature-icon svg {
    width: 14px;
    height: 14px;
  }

  .feature-card h3 {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 5px;
  }

  .feature-card p {
    font-size: 10.5px;
    line-height: 1.45;
  }

  /* --- Comment ca marche : les trois etapes sur une ligne --- */
  .scene {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .step {
    padding: 11px 9px 12px;
    border-radius: 10px;
  }

  .step-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
    margin-bottom: 8px;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14);
  }

  /* Icone decorative du coin : dans une carte de 110px, elle chevauchait le numero. */
  .step-icon {
    display: none;
  }

  .step-time {
    display: block;
    width: fit-content;
    font-size: 9.5px;
    padding: 2px 6px;
    margin-bottom: 6px;
  }

  .step h3 {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 5px;
  }

  .step p {
    font-size: 10.5px;
    line-height: 1.45;
  }

  /* --- Tarifs : les quatre offres en 2 x 2 --- */
  .pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .pricing-card {
    padding: 16px 12px 14px;
    border-radius: 12px;
  }

  .pricing-card h3 {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .pricing-amount {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .pricing-amount span {
    font-size: 11px;
  }

  .pricing-features {
    font-size: 11.5px;
    gap: 6px;
    margin-bottom: 12px;
  }

  .pricing-card .btn {
    padding: 9px 4px;
    font-size: 12px;
    white-space: nowrap;
  }

  .pricing-badge {
    font-size: 10px;
    padding: 3px 8px;
    top: -9px;
    right: 10px;
  }

  .pricing-addon {
    padding: 14px;
    margin-top: 14px;
  }

  .pricing-addon strong {
    font-size: 13.5px;
  }

  .pricing-addon p {
    font-size: 12px;
  }

  .pricing-addon-price {
    font-size: 18px;
  }

  .pricing-vat-note {
    font-size: 11px;
    margin-top: 12px;
  }

  /* --- FAQ --- */
  .faq-list {
    gap: 6px;
  }

  .faq-item {
    padding: 0 14px;
  }

  .faq-item summary {
    font-size: 13.5px;
    padding: 13px 0;
  }

  .faq-item p {
    font-size: 12.5px;
    margin-bottom: 12px;
  }

  /* --- Appel final et pied de page --- */
  .section-cta {
    padding: 44px 16px 90px;
  }

  .section-cta h2 {
    font-size: 22px;
  }

  .section-cta p {
    font-size: 13.5px;
    margin-bottom: 18px;
  }

  .landing-footer {
    padding: 24px 16px 90px;
  }
}


@media (max-width: 380px) {
  /* A 320px, le meme detail peut prendre trois lignes. */
  .mock-suggestion-detail {
    min-height: 4.6em;
  }
}

@media (max-width: 640px) {
  /* Cartes de 100px de large : un mot comme "automatiquement" n'y tient pas d'un bloc a 320px.
     Cesure selon la langue de la page, et coupure en dernier recours. */
  .feature-card h3,
  .feature-card p,
  .step h3,
  .step p,
  .step-time {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ============================================================================================
   TELEPHONE : MOINS DE TEXTE DANS LES CARTES, APERCU DU DASHBOARD AERE
   Meme compactees, les cartes restaient des paves de texte en 10px, et la miniature du
   dashboard etait illisible a force de tout montrer en petit. Sur telephone, une carte se lit
   en un coup d'oeil ou pas du tout : on garde ce qui accroche (icone, titre, duree) et on laisse
   les explications detaillees a la version ordinateur. Le texte reste dans la page - il est
   seulement masque sur les petits ecrans.
   ============================================================================================ */
@media (max-width: 640px) {
  /* --- Fonctionnalites : icone + titre --- */
  .feature-card p {
    display: none;
  }

  .feature-card {
    padding: 12px 8px;
    text-align: center;
  }

  .feature-icon {
    margin: 0 auto 8px;
  }

  .feature-card h3 {
    font-size: 12px;
    margin: 0;
  }

  /* --- Comment ca marche : numero, duree, titre --- */
  .step p {
    display: none;
  }

  .step {
    padding: 12px 8px;
    text-align: center;
  }

  .step-number {
    margin: 0 auto 8px;
  }

  .step-time {
    margin: 0 auto 6px;
  }

  .step h3 {
    font-size: 12px;
    margin: 0;
  }

  /* Le bandeau de confiance juste en dessous repete deja "aucun audio enregistre" et
     "reponse en moins d'une seconde" : dans le hero, on ne les affiche qu'une fois. */
  .hero-trust {
    display: none;
  }

  /* --- Apercu du dashboard ---
     Sur telephone, l'apercu montre les statistiques, le calendrier du mois avec ses rendez-vous,
     les prochains rendez-vous et le nombre de closing. L'historique des appels, qui doublait la
     hauteur de l'apercu, est reserve a l'ordinateur - et avec lui l'invitation "cliquez sur un
     appel", qui n'aurait plus rien a designer. */
  .preview-topbar {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .preview-body {
    padding: 12px;
  }

  .preview-body .stats-row {
    gap: 8px;
    margin-bottom: 10px;
  }

  .preview-body .stat-tile {
    padding: 10px 12px;
  }

  .preview-body .stat-tile-label {
    font-size: 10px;
  }

  .preview-body .stat-tile-value {
    font-size: 18px;
  }

  .preview-body .dashboard-grid {
    gap: 10px;
  }

  .preview-body .dashboard-col-left {
    gap: 10px;
  }

  .preview-body .calendar-card {
    padding: 12px 14px;
  }

  .preview-body .calendar-header {
    margin-bottom: 8px;
  }

  .preview-body .calendar-grid {
    gap: 2px;
    margin-bottom: 10px;
  }

  .preview-body .cal-day {
    font-size: 12px;
  }

  .preview-body .upcoming-list {
    padding-top: 10px;
    font-size: 12.5px;
  }

  .preview-body .upcoming-item {
    padding: 6px 0;
  }

  .preview-body .upcoming-item:nth-child(n + 3) {
    display: none;
  }

  .preview-body .closing-stat-tile {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .preview-body .history-card,
  .preview-call-hint {
    display: none;
  }
}

/* ============================================================================================
   TELEPHONE : FINITIONS DE CONVERSION DE LA PAGE D'ACCUEIL
   ============================================================================================ */
@media (max-width: 640px) {
  /* --- Une action principale, evidente, a la largeur du pouce ---
     Les deux boutons du hero n'avaient pas la meme largeur (le principal etait plus etroit que
     le secondaire) : l'oeil hesitait entre deux cibles. Le bouton principal prend toute la
     largeur utile ; le secondaire le suit, meme largeur, plus discret. */
  .hero-cta {
    flex-direction: column;
    align-items: stretch;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta .btn-lg {
    width: 100%;
    justify-content: center;
    padding-top: 13px;
    padding-bottom: 13px;
  }

  .hero-cta .btn-accent {
    font-size: 15.5px;
    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.28);
  }

  .hero-cta .btn-ghost-light {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .hero-subtitle {
    font-size: 14px;
    line-height: 1.55;
    max-width: 34ch;
    margin-left: auto;
    margin-right: auto;
  }

  /* --- Maquette du hero ---
     La hauteur reservee contre les sauts de page etait repartie entre la suggestion et sa phrase,
     ce qui laissait un trou au milieu du bloc. Elle est desormais portee par le bloc entier : le
     contenu reste groupe en haut, l'eventuel espace libre tombe en bas, la ou il ne se voit pas.
     Hauteurs mesurees sur les trois suggestions, dans les quatre langues. */
  .mock-suggestion-text,
  .mock-suggestion-detail {
    min-height: 0;
  }

  .mock-body {
    min-height: 165px;
  }

  /* Le bloc etait coupe net en bas, colle a la section suivante (dessin pense pour l'ordinateur,
     ou il deborde volontairement du hero). */
  .hero {
    padding-bottom: 28px;
  }

  .mock-window {
    border-radius: 14px;
  }


  /* --- Titres : lignes equilibrees, pas de mot ou de "?" isole --- */
  .section-title,
  .hero-title,
  .section-cta h2 {
    text-wrap: balance;
  }

  .faq-item summary,
  .section-subtitle,
  .hero-subtitle {
    text-wrap: pretty;
  }

  /* --- Dashboard : le sous-titre invite a "cliquer sur un appel", or l'historique n'est pas
     affiche sur telephone. --- */
  #dashboard-preview .section-subtitle {
    display: none;
  }

  #dashboard-preview .section-title {
    margin-bottom: 20px;
  }

  /* --- Appel final : meme bouton que le hero, a la largeur du pouce --- */
  .section-cta .btn-lg {
    display: flex;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    justify-content: center;
  }

  .section-cta .cta-reassure {
    margin-top: 12px;
  }
}

@media (max-width: 400px) {
  .mock-body {
    min-height: 185px;
  }
}