/* ============================================================
   MENU O RESTO — Charte graphique globale
   Fichier : style_cg.css
   À lier sur TOUTES les pages via :
   <link rel="stylesheet" href="/param/style.css">
   ============================================================ */


/* ============================================================
   2. VARIABLES CSS — La palette & les tokens de design
   Modifier une valeur ici = mise à jour sur tout le site.
   ============================================================ */
:root {

  /* --- Tailles de texte (échelle fluide) --- */
  --texte-xs   : 0.75rem;   /* 12px */
  --texte-sm   : 0.875rem;  /* 14px */
  --texte-base : 1rem;      /* 16px */
  --texte-lg   : 1.125rem;  /* 18px */
  --texte-xl   : 1.25rem;   /* 20px */
  --texte-2xl  : 1.5rem;    /* 24px */
  --texte-3xl  : 2rem;      /* 32px */
  --texte-4xl  : 2.75rem;   /* 44px */

  /* --- Espacements --- */
  --espace-xs  : 0.25rem;   /* 4px */
  --espace-sm  : 0.5rem;    /* 8px */
  --espace-md  : 1rem;      /* 16px */
  --espace-lg  : 1.5rem;    /* 24px */
  --espace-xl  : 2rem;      /* 32px */
  --espace-2xl : 3rem;      /* 48px */
  --espace-3xl : 5rem;      /* 80px */

  /* --- Arrondi des coins --- */
  --rayon-sm   : 4px;
  --rayon-md   : 8px;
  --rayon-lg   : 14px;
  --rayon-xl   : 24px;
  --rayon-rond : 999px;     /* pilule / cercle */

  /* --- Ombres --- */
  --ombre-sm   : 0 1px 4px rgba(30, 26, 20, 0.07);
  --ombre-md   : 0 4px 16px rgba(30, 26, 20, 0.10);
  --ombre-lg   : 0 8px 32px rgba(30, 26, 20, 0.13);

  /* --- Transitions --- */
  --transition : 0.2s ease;

  /* --- Largeur max du contenu --- */
  --largeur-max : 1100px;
  --largeur-texte : 680px;  /* pour les blocs de texte seuls */
}


/* ============================================================
   3. RESET & BASE
   Neutralise les styles par défaut des navigateurs.
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth; /* défilement doux sur les ancres # */
  font-size: 16px;
}

body {
  font-family: var(--font-corps);
  font-size: var(--texte-base);
  color: var(--texte-principal);
  background-color: var(--couleur-fond);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased; /* texte plus net sur Mac */
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--couleur-primaire);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--couleur-primaire-hover);
}

ul, ol {
  list-style: none;
}


/* ============================================================
   4. TYPOGRAPHIE
   Classes réutilisables pour les titres et le corps de texte.
   ============================================================ */

/* Titres : toujours en Playfair Display */
h1, h2, h3, h4,
.titre-1, .titre-2, .titre-3, .titre-4 {
  font-family: var(--font-titre);
  font-weight: 700;
  line-height: 1.2;
  color: var(--texte-principal);
}

h1, .titre-1 { font-size: clamp(2rem, 5vw, var(--texte-4xl)); }
h2, .titre-2 { font-size: clamp(1.5rem, 3vw, var(--texte-3xl)); }
h3, .titre-3 { font-size: var(--texte-2xl); }
h4, .titre-4 { font-size: var(--texte-xl); }

/* clamp() = taille fluide : min | préférée | max
   Le titre s'adapte entre mobile et desktop sans media query */

p { margin-bottom: var(--espace-md); }
p:last-child { margin-bottom: 0; }

.texte-secondaire { color: var(--texte-secondaire); }
.texte-discret    { color: var(--texte-discret); font-size: var(--texte-sm); }
.texte-centre     { text-align: center; }
.texte-gras       { font-weight: 500; }

/* Messages de retour */
.p_succes {
    background: var(--couleur-secondaire-clair);
    color: var(--couleur-secondaire);
    border: 1px solid var(--couleur-secondaire);
    border-radius: var(--rayon-md);
    padding: var(--espace-md) var(--espace-lg);
    margin: var(--espace-md) 0;
    font-weight: 500;
}

.p_erreur {
    background: #fdeaea;
    color: #c42828;
    border: 1px solid #f5c6c6;
    border-radius: var(--rayon-md);
    padding: var(--espace-md) var(--espace-lg);
    margin: var(--espace-md) 0;
    font-weight: 500;
}

