/* ===================================================================
   MOSAICA CONSEILS — COUCHE MOBILE FINALE
   -------------------------------------------------------------------
   POURQUOI CE FICHIER EXISTE

   assets/responsive.css installe le systeme responsive du site et
   declare se charger en dernier. Ce n'est vrai que sur 14 des 73 pages :
   ailleurs, la feuille de page (home.css, industries.css, expertises.css,
   fiche-formation.css, conseils-mere.css...) est chargee APRES lui et
   remporte la cascade. Les planchers tactiles et typographiques de
   responsive.css §10 ne s'appliquaient donc pas la ou ils comptent.

   Deplacer responsive.css en fin de chaine aurait corrige la cascade,
   mais il contient 110 regles hors media query (conteneurs, rythme,
   echelle de titres) qui se seraient alors imposees aux feuilles de page
   sur ORDINATEUR : risque de regression desktop sur 59 pages.

   Ce fichier est donc la reponse structurelle : charge en dernier sur
   toutes les pages, il ne contient QUE des regles sous media query
   mobile. Aucune ligne ne peut atteindre l'affichage ordinateur.

   REGLE : rien ici ne doit s'appliquer au-dessus de 900px.

   SOMMAIRE
   1. Formulaires — suppression du zoom automatique iOS
   2. Zones tactiles
   3. Plancher de lisibilite
   4. Equivalents tactiles des effets de survol
   5. Zones sures et elements fixes
   6. Page A propos — restitution de la hierarchie typographique
   =================================================================== */


/* ═══════════════════════════════════════════════════════════════════
   1. FORMULAIRES — SUPPRESSION DU ZOOM AUTOMATIQUE iOS
   Safari zoome sur le champ des que sa police descend sous 16px, puis
   ne revient pas a l'echelle initiale : la page reste agrandie et
   decalee. Le textarea du formulaire de contact etait a 14px.
   16px est un seuil impose par le navigateur, pas une preference.
   ═══════════════════════════════════════════════════════════════════ */
/* NOTE SUR !important DANS CE FICHIER
   Il n'est utilise que pour des PLANCHERS — jamais pour imposer une
   apparence. Trois raisons rendent ces garanties indispensables :
   · les 16px des champs sont une contrainte du navigateur, pas un gout ;
   · contact.html porte ses styles de formulaire dans un <style> inline,
     qu'aucune feuille externe ne peut depasser autrement ;
   · les regles de page (.hm-x li, .dcx-y span) ont une specificite
     superieure a un selecteur d'element : etre charge en dernier ne
     departage qu'a specificite egale.
   Tout est borne a max-width:900px : l'ordinateur n'est jamais atteint. */
