/* Charte maquette ATSEM (extrait du design d'origine). */
  * { box-sizing: border-box; }
  html, body { margin: 0; }
  /* Replis « Nunito Repli ... » : fontes système à métriques ajustées (fonts.css), audit du 02/09/2026. */
  body { background: #FFF9F0; font-family: 'Nunito', 'Nunito Repli Arial', 'Nunito Repli Roboto', 'Nunito Repli Noto', 'Nunito Repli DejaVu', sans-serif; color: #23314D; }
  a { color: inherit; text-decoration: none; }
  @keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
  @keyframes floaty2 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
  @keyframes auraPulse { 0%,100% { transform: scale(1); opacity:.42; } 50% { transform: scale(1.22); opacity:.7; } }
  @keyframes auraSpin { to { transform: rotate(360deg); } }

/* Menus deroulants de la nav : caches par defaut, affiches au survol, au focus clavier ou au clic (tactile). */
nav [style*="position:absolute"]{display:none;}
nav [style*="position:relative"]:hover > [style*="position:absolute"],
nav [style*="position:relative"]:focus-within > [style*="position:absolute"],
nav .atsem-dd.atsem-open > [style*="position:absolute"]{display:flex;}

/* Accueil responsive : la maquette est dessinee pour le desktop -> garde-fous mobiles. */
@media (max-width: 820px){
  [style*="max-width:1280px"]{max-width:100%!important;overflow-x:hidden;}
  header[style*="46px"]{flex-wrap:wrap!important;gap:12px 16px!important;padding:18px 18px!important;}
  nav[style*="gap:24px"]{gap:12px 16px!important;flex-wrap:wrap!important;font-size:14px!important;}
  section{padding-left:18px!important;padding-right:18px!important;}
  [style*="grid-template-columns: 0.9fr 1.1fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns:0.85fr 1.15fr"]{grid-template-columns:1fr!important;}
  [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
  [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}
  [style*="font-size:66px"]{font-size:38px!important;}
  [style*="width: 640px"]{width:auto!important;max-width:100%!important;}
  /* Photo detouree du heros : masquee sur telephone. Essayee en filigrane le 29/08/2026
     (opacite .3 derriere le titre), Victor l'a fait retirer : « ca rend pas bien ».
     02/09/2026 (audit perf) : la balise est desormais dans une <picture> dont la source mobile
     est un gif vide (plus de telechargement des 148 Ko) ; on cible aussi la CLASSE pour ne plus
     dependre de l'attribut src. */
  .atv-photo, img[src*="atsem-photo-cutout"]{display:none!important;}
}

/* Cartes voies (accueil) : le bloc « conditions » est replie par defaut, deplie au clic. */
.atsem-more{display:none;}
.atsem-more.atsem-open{display:block;}
.atsem-more-btn span{display:inline-block;transition:transform .2s;}
.atsem-more-btn.atsem-open span{transform:rotate(180deg);}

/* Info-bulle "i" encercle en exposant (accueil) : texte au survol / focus clavier. */
.atsem-itip{position:relative;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.35);color:#fff;font-weight:800;font-size:10px;font-style:normal;vertical-align:super;cursor:help;margin-left:4px;}
/* Zone de frappe ~40px pour une pastille de 16px (la fleche vit sur .atsem-itip-box::after). */
.atsem-itip::before{content:'';position:absolute;inset:-12px;}
.atsem-itip:hover,.atsem-itip:focus-visible{background:#5CA8FF;outline:none;}
.atsem-itip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:min(340px,80vw);background:#fff;color:#23314D;font-weight:500;font-size:13px;line-height:1.55;text-align:left;padding:14px 16px;border-radius:14px;box-shadow:0 20px 50px rgba(35,49,77,.28);opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;z-index:80;pointer-events:none;}
.atsem-itip-box::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:#fff;}
.atsem-itip:hover .atsem-itip-box,.atsem-itip:focus-visible .atsem-itip-box,.atsem-itip.atsem-open .atsem-itip-box{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
/* Mobile : la bulle de 300px centree sur une pastille proche du bord etait rognee par
   l'overflow-x:hidden du gabarit -> on la detache de la pastille, pleine largeur, centree. */
@media(max-width:640px){
  .atsem-itip-box{position:fixed;left:16px;right:16px;top:50%;bottom:auto;width:auto;transform:translateY(-50%);}
  .atsem-itip:hover .atsem-itip-box,.atsem-itip:focus-visible .atsem-itip-box,.atsem-itip.atsem-open .atsem-itip-box{transform:translateY(-50%);}
  .atsem-itip-box::after{display:none;}
}

/* ===== Héros de l'accueil : adaptation MOBILE (ajoutée le 2026-07-28) ======================
   La maquette du héros vit dans src/_home-body.html avec des styles EN LIGNE et des tailles
   figées en pixels (paragraphe à width:640px, titre à 66px, illustration en position absolue
   à left:514px). En dessous de 900px, le contenu débordait donc du cadre et se retrouvait
   rogné : titre coupé, pastille tronquée, boutons hors écran.

   Deux partis pris :
   1) Ces règles sont TOUTES sous « @media (max-width:900px) » : au-dessus, le rendu ordinateur
      est bit-à-bit identique (vérifié : grille 640px/523px, titre 66px, image absolue à 514px).
   2) « !important » est ici nécessaire, non par facilité : les styles de la maquette sont en
      ligne dans le HTML, et un style en ligne l'emporte sur toute règle de feuille externe.

   Le piège corrigé (le même que sur /annales) : une piste de grille « 1fr » vaut
   « minmax(auto, 1fr) », sa largeur minimale est donc celle de son contenu insécable. Le titre
   à 66px imposait à lui seul 613px. D'où le « min-width:0 » sur les enfants de la grille. */
@media (max-width: 900px) {
  body > div > section:first-of-type { grid-template-columns: 1fr !important; padding: 22px 18px 10px !important; }
  body > div > section:first-of-type > * { min-width: 0 !important; }
  body > div > section:first-of-type p { width: auto !important; max-width: 100% !important; font-size: 17px !important; }
  body > div > section:first-of-type h1 { font-size: clamp(30px, 8.5vw, 52px) !important; }
  /* L'illustration repasse dans le flux, centrée sous le texte, au lieu de rester positionnée. */
  body > div > section:first-of-type img { position: static !important; width: 100% !important; max-width: 300px !important; height: auto !important; margin: 14px auto 0 !important; left: auto !important; top: auto !important; }
  /* Barre du bas (CTA + « propulsé par ») : « space-between » + « nowrap » la poussaient hors écran. */
  body > div > section:first-of-type div[style*="space-between"] { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 14px !important; }
  body > div > section:first-of-type div[style*="flex-end"] { align-items: flex-start !important; }
  body > div > section:first-of-type div[style*="space-between"] > div { flex-wrap: wrap !important; text-align: left !important; }
  /* Le conteneur des deux boutons porte « flex-shrink:0 » : il ne pouvait donc jamais se replier. */
  body > div > section:first-of-type div[style*="flex-shrink:0"] { flex-shrink: 1 !important; width: 100% !important; }
  body > div > section:first-of-type div[style*="flex-shrink:0"] > a { flex: 1 1 auto !important; text-align: center !important; justify-content: center !important; }

  /* « Site propulsé par… » et « Connecté à » : ces deux libellés sont en white-space:nowrap
     DANS LA BALISE. Sur 375 px, la ligne « d'ATSEM expérimentés et de formateurs aguerris »
     mesure 361 px pour 339 px utiles : elle sortait par la gauche et se lisait mal. */
  body > div > section:first-of-type div[style*="white-space:nowrap"],
  body > div > section:first-of-type span[style*="white-space:nowrap"] {
    white-space: normal !important; text-align: left !important;
  }
}

/* ===== Offres « Toujours gratuit » / « Abonnement » (section #offre) =======================
   Grille « 1fr 1fr » écrite EN LIGNE, sans repli mobile : à 375 px chaque colonne réclamait
   209 px (1fr = minmax(auto,1fr), la largeur minimale est celle du contenu), soit 439 px pour
   339 px utiles. La carte « Abonnement » partait 82 px hors écran, invisible et inatteignable. */
@media (max-width: 900px) {
  #offre > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; gap: 16px !important; }
  #offre > div > div { padding: 26px 20px !important; }
}

/* ===== Tarifs : deux offres côte à côte (gratuit / abonnement) ============================
   Ajouté le 2026-07-28. « align-items:start » pour que les deux cartes gardent leur hauteur
   propre (la carte payante est plus haute à cause de l'option orale). */
.px-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.px-free { background: #fff; border: 2px solid #E4F6EC; border-radius: 28px; padding: 34px;
           box-shadow: 0 14px 34px rgba(35, 49, 77, .08); }
/* Sous 900px : les deux cartes s'empilent (même seuil que le héros, cf. plus haut). */
@media (max-width: 900px) {
  .px-grid { grid-template-columns: 1fr; gap: 18px; }
  .px-free { padding: 26px 20px; }
}