Antalaha Propre : site multi-pages d'une association

css/style.css · 9.3 Ko

/* =====================================================================
   css/style.css : feuille de style PARTAGÉE par toutes les pages
   =====================================================================
   Rôle : chaque page (index.html et pages/*.html) charge ce même fichier
   avec <link rel="stylesheet">. Une seule modification ici change donc
   tout le site : c'est l'intérêt d'un CSS partagé.
   Fichier lié : css/impression.css (règles propres à l'impression papier,
   chargé séparément avec media="print").

   Plan :
     1. Variables (thème clair) + mode sombre
     2. Base
     3. Accessibilité (lien d'évitement, focus)
     4. En-tête et navigation
     5. Mise en page et composants
     6. Grands écrans
*/


/* ---------------------------------------------------------------------
   1. VARIABLES : thème clair par défaut
   --------------------------------------------------------------------- */

:root {
  /* color-scheme dit au navigateur que la page gère clair ET sombre :
     il adapte alors ses propres éléments (barres de défilement, champs). */
  color-scheme: light dark;

  --fond: #f4faf5;               /* fond de page : vert très pâle */
  --surface: #ffffff;            /* cartes */
  --texte: #14281c;              /* texte principal */
  --texte-doux: #3f5648;         /* texte secondaire (contraste > 4,5:1) */
  --principale: #1b6b3f;         /* vert de l'association */
  --sur-principale: #ffffff;     /* texte posé sur fond « principale » */
  --accent: #0b6aa2;             /* bleu mer : liens */
  --bordure: #c5dccb;
  --focus: #b45309;              /* anneau de focus orange : visible sur clair */

  --espace: 1rem;
  --rayon: 0.75rem;
  --largeur-max: 64rem;
}

/* MODE SOMBRE AUTOMATIQUE : si l'appareil de la personne est réglé en
   mode sombre, ce bloc REDÉFINIT seulement les variables de couleur.
   Tout le reste du CSS reste identique, car il ne parle que de
   var(--fond), var(--texte)... jamais de couleurs écrites en dur.
   C'est le grand avantage des variables. */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1a14;
    --surface: #18271e;
    --texte: #e8f2ea;
    --texte-doux: #b3c9b9;
    --principale: #3fae73;
    --sur-principale: #08140d;   /* texte foncé sur vert clair : bon contraste */
    --accent: #6cc3f0;
    --bordure: #2c4535;
    --focus: #fbbf24;
  }
}


/* ---------------------------------------------------------------------
   2. BASE
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--texte);
  background: var(--fond);
}

img,
picture {
  display: block;               /* évite l'espace parasite sous les images */
  max-width: 100%;
}
img {
  height: auto;                 /* garde les proportions (width/height HTML servent de ratio) */
}

h1, h2, h3 {
  line-height: 1.25;
  color: var(--principale);
}
h1 { font-size: 2rem; margin: 0 0 var(--espace); }
h2 { font-size: 1.5rem; margin: 2rem 0 var(--espace); }
h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }

a { color: var(--accent); }


/* ---------------------------------------------------------------------
   3. ACCESSIBILITÉ
   --------------------------------------------------------------------- */

/* Lien d'évitement : hors écran, il glisse dans l'écran dès qu'il
   reçoit le focus (première touche Tab sur la page). */