@media(max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=url],
  input[type=search],input[type=number],input[type=password],input[type=date],
  select,textarea{
    font-size:16px !important;
    max-width:100%;
  }
  /* Confort de saisie au pouce, sans changer l'apparence du champ. */
  input:not([type=checkbox]):not([type=radio]):not([type=submit]),
  select{min-height:var(--tap,44px)}
  textarea{min-height:calc(var(--tap,44px) * 2.5)}

  /* Cases a cocher et boutons radio : la cible utile est le libelle. */
  label:has(> input[type=checkbox]),
  label:has(> input[type=radio]){
    display:flex;align-items:flex-start;gap:.6rem;
    min-height:var(--tap,44px);
    padding-block:.35rem;
  }
  input[type=checkbox],input[type=radio]{
    width:1.25rem;height:1.25rem;flex:none;margin-top:.15rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   2. ZONES TACTILES
   Mesure avant correction, a 390px : .ind-cross-link 16px de haut,
   .psp-voix-link 18px, .shp-link 22px, .fc-mini 30px, et une vingtaine
   de liens de pied de page entre 18 et 22px. Sous le pouce, ces cibles
   se manquent ou s'atteignent l'une pour l'autre.

   On agrandit la ZONE, pas le dessin : padding vertical et, lorsque le
   lien est en ligne dans un paragraphe, un pseudo-element qui etend la
   surface cliquable sans deplacer le texte.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){

  /* --- Boutons et appels a l'action : hauteur pleine ---
     ATTENTION : ne jamais inclure ici un element que le systeme peut
     masquer selon la largeur. Imposer un display ressuscite l'element. */
  .btn,.btn-gold,.btn-outline,
  .fc-cta,.fdf-cta,.shp-cta,.pt-primary,.pt-secondary,
  .hm-cta,.dcx-cta,.ig2-cta,.psp-cta,
  button[type=submit],input[type=submit]{
    min-height:var(--tap,44px);
    display:inline-flex;align-items:center;justify-content:center;
  }

  /* --- Liens-actions secondaires : etaient les plus petites cibles --- */
  .fc-mini,.fdf-mini,.shp-link,.fdf-link,.fc-cta--line,
  .ind-cross-link,.psp-voix-link,.psp-chr-all,.chr-tile-read,
  .hm-svc-go,.dcx-offer-go,.fc-sit-more,.res-card-link,
  .psp-etude-link,.art-item-link{
    display:inline-flex;align-items:center;
    min-height:var(--tap,44px);
    padding-block:.55rem;
  }

  /* --- Liens de listes de navigation --- (pied de page : voir footer.css)
     `inline-flex` est voulu ici : ces trois listes sont des rails
     horizontaux défilables, leurs liens doivent se suivre sur une ligne. */
  .psp-subnav a,.fc-nav a,.fdf-nav a{
    min-height:var(--tap,44px);
    display:inline-flex;align-items:center;
  }

  /* Le sous-menu du menu mobile, lui, est une liste verticale : un lien
     par ligne. `inline-flex` y collait « Développement des compétences »
     et « Diagnostic » sur la même ligne. `flex` conserve la cible
     tactile de 44 px tout en rétablissant le retour à la ligne. */
  .gm-sub a{
    min-height:var(--tap,44px);
    display:flex;align-items:center;
  }

  /* --- Liens d'action isoles restes trop courts a la mesure --- */
  a.hm-link,a.hm-person-essay,a.js-fc-contact,a.hm-post-go,
  a.psp-featured-main,a.gnav-logo{
    min-height:var(--tap,44px) !important;
    display:inline-flex;align-items:center;
  }
  /* Les cartes entierement cliquables ont deja une grande surface :
     on ne leur impose pas de hauteur, seulement un espacement suffisant
     pour que deux cibles voisines ne se touchent jamais. */
  .hm-svc + .hm-svc,.dcx-offer + .dcx-offer,
  .res-card + .res-card,.chr-tile + .chr-tile{margin-top:.5rem}

  /* NOTE — liens en ligne dans un paragraphe
     Aucune hauteur minimale ne leur est imposee : WCAG 2.5.8 exempte
     explicitement les liens inseres dans un bloc de texte, et forcer
     44px ferait se chevaucher les zones tactiles de deux liens places
     sur des lignes consecutives — on creerait des appuis errones au
     lieu d'en supprimer. Le confort passe ici par l'interlignage. */

  /* Deux appels a l'action cote a cote deviennent trop etroits sous
     420px : ils passent l'un sous l'autre plutot que de reduire. */
  @media(max-width:420px){
    .fc-hero-actions,.fdf-actions,.shp-actions,.pt-actions,.hm-hero-actions{
      flex-direction:column;align-items:stretch;
    }
    .fc-hero-actions > *,.fdf-actions > *,.shp-actions > *,
    .pt-actions > *,.hm-hero-actions > *{width:100%;justify-content:center}
  }
}


/* ═══════════════════════════════════════════════════════════════════
   3. PLANCHER DE LISIBILITE
   responsive.css fixe le principe (--text-label ne descend pas sous
   12,8px) mais les feuilles de page le contournaient : mesures a 390px
   relevant .chr-tile-read, .hm-svc-go, .dcx-offer-for, .dcx-offer-go,
   .ind-cross-link a 12px, et une serie de libelles a 13px.

   12px sur un telephone tenu a bout de bras n'est pas lisible. On
   remonte le texte courant et les libelles utiles, sans toucher aux
   titres ni a l'identite typographique.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* PLANCHER ABSOLU — 13px.
     Aucun texte du site ne descend plus sous 13px sur telephone, quelle
     que soit la feuille de page qui l'a fixe. max() garde la valeur
     d'origine des qu'elle est deja suffisante : on releve seulement ce
     qui etait trop petit, on ne remet pas tout a plat. */
  main p:not(.hero-mosaica__subtitle-lead):not(.hero-mosaica__subtitle-sub),
  main li,main dd,main dt,main span,main a,main td,main figcaption,
  main b,main strong,main small,main em,main i,main h3,main h4,main h5,main h6,
  main cite,main time,main label,main div:not(:has(*)){
    font-size:max(1em,13px) !important;
  }

  /* Texte courant : 15px, seuil de lecture confortable au telephone.
     Le héros d'accueil est exclu : ses deux niveaux de sous-titre portent
     leur propre échelle fluide (voir home.css), volontairement distincte
     l'un de l'autre (18px / 16px plancher) — ce plancher générique les
     aurait aplatis à la même taille. */
  main > * p:not(.hero-mosaica__subtitle-lead):not(.hero-mosaica__subtitle-sub),
  article p,.fc-lead,.fdf-lead,.section-lead,.eb-head p,.art-p,
  .chr-body p,.psp-intro p{
    font-size:max(1em,15px) !important;
  }

  /* Le fil d'Ariane ne doit jamais provoquer de debordement : il
     s'enroule proprement et reste lisible. */
  .breadcrumb,.fc-crumb,.fdf-crumb,.shp-crumb{
    font-size:max(1em,12.5px);
    flex-wrap:wrap;
    overflow-wrap:anywhere;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   4. EQUIVALENTS TACTILES DES EFFETS DE SURVOL
   Sur un ecran tactile, :hover ne se declenche qu'apres un premier
   appui — ou jamais. Tout etat qui REVELE une information doit donc
   etre visible d'emblee.
   ═══════════════════════════════════════════════════════════════════ */
@media(hover:none){
  /* Les soulignements et fleches qui n'apparaissaient qu'au survol
     deviennent l'etat par defaut. */
  .hm-svc-go,.dcx-offer-go,.psp-etude-link,.res-card-link,
  .chr-tile-read,.art-item-link{
    opacity:1;transform:none;
  }
  /* Les zoom d'image au survol n'ont pas lieu d'etre au doigt : ils
     laissaient l'image agrandie apres le premier appui. */
  .psp-featured-main:hover .psp-featured-media img,
  .psp-analysis-card:hover img,
  .res-card:hover img,
  .chr-tile:hover img{transform:none}

  /* Retour visuel a l'appui, puisqu'il n'y a pas de survol. */
  a:active,button:active{opacity:.72}
}


/* ═══════════════════════════════════════════════════════════════════
   5. ZONES SURES ET ELEMENTS FIXES
   Sur iPhone, la barre d'accueil et les coins arrondis mangent le bas
   de l'ecran ; en paysage, l'encoche mange les cotes.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .gnav{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  /* Pied de page : voir .mfoot dans assets/footer.css. */

  /* Telephone en paysage : la hauteur utile fond, les heroes cales sur
     la hauteur d'ecran devenaient plus hauts que le viewport. */
  @media(orientation:landscape) and (max-height:520px){
    .svc-hero,.page-hero,.shp,.fdf-hero-grid,.crs-hero{
      min-height:0;
      padding-block:clamp(1.5rem,5vh,2.5rem);
    }
    .fdf-hero-media,.shp-media{max-height:70svh}
  }
}