/* ============================================================
   5. MISE EN PAGE — Conteneur & Grilles
   ============================================================ */

/* Conteneur centré avec marges latérales */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--espace-xl);
  padding-right: var(--espace-xl);
}

/* Grille 2 colonnes égales */
.grille-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espace-xl);
}

/* Grille 3 colonnes égales */    
.grille-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--espace-xl);
}

/* Grille automatique responsive : s'adapte selon la place disponible */
.grille-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--espace-lg);
}

/* Flexbox centré horizontal */
.flex-centre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--espace-md);
}

/* Section avec espacement vertical standard */
.section {
  padding: var(--espace-3xl) 0;
}

.section-sm {
  padding: var(--espace-2xl) 0;
}


/* ============================================================
   6. NAVBAR
   Position sticky : reste en haut au scroll.
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 64px;
  background: var(--couleur-fond);
  backdrop-filter: blur(8px);            /* flou derrière = effet verre */
  border-bottom: 1px solid var(--bordure);
  display: flex;
  align-items: center;
}

.navbar .conteneur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Logo */
.navbar-logo {
  font-family: var(--font-titre);
  font-size: var(--texte-xl);
  color: var(--texte-principal);
  font-weight: 700;
}

.navbar-logo span {
  color: var(--couleur-primaire); /* le "O" en terracotta */
}

/* Liens de navigation */
.navbar-liens {
  display: flex;
  align-items: center;
  gap: var(--espace-xl);
}

.navbar-liens a {
  font-size: var(--texte-sm);
  color: var(--texte-secondaire);
  font-weight: 500;
  transition: color var(--transition);
}

.navbar-liens a:hover,
.navbar-liens a.actif {  /* ajouter class="actif" sur le lien de la page courante */
  color: var(--couleur-primaire);
}

/* Bouton CTA dans la navbar */
.navbar-cta {
  font-size: var(--texte-sm);
  font-weight: 500;
  padding: 8px 20px;
  background: var(--texte-principal);
  color: var(--texte-inverse) !important;
  border-radius: var(--rayon-md);
  transition: background var(--transition) !important;
}

.navbar-cta:hover {
  background: var(--couleur-primaire) !important;
  color: var(--texte-inverse) !important;
}

/* Menu hamburger (mobile) — caché par défaut sur desktop */
.navbar-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--espace-sm);
}

.navbar-burger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--texte-principal);
  border-radius: 2px;
  transition: all var(--transition);
}


/* ============================================================
   6bis. HERO SECTION
   ============================================================ */

.hero {
  height: calc(100vh - 64px);
  position: relative;
  z-index: 0;          /* isole le hero dans son propre contexte */
  flex-shrink: 0;
  overflow: hidden;         /* évite les débordements d'image */
  display: flex;
  align-items: center;      /* centrage vertical du contenu */
  justify-content: center;  /* centrage horizontal du contenu */
  text-align: center;
}

.hero.hero-sm {
  height: 40vh;
  min-height: 260px;  /* évite qu'il soit trop petit sur mobile */
}

/* L'image passe en arrière-plan absolu */
.hero img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;   /* ← le !important gagne sur la règle globale */
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Calque sombre semi-transparent pour lisibilité du texte */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.50);   /* opacité : ajuste selon la clarté de ton image */
  z-index: 1;
}

/* Conteneur du texte — passe au-dessus du calque */
.hero-contenu {
  position: relative;
  z-index: 2;
  padding: 0 var(--espace-xl);
  max-width: 860px;
}

/* Titre principal du hero */
.hero-contenu h1 {
  color: #ffffff;
  font-size: clamp(2rem, 5vw, var(--texte-4xl));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
  margin-bottom: var(--espace-lg);
}

/* Sous-titre optionnel dans le hero */
.hero-contenu p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--texte-lg);
  max-width: 560px;
  margin: 0 auto var(--espace-xl);
}

/* Boutons dans le hero */
.hero-contenu .btn-primaire {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: #ffffff;
}

.hero-contenu .btn-secondaire {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}

.hero-contenu .btn-secondaire:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #ffffff;
}

/* Responsive mobile */
@media (max-width: 600px) {
  .hero {
    /* Désactive le parallaxe sur iOS (bug connu) */
    background-attachment: scroll;
  }

  .hero-contenu h1 {
    font-size: clamp(1.6rem, 8vw, 2.4rem);
  }
}


