/*
 * HGM CPA — correctifs téléphone et tablette.
 * Chargé après raffinements.css. Toutes les règles sont limitées aux écrans
 * de moins de 1200 px : l'affichage d'ordinateur n'est pas modifié.
 */

@media (max-width: 74.99rem) {
  /* Liens fléchés : la flèche suit le texte au lieu d'être rejetée à droite. */
  :root body .lien-fleche { display: inline; line-height: 1.55; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  :root body .lien-fleche svg { display: inline-block; vertical-align: -0.12em; margin-left: .4rem; }
  :root body .orga__panneau .lien-fleche, :root body .registre .lien-fleche { max-width: 100%; }

  /* « d’ » reste collé au terme qui le suit. */
  :root body .insecable { white-space: nowrap; }
  :root body .insecable .terme__bulle { white-space: normal; }

  /* Grilles de services : une carte seule en fin de grille prend toute la largeur. */
  :root body .grille-services > li:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Pied de page : la marque sur sa propre ligne, les trois colonnes dessous. */
  :root body .pied__grille { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2rem; }
  :root body .pied__marque { grid-column: 1 / -1; }
  :root body .pied__marque p { max-width: 24rem; }
  :root body .pied li + li { margin-top: .35rem; }
  :root body .pied ul a { display: inline-block; padding-block: .3rem; }
  :root body .pied__bas a { display: inline-block; padding-block: .5rem; }
}

/* ---------- Tablette en paysage (1089 à 1199 px) : services en trois colonnes ---------- */
@media (min-width: 68.01rem) and (max-width: 74.99rem) {
  :root body .services-unifies .volets { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; column-gap: 0; row-gap: 1rem; }
  :root body .services-unifies .volet { display: grid; grid-template-rows: subgrid; grid-row: span 4; justify-items: center; align-items: start; row-gap: 1rem; padding: 2.25rem 1.5rem; }
  :root body .services-unifies .volet__titre { align-self: center; }
  :root body .services-unifies .volet__description { grid-row: 3; }
  :root body .services-unifies .volet__lien { grid-row: 4; margin-top: 0; }
  :root body .pied__grille { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
  :root body .pied__marque { grid-column: auto; }
}

/* ---------- Tablette (641 à 1088 px) : services empilés, contenu centré ---------- */
@media (min-width: 40.01rem) and (max-width: 68rem) {
  :root body .services-unifies .volet { align-items: center; padding: 2.25rem clamp(1.5rem, 5vw, 3.5rem); }
  :root body .volet__entete { max-width: 40rem; }
}

/* ---------- Tablette (961 à 1199 px) : portrait et biographie côte à côte ---------- */
@media (min-width: 60rem) and (max-width: 74.99rem) {
  :root body .cpa { grid-template-columns: minmax(0, .8fr) minmax(0, 1.25fr); gap: 3rem; align-items: start; }
  :root body .cpa__visuel { max-width: none; position: sticky; top: calc(var(--haut-entete, 6rem) + 1.5rem); }
  :root body .cpa > div:last-child { max-width: none; margin: 0; }
}

/* ---------- Tablette portrait (641 à 960 px) ---------- */
@media (min-width: 40.01rem) and (max-width: 60rem) {
  :root body .hero__titre { font-size: clamp(3rem, 7.2vw, 4.25rem); }
  :root body .entete-page h1, :root body .tenue-entete h1 { font-size: clamp(2.5rem, 5.4vw, 3rem); }
  /* Étapes : numéro à gauche, texte à droite, plutôt qu'une longue pile centrée. */
  :root body .etapes-h > li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: 1.5rem; text-align: left; align-items: start; }
  :root body .etapes-h > li > * { grid-column: 2; text-align: left; margin-inline: 0; max-width: 36rem; }
  :root body .etapes-h .etapes-h__num { grid-column: 1; grid-row: 1 / span 3; margin: 0; text-align: center; line-height: 1; }
  :root body .etapes-h h3 br { display: none; }
  /* Menu : liste lisible plutôt que tirée sur toute la largeur. */
  :root body .nav__liste, :root body .nav__mobile-extra { max-width: 36rem; }
  :root body .nav__mobile-extra { justify-items: start; }
  :root body .nav__mobile-extra .bouton { width: auto; min-width: 18rem; }
}

/* ---------- Menu compact (tablette et téléphone, jusqu'à 1120 px) ---------- */
@media (max-width: 70rem) {
  /* La barre du courriel défile avec la page ; seule la barre du logo reste fixée.
     Aucun changement de hauteur pendant le défilement : pas de saut de page. */
  :root body .entete-site { top: calc(-1 * var(--haut-utilitaire, 2.5rem)); }
  :root body .barre-utilitaire__int { min-height: 2.4rem; }
}

/* ---------- Téléphone (640 px et moins) ---------- */
@media (max-width: 40rem) {
  :root { --haut-utilitaire: 2.5rem; }
  :root body .barre-principale__int,
  :root body .entete-site.est-defile .barre-principale__int { min-height: 4.25rem; }
  :root body .marque__img,
  :root body .entete-site.est-defile .marque__img { height: 3.4rem; }
  :root body .menu-mobile { width: 2.9rem; height: 2.9rem; }

  /* Mention du haut de l'accueil : deux lignes distinctes, sans mots collés. */
  :root body .hero__sur .hero__point { display: block; width: 1.5rem; height: 1px; border-radius: 0; margin-block: .2rem; opacity: .7; }
  :root body .hero__titre { font-size: clamp(2rem, 8.9vw, 2.9rem); line-height: 1.12; }

  /* Titres de pages intérieures un peu plus affirmés. */
  :root body .entete-page h1, :root body .tenue-entete h1 { font-size: clamp(2.1rem, 9vw, 2.5rem); line-height: 1.12; }

  /* Services de l'accueil : filet et sous-titre alignés sur le centrage du bloc. */
  :root body .volet__entete { flex-direction: column; gap: .6rem; }
  :root body .volet__sous { text-align: center; }

  /* Pied de page en une colonne, marque compacte. */
  :root body .pied__grille { grid-template-columns: 1fr; row-gap: 2rem; }
  :root body .pied__titre { margin-bottom: .5rem; }
  :root body .pied__reseaux > * { width: 3rem; height: 3rem; }

  /* Formulaire : cibles tactiles confortables. */
  :root body .champ input, :root body .champ select, :root body .champ textarea { min-height: 3rem; }
  :root body input[type='checkbox'] { width: 1.35rem; height: 1.35rem; flex: none; }
}

/* ---------- Téléphone en paysage et écrans très bas ---------- */
@media (max-height: 32rem) and (max-width: 70rem) {
  :root { --haut-utilitaire: 2.5rem; }
  :root body .barre-principale__int,
  :root body .entete-site.est-defile .barre-principale__int { min-height: 3.75rem; }
  :root body .marque__img,
  :root body .entete-site.est-defile .marque__img { height: 3rem; }
  :root body .menu-mobile { width: 2.75rem; height: 2.75rem; }
  :root body .nav__lien { min-height: 3rem; padding-block: .6rem; font-size: 1.1rem; }
  :root body .hero { padding-block: 2rem; }
  :root body .hero__titre { font-size: clamp(2rem, 5.2vw, 2.75rem); margin-bottom: 1.25rem; }
  :root body .hero__actions, :root body .groupe-boutons { display: flex; flex-wrap: wrap; width: auto; }
  :root body .hero__actions .bouton { width: auto; }
  :root body .terme__bulle.est-mobile { position: fixed; top: auto; left: 1rem; right: 1rem; width: auto; bottom: max(.75rem, env(safe-area-inset-bottom)); max-height: 70dvh; }
}