/* europeanGPU — adaptation mobile / tablette.
 *
 * Les pages de la maquette (Maquette/*.dc.html) sont stylées en ligne
 * (attributs `style`) et rendues par le runtime _ds. Cette feuille est une
 * couche d'overrides responsive partagée par toutes les pages et toutes les
 * langues : elle ne contient que des règles sous media query, en `!important`
 * pour primer sur les styles en ligne.
 *
 * Contraintes de sélection : le runtime reconstruit l'attribut `style` via
 * React, donc la sérialisation des valeurs n'est pas garantie (`minmax(0,420px)`
 * peut devenir `minmax(0px, 420px)`). On ne cible donc que des NOMS de
 * propriétés ([style*="grid-template-columns"]), des classes du design system
 * et la structure du document (`.nav + div` = conteneur principal).
 */

/* ── Toutes tailles : la pastille décorative des héros (position:absolute,
   right négatif) déborde du conteneur dès que l'écran fait moins de ~1360 px
   et crée un défilement horizontal — le `overflow-x: clip` du body n'est pas
   propagé à la fenêtre par tous les navigateurs. On rogne au bord du
   conteneur principal, horizontalement seulement (rien n'est coupé en hauteur). */
.nav + div { overflow-x: clip; }

/* ── Portable et tablette paysage : la barre ne tient plus sur une ligne
   (marque + 6 liens + langue + bouton ≈ 1300 px). Plutôt qu'un retour à la
   ligne aléatoire au milieu des liens : ligne 1 = marque, langue, bouton ;
   ligne 2 = liens de section centrés. */
@media (max-width: 1360px) and (min-width: 901px) {
  .nav { flex-wrap: wrap !important; gap: 10px 16px !important; padding-block: 12px !important; }
  .nav > a:first-child { order: 1; flex: 1 1 auto !important; }
  .nav > select { order: 2; }
  .nav > a:last-child { order: 3; }
  .nav > div { order: 4; flex: 1 1 100% !important; justify-content: center !important; gap: 6px 28px !important; }
}

