/* ==========================================================================
   RACINE WEB — RESPONSIVE
   Points de rupture alignes sur ceux de Divi : 734 / 980 / 1100 px.
   L'echelle typographique elle-meme est adaptee dans design-tokens.css ;
   ce fichier ne traite que la mise en page.
   ========================================================================== */

/* ---- Tablette et en dessous (≤ 980px) ---------------------------------- */

@media (max-width: 980px) {

  /* Les titres du premier ecran ne doivent jamais deborder. */
  #page-container h1,
  #page-container h2 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Boutons : cible tactile d'au moins 44px de haut. */
  #page-container .et_pb_button,
  #page-container .et_pb_contact_submit {
    padding: 14px 26px;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #page-container .et_pb_button:hover { padding: 14px 26px; }

  /* Champs de formulaire : jamais sous 16px, sinon iOS zoome au focus. */
  #page-container .et_pb_contact_form input,
  #page-container .et_pb_contact_form textarea {
    font-size: 16px;
  }
}

/* ---- Mobile (≤ 734px) --------------------------------------------------- */

@media (max-width: 734px) {

  /* Les grilles de cartes passent en colonne unique avec un vrai espacement. */
  #page-container .et_pb_column {
    margin-bottom: var(--rw-s-6);
  }
  #page-container .et_pb_column:last-child {
    margin-bottom: 0;
  }

  /* Les tableaux et blocs larges defilent dans leur propre conteneur,
     jamais la page entiere. */
  #page-container table,
  #page-container pre {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  /* Les images de fond en parallaxe sont couteuses et peu lisibles
     sur petit ecran. */
  #page-container .et_pb_section {
    background-attachment: scroll;
  }

  /* Confort de lecture : le texte ne colle pas aux bords. */
  #page-container .et_pb_row {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }

  /* Les boutons cote a cote s'empilent proprement. */
  #page-container .et_pb_button_module_wrapper {
    display: block;
    width: 100%;
  }
  #page-container .et_pb_button_module_wrapper .et_pb_button {
    width: 100%;
    text-align: center;
  }
}

/* ---- Tres petits ecrans (≤ 400px) --------------------------------------- */

@media (max-width: 400px) {
  #page-container .et_pb_button,
  #page-container .et_pb_contact_submit {
    padding: 13px 20px;
    font-size: 16px;
  }
  #page-container .et_pb_button:hover { padding: 13px 20px; }
}

/* ---- Grands ecrans (≥ 1441px) -------------------------------------------
   La colonne de lecture reste bornee : un texte a 1400px de large est
   illisible, quelle que soit la taille de l'ecran.
   ------------------------------------------------------------------------ */

@media (min-width: 1441px) {
  #page-container .et_pb_text p,
  #page-container .et_pb_blurb_description p {
    max-width: var(--rw-w-text);
  }
  #page-container .et_pb_text_align_center .et_pb_text p,
  #page-container .et_pb_text_align_center p {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- Impression --------------------------------------------------------- */

@media print {
  #page-container .et_pb_section { padding: 0 !important; }
  #page-container a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}