/* ==========================================================================
   Seasy Consulting - feuille de style transverse
   Chargee sur toutes les pages via <link> dans le <helmet>.

   Deux objectifs :
   1. Affichage mobile : aucun element ne depasse la largeur de l'ecran,
      aucun defilement horizontal possible, a 320 / 375 / 768 px.
   2. Images : aucune dimension figee liee au format du fichier d'origine,
      pour pouvoir remplacer une image par une autre sans casser la page.
      Voir COMMENT-CHANGER-UNE-IMAGE.md.

   Les regles hors media query sont neutres sur ordinateur.
   ========================================================================== */

/* --- 1. Modele de boite et confinement horizontal ------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

/* overflow-x: clip confine sans creer de conteneur de defilement,
   ce qui preserve le position:sticky de l'en-tete. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body { overflow-x: hidden; }
}

#dc-root,
#dc-root > .sc-host,
.sc-host { max-width: 100%; }

/* --- 2. Medias ----------------------------------------------------------- */

img,
svg,
video,
iframe,
canvas,
object { max-width: 100%; }

video { height: auto; }

/* --- 2 bis. Images : adaptation automatique au format --------------------
   Regle generale du site : aucune image ne porte de dimension figee liee
   au format du fichier d'origine. On peut donc remplacer n'importe quel
   fichier par un autre, portrait ou paysage, sans casser la mise en page.

   .sc-img-cover  L'image remplit un cadre dont les proportions sont fixees
                  par le conteneur. Recadrage automatique, jamais de
                  deformation ni de bandes vides.
   .sc-img-auto   L'image occupe toute la largeur disponible et sa hauteur
                  se deduit de son format reel. A utiliser quand la section
                  doit epouser le format du fichier.
   -------------------------------------------------------------------- */

img.sc-img-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

img.sc-img-auto {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* --- 3. Textes longs ----------------------------------------------------- */

h1, h2, h3, h4, h5, h6,
p, li, dd, dt, td, th,
a, span, label, summary, blockquote,
figcaption { overflow-wrap: break-word; }

/* Adresses email, URLs et references sans espace : coupure autorisee
   n'importe ou plutot que debordement. */
a[href^="mailto:"],
a[href^="http"],
a[href^="tel:"],
code,
pre { overflow-wrap: anywhere; word-break: break-word; }

pre { white-space: pre-wrap; }

/* Montants : jamais coupes entre les groupes de chiffres, jamais
   responsables d'un debordement. */
[style*="nowrap"] { max-width: 100%; }

/* --- 4. Formulaires ------------------------------------------------------ */

input,
select,
textarea,
button {
  font-family: inherit;
  max-width: 100%;
}

textarea { resize: vertical; }

/* --- 5. Tableaux --------------------------------------------------------- */

.sc-table-scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

table { max-width: 100%; }

/* ==========================================================================
   Tablette et en dessous
   ========================================================================== */

@media (max-width: 900px) {
  /* Titres et citations mis sur une seule ligne pour l'ordinateur :
     on rend la coupure possible des que la place manque. */
  .sc-nowrap-desk { white-space: normal !important; }
}

@media (max-width: 768px) {
  /* iOS zoome automatiquement sur un champ dont la police est < 16px. */
  input,
  select,
  textarea { font-size: 16px !important; }

  /* Un tableau ecrase sur 320 px devient illisible : on le rend
     defilant dans son conteneur dedie plutot que compresse. */
  .sc-table-scroll > table { min-width: 520px; }
}

@media (max-width: 720px) {
  /* Comparatif de tarifs « parcours » (page Financement) : cinq colonnes
     sur une seule ligne debordaient largement. Passage en colonne unique. */
  #parcours-etapes {
    grid-template-columns: 1fr !important;
    gap: 10px 0 !important;
  }
  #parcours-etapes > div { min-height: 0 !important; }
}

@media (max-width: 900px) {
  /* Encart de citation superpose au portrait de la page d'accueil :
     son decalage negatif (left:-34px) sortait de l'ecran. Il repasse
     dans le flux sous l'image. */
  .sc-carte-flottante {
    position: static !important;
    max-width: 100% !important;
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  /* Boutons et appels a l'action en pleine largeur. */
  .sc-cta-full {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Les sections utilisent un padding horizontal de 24 a 46 px en ligne.
     Sur un petit telephone il ne reste alors que ~230 px utiles, ce qui
     suffit a faire deborder cartes et grilles. On le ramene a 18 px. */
  section[data-screen-label],
  section[id] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }
}