/* ==========================================================================
   SUCCEO — responsive.css
   Approche mobile-first : ce fichier ne contient que des adaptations pour
   les écrans plus larges (min-width). À charger en dernier.

   Points de rupture retenus :
     480px   grands téléphones
     640px   petites tablettes / téléphones en paysage
     768px   tablettes
     900px   bascule du menu burger vers la navigation horizontale
     1024px  ordinateurs portables
     1200px  grands écrans
   ========================================================================== */

/* ==========================================================================
   < 480px — le groupe de boutons est encore en colonne
   --------------------------------------------------------------------------
   Chaque bouton occupe alors toute la largeur : le « white-space: nowrap »
   des boutons n'a plus d'utilité et devient nuisible. « Découvrir la solution
   pour mon entreprise » réclame 408 px insécables, pour 343 px disponibles
   sur un téléphone de 375 px — le libellé sortait de l'écran.
   Au-delà de 480px le groupe repasse en ligne, les boutons retrouvent leur
   largeur naturelle et nowrap redevient la règle.
   ========================================================================== */

@media (max-width: 479px) {

  .btn-group > .btn,
  .btn--block { white-space: normal; }
}

/* ==========================================================================
   < 900px — ergonomie tactile du pied de page
   --------------------------------------------------------------------------
   Les liens du pied de page ne font que 19 px de haut : sous le doigt, c'est
   peu. On les épaissit à 35 px de zone cliquable en compensant sur l'écart
   vertical, pour ne pas allonger la colonne.
   ========================================================================== */

@media (max-width: 899px) {

  .footer-col ul { gap: 0; }

  .footer-col ul a,
  .site-footer__legal a,
  .site-footer__legal .link-button {
    display: inline-block;
    padding-block: var(--sp-2);
  }
}

/* ==========================================================================
   ≥ 480px — grands téléphones
   ========================================================================== */

@media (min-width: 480px) {

  /* Les boutons se placent côte à côte dès qu'il y a la place. */
  .btn-group {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cookie-banner__actions {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   ≥ 640px — petites tablettes
   ========================================================================== */

@media (min-width: 640px) {

  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }


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

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }


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

  /* Champs qui occupent toute la largeur de la grille de formulaire. */
  .form-grid .field--full { grid-column: 1 / -1; }




  .form-card { padding: var(--sp-8); }


  /* La modale se centre et prend une forme de fenêtre. */
  .modal { align-items: center; padding: var(--sp-6); }

  .modal__dialog {
    max-width: 720px;
    max-height: 86vh;
    border-radius: var(--radius-lg);
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-8);
  }

  .cookie-banner__actions {
    grid-auto-flow: column;
    grid-template-columns: none;
    flex: none;
  }
}

/* ==========================================================================
   ≥ 768px — tablettes
   ========================================================================== */

@media (min-width: 768px) {

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

  .actors { grid-template-columns: repeat(3, 1fr); gap: var(--sp-6); }

  /* Le connecteur passe à l'horizontale entre les trois acteurs. */
  .actor::after {
    left: auto;
    right: calc(-1 * var(--sp-6) - 1px);
    bottom: auto;
    top: 50%;
    transform: translate(50%, -50%) rotate(-45deg);
  }

  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); }

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

  .cta-split { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }

  .trustbar__list { grid-template-columns: repeat(4, 1fr); }

  .cta-band { padding: var(--sp-12); }

  .cta-band .btn-group { justify-content: center; }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-10) var(--sp-8);
  }

  .site-footer__brand { grid-column: 1 / -1; max-width: 46ch; }

  .site-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .hero__floating { display: flex; }

  .brand__sub {
    display: block;
    padding-left: var(--sp-3);
    border-left: 1px solid var(--c-border);
  }
}

/* ==========================================================================
   ≥ 900px — navigation horizontale (le menu burger disparaît)
   --------------------------------------------------------------------------
   La barre accueille sur une seule ligne le logo, les cinq entrées du menu
   et l'unique bouton d'action : elle tient dès 900px. En dessous, le menu
   burger reste la mise en page la plus lisible.
   ========================================================================== */

@media (min-width: 900px) {

  html { scroll-padding-top: calc(var(--header-h-lg) + var(--sp-4)); }

  .site-header__inner { min-height: var(--header-h-lg); }

  .nav-toggle { display: none; }

  .site-nav {
    position: static;
    inset: auto;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-2);
    padding: 0;
    background: transparent;
    border: 0;
    overflow: visible;
    transform: none;
    visibility: visible;
    transition: none;
    margin-inline: auto;
  }

  /* Éléments propres au panneau mobile : la barre de fermeture, les intitulés
     de groupe et les entrées secondaires. Sur cette largeur, le volet
     « toutes les pages » de l'en-tête reprend ce rôle. */
  .site-nav__bar,
  .site-nav__group,
  .site-nav__more { display: none; }

  /* La liste est le seul enfant du panneau à survivre ici : elle redevient la
     barre horizontale et ne doit plus porter la gouttière du panneau mobile.
     Même sélecteur d'enfant direct qu'à la déclaration, pour une spécificité
     égale — c'est l'ordre de chargement qui tranche, responsive.css en
     dernier. */
  .site-nav > .site-nav__list { padding-inline: 0; }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-1);
  }

  .site-nav__link {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }

  .site-nav__link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-accent); }

  /* Les appels à l'action du panneau mobile sont repris dans la barre. */
  .site-nav__cta,
  .site-nav__footnote { display: none; }

  .site-header__actions .btn { display: inline-flex; }

  /* Le complément de marque attend un écran plus large pour réapparaître. */
  .brand__sub { display: none; }

  .brand__logo { height: 38px; }

  .section-head { margin-bottom: var(--sp-12); }

  .hero__grid { gap: var(--sp-16); }
}

