/* Simon protege ca - surcharges responsive (design v2).
   La mise en page desktop est ecrite en style inline sur chaque element ;
   ces media queries n'agissent qu'aux petites largeurs. Points de rupture
   alignes sur bienvenue.html : 1000px intermediaire, 860px mobile,
   560px petit telephone. Le !important est necessaire pour battre les
   declarations de grille inline. */

/* Colonnes doubles (hero, texte + image, formulaire + aside) : empilees. */
@media (max-width: 860px) {
  .r-split { grid-template-columns: 1fr !important; }
}

/* Rangees de 3 cartes : 2 sur tablette, 1 sur telephone. */
@media (max-width: 860px) {
  .r-3up { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  .r-3up { grid-template-columns: 1fr !important; }
}

/* Mosaique de services (12 colonnes) : moitie sur tablette, empilee sur telephone. */
@media (min-width: 561px) and (max-width: 1000px) {
  .r-mosaic > * { grid-column: span 6 !important; grid-row: auto !important; }
  .r-mosaic > .r-mosaic-hero,
  .r-mosaic > .r-mosaic-full { grid-column: span 12 !important; }
}
@media (max-width: 560px) {
  .r-mosaic { grid-template-columns: 1fr !important; }
  .r-mosaic > * { grid-column: auto !important; grid-row: auto !important; }
}

/* Ligne de vie (5 etapes) : 3 sur tablette, 2 sur telephone, sans le rail. */
@media (max-width: 860px) {
  .r-lifeline { grid-template-columns: repeat(3, 1fr) !important; }
  .r-lifeline-rail { display: none !important; }
}
@media (max-width: 560px) {
  .r-lifeline { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Pages d'atterrissage publicitaires : barre d'action collante, mobile seulement. */
.r-mobile-cta { display: none !important; }
@media (max-width: 860px) {
  .r-mobile-cta { display: flex !important; }
  .r-lp-body { padding-bottom: 84px !important; }
}

/* Lignes insecables sur desktop, mais qui peuvent revenir a la ligne sur telephone. */
@media (max-width: 860px) {
  .r-nowrap-lg { white-space: normal !important; font-size: 19px !important; }
}

/* Pages legales : le sommaire cesse d'etre collant quand il passe au-dessus du texte. */
@media (max-width: 860px) {
  .pp-toc { position: static !important; }
}

/* En-tete collant sur telephone.

   Avant : le lockup iA disparaissait sous 560 px. Or c'est la caution du site,
   elle doit rester visible partout. On garde donc les deux logos et on reprend
   la place ailleurs : moins de marge interne, gouttieres resserrees, logos et
   CTA reduits. Le bouton a aussi perdu sa fleche, ce qui rend une quinzaine de
   pixels a lui seul.

   Budget a 320 px (le plus etroit encore courant) : 24 de marge interne,
   ~150 de lockup, 10 de gouttiere, ~105 de bouton. Ca tient. */
@media (max-width: 560px) {
  .sp-head { padding: 13px 16px !important; gap: 12px !important; }
  .sp-head-brand { gap: 9px !important; }
  .sp-head-logo { height: 34px !important; }
  .sp-head-rule { height: 20px !important; }
  .sp-head-ia { height: 15px !important; }
  .pub-head { padding-left: 16px !important; padding-right: 16px !important; }
  .r-head-sec { display: block !important; }
  .r-head-cta { font-size: 10.5px !important; letter-spacing: .04em !important; padding: 9px 14px !important; }
}

@media (max-width: 380px) {
  .sp-head { padding: 12px 12px !important; gap: 8px !important; }
  .sp-head-brand { gap: 7px !important; }
  .sp-head-logo { height: 29px !important; }
  .sp-head-rule { height: 17px !important; }
  .sp-head-ia { height: 13px !important; }
  .pub-head { padding-left: 12px !important; padding-right: 12px !important; }
  .r-head-cta { font-size: 9.5px !important; letter-spacing: .02em !important; padding: 8px 11px !important; }
}

/* Mot geant decoratif du pied de page. Son plancher clamp de 40 px depassait
   la largeur utile sous 380 px : « simonprotege.ca » a 40 px mesure 362 px
   dans 265 px disponibles, ce qui donnait un defilement horizontal sur TOUTE
   la page. On le laisse suivre la largeur d'ecran au lieu de plancher a 40. */
@media (max-width: 560px) {
  .sp-ft-mark { font-size: 9.5vw !important; }
  footer.site .brand-line { font-size: 9.5vw !important; }
}

/* Paire de boutons du heros : « Planifier une rencontre » + appel telephonique.
   Les deux restent cote a cote a toutes les largeurs (le conteneur est en
   flex-wrap:nowrap). Sous 560 px la paire ne tient plus a sa taille nominale :
   le numero cede la place a l'icone seule et le bouton principal se resserre.
   Le nom accessible du lien vient de son aria-label, il survit a la coupe.
   Largeurs mesurees, marge de section de 20 px de chaque cote :
   - palier 560 px : 226 + 10 + 51 = 287 px, tient des 340 px utiles (380 px) ;
   - palier 380 px : 206 + 8 + 49 = 263 px, tient des 280 px utiles (320 px).
   Les deux boutons gardent une hauteur de 48-49 px, au-dessus de la cible
   tactile de 44 px. */
@media (max-width: 560px) {
  .r-cta-row { gap: 10px !important; }
  .r-cta-row .sp-btn { font-size: 15px !important; padding: 14px 22px !important; gap: 8px !important; }
  .r-tel { font-size: 15px !important; padding: 14px !important; gap: 0 !important; }
  .r-tel-num { display: none !important; }
}
@media (max-width: 380px) {
  .r-cta-row { gap: 8px !important; }
  .r-cta-row .sp-btn { font-size: 14px !important; padding: 13px 18px !important; gap: 7px !important; }
  .r-tel { font-size: 14px !important; padding: 13px !important; }
}