.section, .section-sm {
  position: relative;
  z-index: 1;          /* passe au-dessus du hero */
  background: var(--couleur-fond);  /* fond opaque obligatoire */
}

/* ============================================================
   7. BOUTONS
   Usage : <a href="#" class="btn btn-primaire">Texte</a>
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--espace-sm);
  font-family: var(--font-corps);
  font-size: var(--texte-base);
  font-weight: 500;
  padding: 12px 28px;
  border-radius: var(--rayon-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}

/* Bouton principal : fond sombre */
.btn-primaire {
  background: var(--texte-principal);
  color: var(--texte-inverse);
  border-color: var(--texte-principal);
}

.btn-primaire:hover {
  background: var(--couleur-primaire);
  border-color: var(--couleur-primaire);
  color: var(--texte-inverse);
}

/* Bouton secondaire : contour seulement */
.btn-secondaire {
  background: transparent;
  color: var(--texte-principal);
  border-color: var(--texte-principal);
}

.btn-secondaire:hover {
  border-color: var(--couleur-primaire);
  color: var(--couleur-primaire);
}

/* Bouton accent : terracotta */
.btn-accent {
  background: var(--couleur-primaire);
  color: var(--texte-inverse);
  border-color: var(--couleur-primaire);
}

.btn-accent:hover {
  background: var(--couleur-primaire-hover);
  border-color: var(--couleur-primaire-hover);
  color: var(--texte-inverse);
}

/* Bouton petit */
.btn-sm {
  font-size: var(--texte-sm);
  padding: 8px 18px;
}


/* ============================================================
   8. CARTES
   Usage : <div class="carte"> ... </div>
   ============================================================ */
.carte {
  background: var(--couleur-fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-lg);
  padding: var(--espace-xl);
  transition: box-shadow var(--transition), transform var(--transition);
}

.carte:hover {
  box-shadow: var(--ombre-md);
  transform: translateY(-2px); /* légère élévation au survol */
}

/* Carte avec image en haut */
.carte-image {
  padding: 0;
  overflow: hidden;
}

.carte-image img {
  width: 100%;
  height: 200px;
  object-fit: cover; /* recadre l'image sans la déformer */
}

.carte-image .carte-corps {
  padding: var(--espace-lg);
}

/* Variante : carte sombre */
.carte-sombre {
  background: var(--couleur-fond-sombre);
  border-color: rgba(255,255,255,0.08);
  color: var(--texte-inverse);
}

.carte-sombre h2,
.carte-sombre h3,
.carte-sombre h4 {
  color: var(--texte-inverse);
}

/* ============================================================
   8bis. BANNIERES
   Usage : <div class="banniere"> ... </div>
   ============================================================ */
.banniere-sombre {
  background: var(--couleur-fond-sombre);
  border-color: rgba(255,255,255,0.08);
  color: var(--texte-inverse);
}

/* ============================================================
   9. BADGES & ÉTIQUETTES
   Usage : <span class="badge badge-primaire">Nouveau</span>
   ============================================================ */
.badge {
  display: inline-block;
  font-size: var(--texte-xs);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: var(--rayon-rond);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.badge-primaire {
  background: var(--couleur-primaire-clair);
  color: var(--couleur-primaire-hover);
  border: 1px solid #f0d9c8;
}

.badge-secondaire {
  background: var(--couleur-secondaire-clair);
  color: var(--couleur-secondaire);
  border: 1px solid #c8dece;
}

.badge-sombre {
  background: var(--texte-principal);
  color: var(--texte-inverse);
}


/* ============================================================
   10. FORMULAIRES
   Usage : <input class="champ" type="text" placeholder="...">
   ============================================================ */
.champ {
  width: 100%;
  font-family: var(--font-corps);
  font-size: var(--texte-base);
  color: var(--texte-principal);
  background: var(--couleur-fond-carte);
  border: 1.5px solid var(--bordure);
  border-radius: var(--rayon-md);
  padding: 10px 16px;
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
}

.champ:focus {
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(200, 115, 58, 0.15); /* halo terracotta au focus */
}

.champ::placeholder {
  color: var(--texte-discret);
}

/* Label de formulaire */
.label {
  display: block;
  font-size: var(--texte-sm);
  font-weight: 500;
  color: var(--texte-secondaire);
  margin-bottom: var(--espace-xs);
}

/* Groupe label + champ */
.champ-groupe {
  display: flex;
  flex-direction: column;
  gap: var(--espace-xs);
  margin-bottom: var(--espace-lg);
}


/* ============================================================
   11. FOOTER
   ============================================================ */
.footer {
  background: var(--couleur-fond-sombre);
  color: var(--texte-discret);
  padding: var(--espace-2xl) 0 var(--espace-lg);
}

.footer-grille {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--espace-2xl);
  padding-bottom: var(--espace-xl);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: var(--espace-lg);
}