/* ==========================================================================
   ≥ 1024px — ordinateurs portables
   ========================================================================== */

@media (min-width: 1024px) {

  .grid--4 { grid-template-columns: repeat(4, 1fr); }



  .stats { grid-template-columns: repeat(5, 1fr); }


  .steps { grid-template-columns: repeat(4, 1fr); }

  /* Hero : texte à gauche, visuel à droite. Les deux pistes sont bornées par
     minmax(0, …) : sans le 0, une piste en « fr » garde un minimum implicite
     de min-content et peut dépasser la grille — le défaut qui sortait le hero
     de l'écran sur mobile. */
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--sp-12);
  }

  .hero__media img,
  .hero__media .media-placeholder { aspect-ratio: 5 / 4; }

  /* Mise en page à deux colonnes : contenu + colonne latérale collante. */
  .layout-aside {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--sp-12);
    align-items: start;
  }

  .layout-aside__side {
    position: sticky;
    top: calc(var(--header-h-lg) + var(--sp-6));
  }

  .layout-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-12);
    align-items: center;
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }

  .site-footer__brand { grid-column: auto; }

}

/* ==========================================================================
   ≥ 1200px — grands écrans
   ========================================================================== */

@media (min-width: 1200px) {

  .brand__sub {
    display: block;
    padding-left: var(--sp-3);
    border-left: 1px solid var(--c-border);
  }

  .site-nav__link { padding-inline: var(--sp-4); font-size: var(--fs-base); }
}

/* ==========================================================================
   TABLEAU COMPARATIF — passage en cartes empilées sous 768px
   --------------------------------------------------------------------------
   Le tableau reste un vrai <table> (sémantique conservée) : seule sa
   présentation change. Chaque cellule affiche le nom de sa colonne grâce à
   l'attribut data-label présent dans le HTML.
   ========================================================================== */

@media (max-width: 767px) {

  /* Le conteneur de défilement n'a plus lieu d'être : chaque ligne devient une
     carte autonome, plus rien ne dépasse en largeur.
     Ciblé sur la combinaison des deux classes, et non sur l'utilitaire
     .scroll-x seul : un autre contenu large pourrait avoir besoin de défiler. */
  .scroll-x.table-wrap { overflow: visible; }

  .compare {
    min-width: 0;
    display: block;
    background: transparent;
  }

  .compare thead { display: none; }

  .compare tbody,
  .compare tr,
  .compare th,
  .compare td { display: block; width: auto; }

  /* --- La carte ---------------------------------------------------------- */

  .compare tr {
    margin-bottom: var(--sp-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    background: var(--c-surface);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
  }

  .compare tr:last-child { margin-bottom: 0; }

  /* En-tête de carte : le libellé de ligne, en encre sur fond teinté. Il porte
     le sujet de la carte, il doit donc se distinguer nettement des valeurs. */
  .compare tbody th {
    width: auto;
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    border-bottom: 1px solid var(--c-border);
    background: var(--c-surface-alt);
    font-size: var(--fs-base);
    line-height: 1.35;
  }

  /* --- Les valeurs ------------------------------------------------------- */

  .compare td {
    padding: var(--sp-3) var(--sp-4);
    border: 0;
    background: transparent;
  }

  .compare td + td { border-top: 1px dashed var(--c-border); }

  /* Libellé de colonne réinjecté au-dessus de chaque valeur : sur une seule
     ligne, en petites capitales, avec un filet vert qui sert de repère
     visuel — sans lui, étiquette et valeur se confondent. */
  .compare td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--sp-1);
    padding-left: var(--sp-3);
    border-left: 2px solid var(--c-border-strong);
    font-size: 10px;
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--c-muted);
  }

  /* Colonne mise en avant : fond teinté sur toute la cellule, repère vert.
     C'est la lecture utile sur mobile — quelle est la réponse du CDI-E. */
  .compare td.is-featured {
    background: var(--c-accent-soft);
    color: var(--c-ink);
    font-weight: var(--fw-medium);
  }

  .compare td.is-featured::before {
    border-left-color: var(--c-accent);
    color: var(--c-accent-text);
  }

  .compare caption { padding-bottom: var(--sp-4); }
}

/* ==========================================================================
   ÉCRANS TRÈS ÉTROITS (≤ 360px)
   ========================================================================== */

@media (max-width: 360px) {

  :root { --fs-md: 1rem; }

  .btn { padding-inline: var(--sp-4); }

  .card,
  .job-card,
  .quote { padding: var(--sp-5); }
}

/* ==========================================================================
   ORIENTATION PAYSAGE SUR MOBILE
   ========================================================================== */

@media (max-width: 899px) and (orientation: landscape) {
  /* Le panneau de navigation doit rester scrollable sur écran bas. */
  .site-nav { padding-bottom: var(--sp-16); }
}