/* ============================================================
   Finitions : reponse au survol, visibilite clavier, alignement.
   Un seul fichier partage par toutes les pages.

   Le survol est enferme dans @media (hover:hover) and (pointer:fine) :
   un ecran tactile n'entre jamais dans ce bloc, donc l'affichage
   telephone n'est pas touche d'un pixel.
   ============================================================ */

/* ---- 1. Alignement du bloc titre et du texte ----------------
   .shero portait la marge laterale, .article la porte en interne :
   sur ordinateur le titre demarrait 24 px a gauche du texte.
   On deplace la marge du .shero vers son contenu.              */
.shero{padding-left:0;padding-right:0;}
.shero-in{padding-left:var(--gouttiere,24px);padding-right:var(--gouttiere,24px);}

/* ---- 2. Transitions ---------------------------------------- */
a,button,summary,label.item,label.tf{
  transition:background-color .16s ease,color .16s ease,
             filter .16s ease,transform .16s ease,box-shadow .16s ease;
}

/* ---- 3. Survol souris -------------------------------------- */
@media (hover:hover) and (pointer:fine){

  /* boutons et liens-boutons : on fonce un peu, on souleve d'un pixel */
  button:not(:disabled):hover,
  a[class*="btn"]:hover,
  .dl a:hover,
  .book a:hover{
    filter:brightness(0.93);
    transform:translateY(-1px);
  }

  /* depliages : la zone entiere s'allume */
  .theory>summary:hover,
  details>summary:hover{
    background:rgba(196,99,76,0.045);
  }
  /* les resumes sans marge laterale : on etale la teinte sans rien decaler */
  .refs summary:hover,
  .exercise-details>summary:hover{
    box-shadow:0 0 0 10px rgba(196,99,76,0.045);
    border-radius:3px;
  }

  /* lignes a cocher : la ligne entiere repond, sans bouger */
  label.item:hover,label.tf:hover{
    background:rgba(196,99,76,0.05);
    box-shadow:0 0 0 10px rgba(196,99,76,0.05);
    border-radius:3px;
  }

  /* liens de texte et liens de suite */
  a.next:hover,
  .article p a:hover,
  .legal a:hover,
  .toc a:hover{color:#A8503C;}

  /* barre du bas : la couleur seulement, jamais de deplacement */
  .rcf-nav a:hover{color:#C4634C;transform:none;filter:none;}
}

/* ---- 4. Navigation au clavier ------------------------------
   :focus-visible ne se declenche qu'a la touche Tab.
   Invisible a la souris et au doigt.                           */
:focus-visible{
  outline:2px solid #C4634C;
  outline-offset:3px;
  border-radius:6px;
}
.rcf-nav a:focus-visible{outline-offset:-3px;}
/* .theory coupe a overflow:hidden : le contour se dessine a l'interieur */
.theory>summary:focus-visible{outline-offset:-3px;}

/* ---- 5. Colonne de texte -----------------------------------
   Le texte courant faisait 632 px sur ordinateur, soit 89 a 96
   caracteres par ligne : l'oeil perd sa ligne en revenant a gauche.
   On limite le TEXTE seul. Les cartes, tableaux et grilles gardent
   toute leur largeur. Sur telephone la fenetre est plus etroite que
   cette limite : rien ne change.                                */
.article > p,
.article > ul > li,
.article > ol > li{max-width:52ch;}
.faq-item p{max-width:52ch;}

/* ---- 6. Listes de sources ----------------------------------
   Les references faisaient jusqu'a 111 caracteres par ligne.   */
.refs ol li,.refs ul li{max-width:58ch;}
/* le bloc d'avertissement court jusqu'a 6 lignes : on le resserre aussi */
.alert p{max-width:56ch;}