/* ==========================================================================
   CHARTE GRAPHIQUE — Cabinet du Docteur Bouayad
   Direction B1 : beige sable, vert sauge, cuivre
   Ce fichier définit toutes les couleurs, polices et espacements du site.
   On l'inclut dans chaque page ; on n'écrit jamais une couleur "en dur"
   ailleurs, on utilise toujours les variables ci-dessous.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. LES POLICES
   Hébergées sur le site (dossier fonts/), pas chez Google : aucune donnée
   de visiteur ne part vers un service tiers pour afficher le texte.
   Ce sont des polices variables : un seul fichier couvre plusieurs graisses
   (400 à 500 pour Inter, 400 à 600 pour Source Serif 4).
   Chaque police est découpée en deux fichiers : "latin" (le français
   complet, € et œ compris) et "latin-ext" (autres langues européennes),
   que le navigateur ne télécharge que si la page en a besoin.
   Licence : SIL Open Font License, voir fonts/ofl-*.txt.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1. LES VARIABLES
   Une variable, c'est un nom qu'on donne à une valeur. On écrit la couleur
   une seule fois ici, puis on l'appelle partout avec var(--nom).
   Pour changer une couleur sur tout le site, on modifie une seule ligne.
   -------------------------------------------------------------------------- */

:root {

  /* --- Couleurs de fond --- */
  --c-blanc:        #FFFFFF;  /* fond principal des pages, en-tête */
  --c-sable:        #F7F3EA;  /* bandeau d'accueil, sections alternées */
  --c-sable-fonce:  #EFE9DC;  /* survol, séparations douces */

  /* --- Couleurs de texte --- */
  --c-encre:        #2F3D34;  /* titres et texte principal (vert très sombre) */
  --c-texte:        #45544A;  /* paragraphes */
  --c-texte-clair:  #7A8A7E;  /* légendes, mentions secondaires */

  /* --- Vert sauge : l'identité du site --- */
  --c-sauge:        #3E5245;  /* boutons principaux, pied de page */
  --c-sauge-clair:  #5C7565;  /* survol des boutons verts */
  --c-sauge-pale:   #E4EAE4;  /* fonds d'encadrés discrets */

  /* --- Cuivre : la couleur d'accent, à utiliser avec parcimonie --- */
  --c-cuivre:       #A6612F;  /* bouton de rendez-vous, liens importants */
  --c-cuivre-fonce: #8E5227;  /* survol du cuivre */
  --c-cuivre-pale:  #F6EDE5;  /* fond de l'encadré urgences */

  /* --- Bordures --- */
  --c-bordure:      #E8E3D8;  /* traits de séparation */
  --c-bordure-forte:#D6CFBE;  /* bordures de champs de formulaire */

  /* --- Rouge : réservé aux erreurs de formulaire --- */
  --c-erreur:       #A33232;

  /* --- Polices ---
     Source Serif 4 pour les titres : un serif contemporain, chaleureux,
     qui donne du caractère sans faire vieillot.
     Inter pour le texte : très lisible à l'écran, y compris en petit. */
  --police-titre: "Source Serif 4", Georgia, serif;
  --police-texte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* --- Tailles de texte ---
     Exprimées en rem : 1rem = 16px par défaut.
     L'avantage : si le visiteur agrandit la police dans son navigateur,
     tout le site s'adapte. */
  --taille-xs:   0.8125rem;  /* 13px — mentions légales, légendes */
  --taille-sm:   0.9375rem;  /* 15px — texte secondaire */
  --taille-base: 1.0625rem;  /* 17px — paragraphes */
  --taille-lg:   1.25rem;    /* 20px — chapô, intro */
  --taille-h3:   1.375rem;   /* 22px */
  --taille-h2:   1.75rem;    /* 28px */
  --taille-h1:   2.5rem;     /* 40px */

  /* --- Espacements ---
     Une échelle régulière : toutes les marges du site sortent de cette liste.
     C'est ce qui donne un rythme visuel cohérent. */
  --esp-xs:  0.5rem;   /*  8px */
  --esp-sm:  1rem;     /* 16px */
  --esp-md:  1.5rem;   /* 24px */
  --esp-lg:  2.5rem;   /* 40px */
  --esp-xl:  4rem;     /* 64px */
  --esp-xxl: 6rem;     /* 96px */

  /* --- Divers --- */
  --rayon:        3px;      /* arrondi des boutons : léger, sobre */
  --rayon-pastille: 999px;  /* bouts entièrement arrondis (bouton d'appel mobile) */
  --largeur-max:  1140px;   /* largeur maximale du contenu */
  --largeur-texte: 68ch;    /* largeur max d'un paragraphe, pour le confort
                               de lecture : environ 68 caractères par ligne */
  --transition:   180ms ease;
}