.footer-logo {
  font-family: var(--font-titre);
  font-size: var(--texte-xl);
  color: var(--texte-inverse);
  margin-bottom: var(--espace-sm);
}

.footer-logo span { color: var(--couleur-primaire); }

.footer-desc {
  font-size: var(--texte-sm);
  line-height: 1.7;
  margin-bottom: 0;
}

.footer-col-titre {
  font-size: var(--texte-sm);
  font-weight: 500;
  color: var(--texte-inverse);
  margin-bottom: var(--espace-md);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.footer-liens {
  display: flex;
  flex-direction: column;
  gap: var(--espace-sm);
}

.footer-liens a {
  font-size: var(--texte-sm);
  color: var(--texte-discret);
  transition: color var(--transition);
}

.footer-liens a:hover { color: var(--texte-inverse); }

.footer-bas {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--texte-xs);
  flex-wrap: wrap;
  gap: var(--espace-sm);
}


/* ============================================================
   12. UTILITAIRES
   Petites classes ponctuelles pour ajuster sans écrire de CSS.
   ============================================================ */

/* Marges */
.mt-sm { margin-top: var(--espace-sm); }
.mt-md { margin-top: var(--espace-md); }
.mt-lg { margin-top: var(--espace-lg); }
.mt-xl { margin-top: var(--espace-xl); }
.mb-sm { margin-bottom: var(--espace-sm); }
.mb-md { margin-bottom: var(--espace-md); }
.mb-lg { margin-bottom: var(--espace-lg); }
.mb-xl { margin-bottom: var(--espace-xl); }

/* Affichage */
.masque-mobile  { display: block; }  /* caché sur mobile, voir media queries */
.visible-mobile { display: none; }   /* visible seulement sur mobile */

/* Séparateur horizontal */
.separateur {
  border: none;
  border-top: 1px solid var(--bordure);
  margin: var(--espace-xl) 0;
}

/* Champ piège anti-robot : caché visuellement, accessible aux robots */
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}



/* ============================================================
   13. RESPONSIVE — Media Queries
   Mobile first : on part du desktop et on adapte vers le bas.
   Breakpoints :
     - Tablette  : max-width 900px
     - Mobile    : max-width 600px
   ============================================================ */

/* --- Tablette --- */
@media (max-width: 900px) {

  .grille-3 {
    grid-template-columns: repeat(2, 1fr); /* 3 col → 2 col */
  }

  .footer-grille {
    grid-template-columns: 1fr 1fr; /* 4 col → 2 col */
  }

  .navbar-liens {
    /* Sur tablette on cache les liens et on montre le burger */
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--couleur-fond);
    flex-direction: column;
    padding: var(--espace-md) var(--espace-xl);
    border-bottom: 1px solid var(--bordure);
    gap: var(--espace-md);
  }

  /* Quand le menu est ouvert (JS ajoute la classe .ouvert) */
  .navbar-liens.ouvert {
    display: flex;
  }

  .navbar-burger { display: flex; }
}

/* --- Mobile --- */
@media (max-width: 600px) {

  :root {
    --espace-3xl: 3rem; /* réduit l'espacement vertical */
  }

  .conteneur {
    padding-left: var(--espace-md);
    padding-right: var(--espace-md);
  }

  .grille-2,
  .grille-3,
  .grille-auto {
    grid-template-columns: 1fr; /* toutes les grilles passent en 1 colonne */
  }

  .footer-grille {
    grid-template-columns: 1fr;
  }

  .footer-bas {
    flex-direction: column;
    text-align: center;
  }

  .flex-centre {
    flex-direction: column;
  }

  .masque-mobile { display: none; }
  .visible-mobile { display: block; }
}