.lien-evitement {
  position: absolute;
  top: -5rem;
  left: 0.5rem;
  z-index: 100;
  background: var(--surface);
  color: var(--texte);
  padding: 0.6rem 1rem;
  border: 2px solid var(--focus);
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.lien-evitement:focus {
  top: 0;
}

/* Anneau de focus, bien visible, sur tous les éléments interactifs. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* La cible du lien d'évitement (<main tabindex="-1">) reçoit le focus par
   programme ; on évite d'y dessiner un contour géant. */
main:focus {
  outline: none;
}

/* Respecte le réglage « réduire les animations » du système. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}


/* ---------------------------------------------------------------------
   4. EN-TÊTE ET NAVIGATION
   --------------------------------------------------------------------- */

.entete {
  background: var(--principale);
  color: var(--sur-principale);
}
.entete__interieur {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0.75rem var(--espace);
  display: flex;
  flex-wrap: wrap;              /* le menu passe sous le nom si besoin */
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}
.entete__nom {
  font-size: 1.3rem;
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.nav__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__liste a {
  display: block;
  padding: 0.5rem 0.9rem;       /* cible tactile confortable (≥ 44 px de haut avec la ligne) */
  color: inherit;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
}
.nav__liste a:hover {
  border-color: currentColor;
}
/* aria-current="page" est un attribut HTML qui sert à la FOIS aux lecteurs
   d'écran (« page courante ») et au CSS : on le cible avec un sélecteur
   d'attribut. Ainsi, un seul attribut donne le sens ET le style. */
.nav__liste a[aria-current="page"] {
  background: var(--sur-principale);
  color: var(--principale);
  font-weight: 700;
}

/* Sur le fond vert, l'anneau de focus doit contraster avec le vert :
   on le met en clair pour l'en-tête. */
.entete :focus-visible {
  outline-color: var(--sur-principale);
}


/* ---------------------------------------------------------------------
   5. MISE EN PAGE ET COMPOSANTS
   --------------------------------------------------------------------- */

main {
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: var(--espace);
}

/* --- Image d'en-tête avec <picture> ---
   Le HTML choisit le fichier (portrait ou paysage). Ici, on règle
   seulement la forme du cadre. */
.hero {
  margin: 0 0 var(--espace);
}
.hero img {
  width: 100%;
  border-radius: var(--rayon);
  object-fit: cover;            /* remplit le cadre sans déformer */
  max-height: 32rem;            /* un portrait en pleine largeur serait immense : on plafonne */
}
.hero figcaption {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin-top: 0.4rem;
}

.chapeau {
  font-size: 1.2rem;
  color: var(--texte-doux);
}

/* Cartes : grille qui s'adapte toute seule (auto-fit + minmax). */
.cartes {
  display: grid;
  gap: var(--espace);
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  list-style: none;
  padding: 0;
  margin: 0;
}
.carte {
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  overflow: hidden;
}
.carte__corps {
  padding: var(--espace);
}
.carte p { margin: 0.25rem 0; }
.carte img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Bouton-lien */
.bouton {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: var(--principale);
  color: var(--sur-principale);
  font-weight: 700;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.bouton:hover {
  filter: brightness(1.1);
}

/* Agenda : liste de rendez-vous avec une pastille de date. */
.agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--espace);
}
.evenement {
  display: flex;
  gap: var(--espace);
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: var(--espace);
}
.evenement__date {
  flex: 0 0 4.5rem;             /* largeur fixe, ne rétrécit pas */
  text-align: center;
  background: var(--principale);
  color: var(--sur-principale);
  border-radius: 0.5rem;
  padding: 0.4rem;
  line-height: 1.2;
  align-self: flex-start;
}
.evenement__jour {
  display: block;
  font-size: 1.8rem;
  font-weight: 700;
}
.evenement p { margin: 0.2rem 0; }

/* Contact : formulaire (de démonstration) */
.formulaire {
  display: grid;
  gap: var(--espace);
  max-width: 34rem;
  background: var(--surface);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 1.25rem;
}
.formulaire label {
  display: block;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.formulaire input,
.formulaire textarea {
  width: 100%;
  font: inherit;
  padding: 0.6rem 0.75rem;
  color: var(--texte);
  background: var(--fond);
  border: 2px solid var(--texte-doux);
  border-radius: 0.5rem;
}

.note {
  background: var(--surface);
  border-left: 6px solid var(--principale);
  padding: 0.75rem 1rem;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* Pied de page */
.pied {
  margin-top: 2rem;
  padding: 1.5rem var(--espace);
  text-align: center;
  font-size: 0.95rem;
  color: var(--texte-doux);
  border-top: 1px solid var(--bordure);
}
.pied p { margin: 0.25rem 0; }


/* ---------------------------------------------------------------------
   6. GRANDS ÉCRANS
   --------------------------------------------------------------------- */

@media (min-width: 700px) {
  h1 { font-size: 2.6rem; }
  .hero img { max-height: 28rem; }
}