/* ==========================================================================
   au-cabinet.fr — pages « site ami » (cartes de l'accueil qui renvoient vers
   un site extérieur : ThyroCheck, BioMG, Antibioclic, asthme-plongee.com,
   certificats-absurdes.fr, Psychiaclic…)
   --------------------------------------------------------------------------
   Chargement, APRÈS charte.css et gabarit-mdph.css :
     <link rel="stylesheet" href="/_commun/site-ami.css">
   La couleur de rubrique vient du bloc <style id="ac-charte-page"> de la page
   (--ac-rubrique, --ac-rubrique-txt, --ac-rubrique-doux), comme le gabarit.

   Blocs (HTML d'exemple : thyroide/index.html) :
   - .sa-go : bouton « Ouvrir X → » de la carte d'ouverture ;
   - .sa-mosaique : aperçu (.sa-apercu, capture dans une fenêtre de navigateur)
     + tuiles de description (.sa-tuile) ;
   - .sa-acces : grille de tuiles-liens vers les rubriques du site (.sa-lien),
     .sa-puces : petites étiquettes-liens (sous-rubriques).
   Aucune ressource n'est chargée depuis le site présenté : la capture est un
   fichier du dossier de la page (apercu.webp).
   Tailles de texte en rem/em uniquement (réglage « taille du texte » du bandeau).
   ========================================================================== */

/* texte lu par les lecteurs d'écran seulement (« nouvel onglet ») */
.sa-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- carte d'ouverture ---------- */
.gm-hero .gm-chapo{columns:auto}
.sa-go{margin:1.125rem 0 .75rem;padding:.875rem 1.625rem;font-size:1.35rem;box-shadow:5px 5px 0 var(--gm-rub)}
/* écran large : le texte occupe toute la largeur (deux colonnes s'il y a deux paragraphes ou plus), le bouton se place
   à droite, centré sur le texte, au lieu de laisser un grand blanc à droite */
@media (min-width:900px){
  .gm-hero-in{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:2.5rem;align-items:center}
  .gm-hero-in>.gm-surtitre,.gm-hero-in>h1{grid-column:1/-1}
  .gm-hero-in>.gm-chapo{grid-column:1;margin-bottom:.5rem}
  .gm-hero-in>.sa-go{grid-column:2;margin:0 .375rem .5rem 0;white-space:nowrap}
}
@media (min-width:1080px){
  .gm-hero .gm-chapo:has(p+p){columns:2;column-gap:2.875rem}
  .gm-hero .gm-chapo p{break-inside:avoid}
}
.sa-go span{font-family:var(--ac-logo);font-style:italic;font-size:1.2em}
@media (max-width:480px){.sa-go{width:100%}}

/* ---------- titre de bloc (pastille + h2) ---------- */
.sa-bloc{margin:0 0 1.75rem}
.sa-bloc > .gm-sec-tete{margin:0 0 .875rem}
.sa-bloc > .gm-sous-titre{margin-top:-.25rem}

