/* ------------------------------------------------------------------
   carlos.fr — passage en responsive
   À ajouter À LA FIN de /css/main.css (rien à supprimer ailleurs).
   Prérequis : dans le gabarit, remplacer
     <meta name="viewport" content="width=640">
   par
     <meta name="viewport" content="width=device-width, initial-scale=1">
   ------------------------------------------------------------------ */

/* 1. Ne jamais forcer une largeur minimale supérieure à l'écran.
      La règle min-width:500px du bloc @media 880px provoque
      un défilement horizontal sur tous les téléphones. */
@media only screen and (max-width: 660px) {
  header,
  div#content { min-width: 0; width: 100%; }
  body { overflow-x: hidden; }
}

/* 2. Grille fluide : les blocs de 200px deviennent deux colonnes.
      50vw = la moitié de la largeur d'écran, quel que soit l'appareil. */
@media only screen and (max-width: 660px) {
  #content .block,
  #content .block > div            { width: 50vw; height: 50vw; }
  #content .block div img          { width: 50vw; height: 50vw; }
  #content .block .img-bw-container{ top: -50vw; }
}

/* 3. On reste à deux colonnes jusqu'en bas de gamme (320px).
      Une colonne unique donnerait des vignettes plein écran et
      un défilement de plus de 10 000 px sur les 28 projets. */

/* 4. Le noir et blanc ne se lève qu'au survol : sur un écran tactile,
      le survol n'existe pas et la galerie reste grise.
      On affiche donc la couleur d'emblée sur ces appareils.
      Le comportement desktop est strictement inchangé. */
@media (hover: none) {
  #content .block div.img-bw-container img { filter: none; }
  #content .block .img-bw-container        { display: none; }
}

/* 5. En-tête — À AJUSTER EN RECETTE sur un vrai téléphone.
      Ce bloc n'a pas pu être validé visuellement : la baseline
      passe bien sur sa propre ligne, mais le calage horizontal
      demande un dernier réglage dans les devtools.
      Le titre et la baseline débordaient à droite.
      La baseline passe sur sa propre ligne, sous le logo. */
@media only screen and (max-width: 660px) {
  header > div                       { width: 100%; box-sizing: border-box; }
  .site-title                        { font-size: 1em; max-width: 100%;
                                       padding: 0 1em; box-sizing: border-box;
                                       text-align: center; }
  .site-title .divider               { display: none; }
  header > div > .site-title > #intro{ display: block; font-size: .95em;
                                       margin-top: .5em; line-height: 1.4; }
}

/* 6. Confort de lecture des pages de texte. */
@media only screen and (max-width: 660px) {
  #content .text,
  #content #breadcrumb   { padding-left: 1em; padding-right: 1em; box-sizing: border-box; }
}