/* ── Tablette étroite et mobile : navigation sur deux lignes ───────────── */
@media (max-width: 900px) {
  .nav {
    flex-wrap: wrap !important;
    gap: 12px 16px !important;
    padding: 12px clamp(16px, 4vw, 32px) !important;
  }
  /* Ligne 1 : marque à gauche, bouton « Prendre rendez-vous » à droite */
  .nav > a:first-child { order: 1; flex: 1 1 auto !important; }
  .nav > a:last-child {
    order: 2;
    flex: 0 0 auto !important;
    margin-left: auto;
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
  /* Ligne 2 : liens de section à gauche, sélecteur de langue à droite */
  .nav > div {
    order: 3;
    flex: 1 1 60% !important;
    justify-content: flex-start !important;
    gap: 4px 18px !important;
  }
  .nav > div > a { padding: 6px 0; font-size: 15px !important; }
  .nav > select { order: 4; flex: 0 0 auto !important; align-self: flex-start; }

  .nav + div > section:first-of-type { padding-top: 56px !important; }

  /* Blocs « titre à gauche / texte à droite » et « texte / code » : la colonne
     de 420 px ne laisse plus assez de place au texte → une seule colonne */
  .nav + div [style*="420px"],
  .nav + div [style*="5fr"] { grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; }
  .nav + div [style*="baseline"] { padding: 20px 0 !important; }
}

/* ── Mobile : une seule colonne partout ────────────────────────────────── */
@media (max-width: 760px) {
  /* Conteneur principal */
  .nav + div { padding: 0 20px !important; }

  /* Titres : tailles fluides plus compactes, et pas de débordement de mot */
  .nav + div h1 { font-size: clamp(30px, 8.6vw, 44px) !important; line-height: 1.1 !important; }
  .nav + div h2 { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.22 !important; }
  .nav + div h3 { font-size: clamp(20px, 5.6vw, 24px) !important; line-height: 1.25 !important; }
  .nav + div h1, .nav + div h2, .nav + div h3 { overflow-wrap: anywhere; }
  .nav + div .card-title { font-size: 17px !important; line-height: 1.25 !important; }

  /* Sections : moins d'air vertical */
  .nav + div > section { padding-bottom: 44px !important; }
  .nav + div > section:first-of-type { padding-top: 40px !important; padding-bottom: 32px !important; }

  /* Pastille décorative des héros : réduite pour ne pas écraser le titre */
  .nav + div [style*="pointer-events"] {
    width: 220px !important; height: 220px !important;
    right: -90px !important; top: -90px !important;
  }

  /* Toutes les grilles en ligne passent sur une colonne : blocs
     titre + texte, code + texte, encarts d'appel à l'action, formulaire,
     cartes, pied de page */
  .nav + div [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  .nav + div [style*="grid-template-columns"] > .btn { justify-self: start; }
  .nav + div [style*="baseline"] { padding: 18px 0 !important; }
  .nav + div [style*="grid-template-columns"] .card,
  .nav + div [style*="grid-template-columns"] > a > .card { height: auto !important; }

  /* Encarts arrondis (appel à l'action, formulaire, article à la une) */
  .nav + div section > div[style*="background"]:not([style*="aspect-ratio"]):not([style*="pointer-events"]),
  .nav + div section > a > article[style*="background"] {
    padding: 28px 22px !important;
    border-radius: 24px !important;
  }
  .nav + div section > a > article[style*="background"] { gap: 18px !important; }

  /* Chiffres clés : cercles deux par ligne, alignés, sans décalage vertical
     (directement dans une section, ou dans un div flex intermédiaire) */
  .nav + div section[aria-label],
  .nav + div section > div:has(> div[style*="aspect-ratio"]) { gap: 16px !important; align-items: stretch !important; }
  .nav + div div[style*="aspect-ratio"] {
    width: calc(50% - 8px) !important;
    padding: 16px !important;
    transform: none !important;
  }
  .nav + div div[style*="aspect-ratio"] > p:first-child { font-size: clamp(22px, 7vw, 30px) !important; }
  .nav + div div[style*="aspect-ratio"] > p:last-child { font-size: 10.5px !important; margin-top: 6px !important; letter-spacing: 0.04em !important; }

  /* Tableaux (tarifs, benchmarks) : défilement horizontal dans leur cadre */
  .nav + div table.table {
    display: block !important;
    width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
  }
  .nav + div table.table th, .nav + div table.table td { padding: 8px 8px !important; white-space: nowrap; }
  .nav + div table.table td[colspan] { white-space: normal; }
  /* Première colonne (nom + description) : la description passe à la ligne
     pour laisser les colonnes de prix visibles sans défiler */
  .nav + div table.table td > span { display: block; white-space: normal; max-width: 150px; margin-top: 2px; }
  .nav + div table.table td[style*="font-size"] { font-size: 18px !important; }

  /* Blocs de code */
  .nav + div [style*="overflow"] { padding: 16px 14px !important; border-radius: 18px !important; }
  .nav + div pre { font-size: 12px !important; line-height: 19px !important; }

  /* Citations */
  .nav + div blockquote { font-size: 22px !important; line-height: 1.4 !important; }

  /* Formulaire : bouton pleine largeur */
  .nav + div #rdv-submit { width: 100%; }

  /* Pied de page compact */
  .nav + div > footer { padding: 32px 0 !important; gap: 12px !important; justify-content: flex-start !important; }

  /* Encadrés des articles de blog */
  .art .encadre { padding: 22px 20px !important; border-radius: 22px !important; }
}

/* ── Téléphones ────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* La police d'affichage est trop large pour aligner marque et bouton :
     ligne 1 = marque + sélecteur de langue ; ensuite les liens de section et
     le bouton « Prendre rendez-vous » s'enchaînent dans un même flux qui
     passe à la ligne librement (le conteneur des liens devient transparent). */
  .nav { gap: 0 16px !important; padding: 10px 14px 6px !important; }
  .nav::before { content: ''; order: -1; flex: 1 0 100%; height: 0; }
  .nav > a:first-child { order: -3; flex: 1 1 auto !important; gap: 8px !important; margin-bottom: 8px; }
  .nav > a:first-child > svg { width: 26px; height: 26px; }
  .nav > a:first-child > span > span:first-child { font-size: 17px !important; }
  .nav > select { order: -2; flex: 0 0 auto !important; align-self: center; margin-bottom: 8px; }
  .nav > div { display: contents !important; }
  .nav > div > a { order: 0; padding: 8px 0; font-size: 15px !important; }
  .nav > a:last-child { order: 1; margin: 4px 0 4px auto; padding: 7px 12px !important; font-size: 12px !important; }

  .nav + div { padding: 0 16px !important; }
  .nav + div div[style*="aspect-ratio"] > p:first-child { font-size: 21px !important; }
  /* Bandeau d'annonce */
  [data-screen-label] > div:first-child:not(.nav) { font-size: 13px !important; padding: 8px 14px !important; }
}

/* ── Très petits téléphones (≤ 360 px) : marque + sélecteur restent sur une ligne */
@media (max-width: 400px) {
  .nav > a:first-child > span > span:first-child { font-size: 16px !important; }
  .nav > select { padding: 6px 8px !important; font-size: 12px !important; }
}