/* ---------- mosaïque : aperçu + tuiles de description ---------- */
.sa-mosaique{display:grid;grid-template-columns:minmax(0,1fr);gap:1.125rem}
@media (min-width:720px){
  .sa-mosaique{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sa-mosaique > .sa-apercu{grid-column:1 / -1}
}
@media (min-width:1100px){
  .sa-mosaique{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sa-mosaique > .sa-apercu{grid-column:1 / span 2;grid-row:1 / span 2}
}

/* aperçu : capture dans une fenêtre de navigateur */
.sa-apercu{margin:0;display:flex;flex-direction:column;min-width:0;background:var(--gm-carte);border:3px solid var(--gm-encre);
  border-radius:4px;box-shadow:var(--gm-ombre);overflow:hidden}
.sa-fenetre{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:var(--gm-nuit);color:#fff;border-bottom:3px solid var(--gm-encre)}
.sa-points{display:inline-flex;gap:6px;flex:none}
.sa-points i{display:block;width:11px;height:11px;border-radius:50%;background:#E0502C;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25)}
.sa-points i:nth-child(2){background:#FFB840}
.sa-points i:nth-child(3){background:#4F8A10}
.sa-adresse{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:.25rem .75rem;border-radius:999px;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.2);font-family:var(--ac-mono);font-size:.8rem;letter-spacing:.02em;color:#E9F0F2}
.sa-adresse b{font-weight:600;color:#fff}
.sa-ecran{display:block;position:relative;background:var(--gm-papier-2);line-height:0}
.sa-ecran img{display:block;width:100%;height:auto;aspect-ratio:8 / 5;object-fit:cover;object-position:top center}
.sa-ecran::after{content:"Ouvrir le site ↗";position:absolute;right:.75rem;bottom:.75rem;padding:.5rem .875rem;line-height:1.1;
  background:var(--gm-encre);color:#fff;font-family:var(--ac-display);font-weight:800;font-size:.9rem;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--gm-flamme);opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.sa-ecran:is(:hover,:focus-visible)::after{opacity:1;transform:none}
.sa-ecran:focus-visible{outline:3px solid var(--gm-flamme);outline-offset:-6px}
.sa-legende{margin:0;padding:.5rem .875rem;border-top:1.5px solid var(--gm-filet);font-family:var(--ac-mono);font-size:.78rem;letter-spacing:.02em;
  line-height:1.5;color:var(--gm-encre-3)}

/* tuiles de description */
.sa-tuile{position:relative;min-width:0;padding:1.125rem 1.25rem 1.125rem;background:var(--gm-carte);border:3px solid var(--gm-encre);
  border-radius:3px;box-shadow:var(--gm-ombre)}
.sa-tuile::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--gm-rub)}
.sa-tuile-tete{display:flex;align-items:center;gap:.625rem;margin:.25rem 0 .625rem}
.sa-ic{display:inline-grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border:2px solid var(--gm-encre);border-radius:3px;
  background:var(--gm-rub-doux);color:var(--gm-rub-txt);box-shadow:2px 2px 0 var(--gm-encre)}
.sa-ic svg{width:1.25rem;height:1.25rem}
.sa-tuile h3{margin:0;padding:0;border:0;font-family:var(--ac-mono);font-weight:600;font-size:var(--fs-etiquette);letter-spacing:.12em;
  text-transform:uppercase;line-height:1.3;color:var(--gm-rub-txt)}
.gm .sa-tuile p{margin:0 0 .5rem;font-size:1rem;line-height:1.55}
.gm .sa-tuile p:last-child{margin-bottom:0}
.gm .sa-tuile ul{list-style:none;margin:.25rem 0 0;padding:0}
.gm .sa-tuile li{position:relative;padding:.25rem 0 .25rem 1.125rem;font-size:1rem;line-height:1.5;color:var(--gm-encre-2)}
.gm .sa-tuile li::before{content:"";position:absolute;left:0;top:.8em;width:6px;height:6px;border-radius:50%;background:var(--gm-rub)}
.sa-tuile.sa-large{grid-column:1 / -1}

/* ---------- accès directs : tuiles-liens ---------- */
.sa-acces{display:grid;grid-template-columns:minmax(0,1fr);gap:.875rem;margin:0;padding:0;list-style:none}
@media (min-width:640px){.sa-acces{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.sa-acces{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sa-acces > li{display:flex;min-width:0}
.sa-lien{position:relative;flex:1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.25rem .875rem;min-width:0;
  padding:.9375rem 1rem;background:var(--gm-carte);border:2.5px solid var(--gm-encre);border-radius:3px;box-shadow:4px 4px 0 var(--gm-encre);
  color:var(--gm-encre);text-decoration:none;transition:transform .12s,box-shadow .12s,background-color .12s}
.sa-lien .sa-ic{grid-row:1 / span 2}
.sa-lien b{display:block;min-width:0;font-family:var(--ac-display);font-weight:800;font-size:1.25rem;line-height:1.1;letter-spacing:.01em;
  text-transform:uppercase;color:var(--gm-encre);overflow-wrap:anywhere}
.sa-lien small{grid-column:2;display:block;font-size:.95rem;line-height:1.45;color:var(--gm-encre-2)}
.sa-fl{grid-column:3;grid-row:1;font-family:var(--ac-display);font-weight:900;font-size:1.25rem;line-height:1;color:var(--gm-rub-txt)}
.sa-lien:hover{background:#FFF6E8;transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gm-rub)}
.sa-lien:hover .sa-fl{color:var(--gm-signal,#E0502C)}
.sa-lien:focus-visible{outline:3px solid var(--gm-flamme);outline-offset:3px}
.sa-lien:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--gm-encre)}
/* lien qui demande un compte sur le site présenté */
.sa-cle{display:inline-block;margin-left:.375rem;padding:1px 6px;border:1.5px solid var(--gm-ambre-txt);border-radius:999px;background:var(--gm-ambre-doux);
  font-family:var(--ac-mono);font-weight:600;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;vertical-align:.15em;color:var(--gm-ambre-txt)}

/* étiquettes-liens (sous-rubriques) */
.sa-sous{margin:1.5rem 0 .625rem;padding:0;border:0;font-family:var(--ac-mono);font-weight:600;font-size:var(--fs-etiquette);letter-spacing:.12em;
  text-transform:uppercase;color:var(--gm-rub-txt)}
.gm .sa-sous-note{margin:-.25rem 0 .75rem;font-size:var(--fs-petit);color:var(--gm-encre-3)}
.sa-puces{display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:0;list-style:none}
.sa-puces a{position:relative;display:inline-flex;align-items:center;gap:.375rem;padding:.4375rem .8125rem;border:2px solid var(--gm-encre);border-radius:999px;
  background:var(--gm-carte);color:var(--gm-encre);font-weight:700;font-size:.95rem;line-height:1.3;text-decoration:none;
  transition:box-shadow .12s,background-color .12s}
.sa-puces a::after{content:"↗";color:var(--gm-rub-txt);font-weight:900}
.sa-puces a:hover{background:var(--gm-rub-doux);box-shadow:3px 3px 0 var(--gm-encre)}
.sa-puces a:focus-visible{outline:3px solid var(--gm-flamme);outline-offset:3px}

.sa-nb{margin:1rem 0 0;font-size:var(--fs-petit);color:var(--gm-encre-3)}

/* ---------- arrivée des tuiles (code « gagner des points » : petit saut, l'une après l'autre) ---------- */
@media (prefers-reduced-motion:no-preference){
  .sa-mosaique > *,.sa-acces > li{animation:sa-pop .45s cubic-bezier(.2,.9,.3,1.25) both}
  .sa-mosaique > :nth-child(2),.sa-acces > li:nth-child(2){animation-delay:.05s}
  .sa-mosaique > :nth-child(3),.sa-acces > li:nth-child(3){animation-delay:.1s}
  .sa-mosaique > :nth-child(4),.sa-acces > li:nth-child(4){animation-delay:.15s}
  .sa-mosaique > :nth-child(5),.sa-acces > li:nth-child(5){animation-delay:.2s}
  .sa-mosaique > :nth-child(6),.sa-acces > li:nth-child(6){animation-delay:.25s}
  .sa-mosaique > :nth-child(n+7),.sa-acces > li:nth-child(n+7){animation-delay:.3s}
  .sa-lien:hover .sa-ic{animation:sa-rebond .45s ease-out}
}
@keyframes sa-pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sa-rebond{0%,100%{transform:none}35%{transform:translateY(-4px) rotate(-4deg)}70%{transform:translateY(1px)}}
@media (prefers-reduced-motion:reduce){.sa-lien,.sa-puces a,.sa-ecran::after{transition:none}.sa-lien:hover,.sa-lien:active{transform:none}}

/* contraste renforcé : pas de fond coloré */
:root[data-contrast="high"] .sa-tuile::before{background:#000}
:root[data-contrast="high"] .sa-lien:hover{background:#fff}

/* téléphone : un peu plus serré */
@media (max-width:600px){
  .sa-tuile{padding:1rem 1rem 1rem}
  .sa-lien{padding:.8125rem .875rem;gap:.25rem .75rem}
  .sa-lien b{font-size:1.125rem}
  .sa-fenetre{padding:.4375rem .625rem;gap:.5rem}
  .sa-points i{width:9px;height:9px}
}
@media print{.sa-ecran::after{display:none}.sa-mosaique > *,.sa-acces > li{animation:none}}