/* ═══════════════════════════════════════════════════════════════════
   6. PAGE A PROPOS — RESTITUTION DE LA HIERARCHIE TYPOGRAPHIQUE

   Le plancher du §3 vise `main h3`, `main span`, `main p` et `main a`
   avec `font-size:max(1em,13px) !important`. Sur la plupart des pages il
   ne fait que remonter ce qui etait trop petit. Sur a-propos.html, ou la
   page porte elle-meme son echelle typographique, `1em` vaut la taille
   du PARENT — donc 16px partout — et le plancher devient un plafond
   inverse : mesure a 390px, les quatre titres de la frise, les trois
   noms des associes, les dates et la phrase de conclusion tombaient
   tous a 16px. Toute la hierarchie de la page disparaissait au
   telephone, et les paragraphes remontes a 16px allongeaient encore une
   page deja trop longue.

   Ces regles rendent a la page ses tailles propres. Aucune ne descend
   sous 13px : le plancher d'accessibilite du §3 est respecte, il n'est
   pas contourne. Tout est prefixe `.ab` — aucune autre page n'est
   touchee, et rien ne s'applique au-dessus de 900px.
   ═══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  /* --- Titres de niveau 3 : ils redeviennent des titres --- */
  .ab .ab-t-item h3{font-size:1.08rem !important}
  .ab .ab-plane h3,.ab .ab-move h3{font-size:1.2rem !important}
  .ab .ab-person-body h3{font-size:1.4rem !important}

  /* --- Dates de la frise : le reperage chronologique --- */
  .ab .ab-t-date{font-size:1.2rem !important}

  /* --- Phrase de conclusion : elle tient la section a elle seule --- */
  .ab .ab-punch{font-size:clamp(1.3rem,5.4vw,1.7rem) !important}

  /* --- Texte courant : 15px, le seuil de lecture confortable retenu
         par le §3. 16px n'apportait rien et allongeait la page. --- */
  .ab .ab-t-item p,.ab .ab-plane-d,.ab .ab-plane-s,
  .ab .ab-move p,.ab .ab-person-txt{font-size:15px !important}
  .ab .ab-person-proof{font-size:14.5px !important}
  .ab .ab-person-role,.ab .ab-person-link{font-size:14px !important}

  /* --- Libelles en capitales interlettrees ---
         Le §3 les remontait a 16px, la taille du parent. A cette echelle
         un libelle en capitales avec .13 a .20em d'interlettrage cesse
         d'etre un libelle : il concurrence le titre qu'il annonce, et
         « PRESENTER VOTRE SITUATION » debordait de la colonne a 375px.
         13px est exactement le plancher absolu pose par le §3 : la
         lisibilite est preservee, la hierarchie revient. --- */
  .ab .ab-kicker,.ab .ab-eyebrow,.ab .ab-person-angle,
  .ab .ab-plane-n,.ab .ab-move-n,.ab .ab-gap span,
  .ab .ab-cta-main{font-size:13px !important}
}