/* --------------------------------------------------------------------------
   2. RÉGLAGES DE BASE
   -------------------------------------------------------------------------- */

/* box-sizing: border-box fait que la largeur d'un élément inclut ses marges
   intérieures et sa bordure. Sans ça, les calculs de largeur deviennent
   vite pénibles. C'est la première ligne de presque tous les sites. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: var(--taille-base);
  line-height: 1.7;          /* hauteur de ligne : de l'air entre les lignes */
  color: var(--c-texte);
  background-color: var(--c-blanc);
  -webkit-font-smoothing: antialiased;
}


/* --------------------------------------------------------------------------
   3. TITRES
   -------------------------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  color: var(--c-encre);
  font-weight: 600;
  line-height: 1.25;         /* les titres serrent plus que le texte courant */
  margin: 0 0 var(--esp-sm);
}

h1 { font-size: var(--taille-h1); letter-spacing: -0.015em; }
h2 { font-size: var(--taille-h2); }
h3 { font-size: var(--taille-h3); }

p {
  margin: 0 0 var(--esp-sm);
  max-width: var(--largeur-texte);
}


/* --------------------------------------------------------------------------
   4. LIENS
   -------------------------------------------------------------------------- */

a {
  color: var(--c-cuivre);
  text-decoration: underline;
  text-underline-offset: 3px;   /* décolle un peu le soulignement du texte */
  transition: color var(--transition);
}

a:hover {
  color: var(--c-cuivre-fonce);
}

/* Le contour au clavier : indispensable pour les personnes qui naviguent
   sans souris. On ne le supprime jamais, on le rend joli. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--c-cuivre);
  outline-offset: 2px;
}


/* --------------------------------------------------------------------------
   5. BOUTONS
   Trois niveaux, du plus important au moins important.
   -------------------------------------------------------------------------- */

.bouton {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--police-texte);
  font-size: var(--taille-sm);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;   /* un bouton ne coupe jamais son texte sur deux lignes */
  border: 1px solid transparent;
  border-radius: var(--rayon);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

/* Bouton de rendez-vous : le seul en cuivre sur la page.
   C'est ce qu'on veut que le visiteur fasse en priorité. */
.bouton--rdv {
  background-color: var(--c-cuivre);
  color: var(--c-blanc);
}
.bouton--rdv:hover {
  background-color: var(--c-cuivre-fonce);
  color: var(--c-blanc);
}

/* Bouton principal vert : actions secondaires importantes */
.bouton--principal {
  background-color: var(--c-sauge);
  color: var(--c-blanc);
}
.bouton--principal:hover {
  background-color: var(--c-sauge-clair);
  color: var(--c-blanc);
}

/* Bouton contour : actions de moindre importance */
.bouton--contour {
  background-color: transparent;
  color: var(--c-sauge);
  border-color: var(--c-sauge);
}
.bouton--contour:hover {
  background-color: var(--c-sauge-pale);
}


/* --------------------------------------------------------------------------
   6. STRUCTURE DE PAGE
   -------------------------------------------------------------------------- */

/* Centre le contenu et l'empêche de s'étaler sur les grands écrans */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--esp-md);
}

.section {
  padding: var(--esp-xl) 0;
}

/* Une section sur fond sable, pour alterner et rythmer la page */
.section--sable {
  background-color: var(--c-sable);
}


/* --------------------------------------------------------------------------
   7. ACCESSIBILITÉ
   -------------------------------------------------------------------------- */

/* Masque un texte à l'écran tout en le laissant lisible par les lecteurs
   d'écran. Sert par exemple au lien "Aller au contenu principal". */
.lecteur-ecran-uniquement {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Respecte le réglage système des personnes sensibles au mouvement */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   8. MOBILE
   Les titres trop grands sur petit écran, on les réduit.
   Cette règle s'applique uniquement en dessous de 760px de large.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  :root {
    --taille-h1: 1.875rem;   /* 30px */
    --taille-h2: 1.5rem;     /* 24px */
    --esp-xl: 2.5rem;
    --esp-xxl: 3.5rem;
  }
}