/*
Theme Name:   moit-moit
Theme URI:    https://moit-moit.fr
Description:  Theme enfant de GeneratePress pour moit-moit. Conseil, projets et sites web. Marseille.
Author:       Kader Bennacer
Author URI:   https://moit-moit.fr
Template:     generatepress
Version:      1.0.0
Text Domain:  moitmoit
License:      GNU General Public License v2 or later
*/

/* =========================================================
   1. VARIABLES — la charte, et rien que la charte.
   Aucune valeur de couleur, de contour ou de rotation
   ne doit apparaitre en dur ailleurs dans ce fichier.
   ========================================================= */

:root {
  --bleu:      #0E76BC;
  --soleil:    #FFC61E;
  --tomate:    #E63A26;
  --rose:      #EE5A8E;
  --turquoise: #17B0A7;
  --basilic:   #5BB544;
  --creme:     #FFF6E5;
  --encre:     #17181A;

  --creme-ombre: #F2ECDC;
  --encre-doux:  #4A4238;
  --gris:        #6B6459;

  --titre: 'Bricolage Grotesque', 'Archivo', system-ui, sans-serif;
  --texte: 'Epilogue', system-ui, sans-serif;
  --craie: 'Caveat', cursive;

  --contour:       3px;
  --contour-fin:   2px;
  --rayon:         10px;
  --pastille:      20px;

  --pivot-1: -1.8deg;
  --pivot-2:  1.5deg;
  --pivot-3:  3deg;

  --pas:      1rem;
  --pas-2:    2rem;
  --pas-3:    3rem;
  --pas-4:    4.5rem;
  --largeur:  1180px;
  --largeur-texte: 68ch;

  --accent: var(--bleu);
}

/* =========================================================
   2. SOCLE
   ========================================================= */

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

body {
  background: var(--creme);
  color: var(--encre);
  font-family: var(--texte);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .mm-titre {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--encre);
  margin: 0 0 var(--pas);
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 500; }
h4 { font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }

p { margin: 0 0 var(--pas); }
p, li { max-width: var(--largeur-texte); }

a { color: var(--tomate); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--encre); }

strong { font-weight: 500; }
em { font-style: italic; }

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: var(--contour) solid var(--tomate);
  outline-offset: 3px;
}

.mm-invisible {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.mm-saut {
  position: absolute; left: -9999px; z-index: 999;
  background: var(--encre); color: var(--creme); padding: .75rem 1.25rem;
}
.mm-saut:focus { left: 1rem; top: 1rem; }

/* =========================================================
   3. MISE EN PAGE
   ========================================================= */

.mm-large { width: min(100% - 2.5rem, var(--largeur)); margin-inline: auto; }
.mm-etroit { width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.mm-section { padding: var(--pas-4) 0; }
.mm-section--serree { padding: var(--pas-3) 0; }

.mm-section--pleine {
  background: var(--accent);
  color: var(--creme);
  border-block: var(--contour) solid var(--encre);
}
.mm-section--pleine h1,
.mm-section--pleine h2,
.mm-section--pleine h3 { color: var(--creme); }

.mm-grille { display: grid; gap: var(--pas-2); }
.mm-grille--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mm-grille--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.mm-grille--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.mm-surtitre {
  font-family: var(--titre);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: lowercase;
  color: var(--tomate);
  margin-bottom: .6rem;
}

/* =========================================================
   4. COMPOSANTS
   ========================================================= */

.mm-pastille {
  display: inline-block;
  font-family: var(--titre);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  padding: .8rem 1.35rem;
  border: var(--contour-fin) solid var(--encre);
  border-radius: var(--pastille);
  background: var(--creme);
  color: var(--encre);
  text-decoration: none;
  transition: transform .12s ease;
}
.mm-pastille:hover { transform: translateY(-2px); color: var(--encre); }
.mm-pastille--action { background: var(--tomate); color: var(--creme); }
.mm-pastille--action:hover { color: var(--creme); }
.mm-pastille--claire { background: transparent; color: inherit; border-color: currentColor; }

.mm-carte {
  background: var(--creme);
  border: var(--contour) solid var(--encre);
  border-radius: var(--rayon);
  padding: 1.5rem;
  display: block;
  text-decoration: none;
  color: var(--encre);
  transition: transform .14s ease;
}
a.mm-carte:hover { transform: rotate(var(--pivot-2)); color: var(--encre); }

.mm-carte__loggia {
  display: block;
  height: 12px;
  margin: -1.5rem -1.5rem 1.15rem;
  border-bottom: var(--contour) solid var(--encre);
  border-radius: calc(var(--rayon) - 3px) calc(var(--rayon) - 3px) 0 0;
  background: var(--accent);
}

.mm-badge {
  display: inline-block;
  font-family: var(--titre);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .06em;
  padding: .3rem .7rem;
  border: var(--contour-fin) solid var(--encre);
  border-radius: var(--pastille);
  background: var(--soleil);
  color: var(--encre);
}

.mm-chiffre {
  font-family: var(--titre);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  display: block;
}
.mm-chiffre + span { font-size: .92rem; color: var(--encre-doux); }
.mm-section--pleine .mm-chiffre + span { color: var(--creme); }

.mm-craie {
  font-family: var(--craie);
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--tomate);
  display: inline-block;
  transform: rotate(var(--pivot-1));
}

.mm-encadre {
  background: var(--soleil);
  border: var(--contour) solid var(--encre);
  border-radius: var(--rayon);
  padding: 1.25rem 1.5rem;
  transform: rotate(var(--pivot-2));
  margin: var(--pas-2) 0;
}
.mm-encadre p:last-child { margin-bottom: 0; }

.mm-store {
  height: 22px;
  border-bottom: var(--contour) solid var(--encre);
  background: repeating-linear-gradient(
    90deg,
    var(--creme) 0 22px,
    var(--turquoise) 22px 44px
  );
}

.mm-vichy {
  background-image:
    linear-gradient(45deg, var(--creme-ombre) 25%, transparent 25% 75%, var(--creme-ombre) 75%),
    linear-gradient(45deg, var(--creme-ombre) 25%, transparent 25% 75%, var(--creme-ombre) 75%);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
}

.mm-allergene {
  background: var(--turquoise);
  border-top: var(--contour) solid var(--encre);
  color: var(--encre);
  font-size: .82rem;
  padding: .6rem 0;
}
.mm-allergene .mm-large { display: flex; gap: .5rem; align-items: center; }

/* =========================================================
   5. EN-TETE
   ========================================================= */

.mm-entete {
  background: var(--creme);
  border-bottom: var(--contour) solid var(--encre);
  position: sticky; top: 0; z-index: 50;
}
.mm-entete__interieur {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.mm-marque { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.mm-marque svg, .mm-marque img { width: 30px; height: 30px; }
.mm-marque__mot {
  font-family: var(--titre);
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.045em;
  color: var(--encre);
}

.mm-nav ul { list-style: none; display: flex; align-items: center; gap: .35rem; margin: 0; padding: 0; }
.mm-nav li { max-width: none; }
.mm-nav a {
  display: block; padding: .5rem .8rem;
  font-family: var(--titre); font-size: .95rem; font-weight: 500;
  color: var(--encre); text-decoration: none; border-radius: var(--pastille);
}
.mm-nav a:hover { background: var(--creme-ombre); }
.mm-nav .current-menu-item > a,
.mm-nav .current_page_item > a {
  background: var(--soleil);
  border: var(--contour-fin) solid var(--encre);
}
.mm-nav .mm-menu-action > a {
  background: var(--tomate); color: var(--creme);
  border: var(--contour-fin) solid var(--encre);
}

.mm-burger { display: none; background: none; border: 0; padding: .4rem; cursor: pointer; }
.mm-burger span { display: block; width: 24px; height: 3px; background: var(--encre); margin: 4px 0; }

@media (max-width: 880px) {
  .mm-burger { display: block; }
  .mm-nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--creme); border-bottom: var(--contour) solid var(--encre);
    padding: 1rem 1.25rem;
  }
  .mm-nav.est-ouvert { display: block; }
  .mm-nav ul { flex-direction: column; align-items: stretch; gap: .2rem; }
}

/* =========================================================
   6. HERO
   ========================================================= */

.mm-hero { position: relative; border-bottom: var(--contour) solid var(--encre); overflow: hidden; }
.mm-hero__fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mm-hero__interieur { position: relative; padding: var(--pas-3) 0 var(--pas-4); }

.mm-hero__carte {
  background: rgba(255, 246, 229, 0.8);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  border: var(--contour) solid var(--encre);
  border-radius: var(--rayon);
  padding: 1.75rem;
  max-width: 480px;
  transform: rotate(var(--pivot-1));
}
.mm-hero__carte h1 { margin-bottom: .75rem; }
.mm-hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.15rem; }

@media (max-width: 600px) {
  .mm-hero__carte {
    width: 69%;
    margin-inline: auto;
    padding: 1.25rem;
  }
}

/* =========================================================
   7. CONTENUS
   ========================================================= */

.mm-meta {
  font-family: var(--titre); font-size: .8rem; font-weight: 500;
  letter-spacing: .1em; color: var(--gris);
}

.mm-fiche__entete { border-bottom: var(--contour) solid var(--accent); padding-bottom: var(--pas-2); margin-bottom: var(--pas-2); }
.mm-fiche__bloc { margin-bottom: var(--pas-2); }
.mm-fiche__bloc ul { padding-left: 1.1rem; }
.mm-fiche__bloc li { margin-bottom: .35rem; }

.mm-resultats { background: var(--soleil); border: var(--contour) solid var(--encre); border-radius: var(--rayon); padding: 1.5rem; }
.mm-resultats ul { list-style: none; padding: 0; margin: 0; }
.mm-resultats li { font-size: 1.05rem; margin-bottom: .5rem; }

.mm-citation {
  border-left: var(--contour) solid var(--tomate);
  border-radius: 0;
  padding-left: 1.25rem;
  font-size: 1.15rem;
  font-style: italic;
}
.mm-citation cite { display: block; font-style: normal; font-size: .9rem; color: var(--gris); margin-top: .5rem; }

.mm-filtres { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: var(--pas-2); }

.mm-pagination { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: var(--pas-3); }
.mm-pagination .page-numbers {
  display: inline-block; padding: .5rem .9rem;
  border: var(--contour-fin) solid var(--encre); border-radius: var(--pastille);
  text-decoration: none; color: var(--encre); background: var(--creme);
}
.mm-pagination .current { background: var(--soleil); }

/* =========================================================
   8. FORMULAIRES
   ========================================================= */

label { display: block; font-family: var(--titre); font-weight: 500; font-size: .9rem; margin-bottom: .3rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%; max-width: 100%;
  font-family: var(--texte); font-size: 1rem;
  padding: .7rem .9rem;
  background: var(--creme);
  border: var(--contour-fin) solid var(--encre);
  border-radius: var(--rayon);
  color: var(--encre);
}
textarea { min-height: 150px; }
button, input[type="submit"] {
  font-family: var(--titre); font-size: .95rem; font-weight: 500;
  padding: .8rem 1.35rem; cursor: pointer;
  background: var(--tomate); color: var(--creme);
  border: var(--contour-fin) solid var(--encre);
  border-radius: var(--pastille);
}

/* =========================================================
   9. PIED
   ========================================================= */

.mm-pied { background: var(--encre); color: var(--creme); padding: var(--pas-3) 0 var(--pas-2); }
.mm-pied h3 { color: var(--creme); font-size: 1rem; margin-bottom: .7rem; }
.mm-pied a { color: var(--creme); }
.mm-pied a:hover { color: var(--soleil); }
.mm-pied ul { list-style: none; padding: 0; margin: 0; }
.mm-pied li { margin-bottom: .35rem; }
.mm-pied__bas {
  border-top: 1px solid rgba(255,246,229,.25);
  margin-top: var(--pas-2); padding-top: var(--pas);
  font-size: .82rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
}

/* =========================================================
   10. LES TROIS SALLES
   La regle editoriale, appliquee par le code.
   Le bureau garde le langage, il perd la densite de gags.
   ========================================================= */

body.salle-bureau .mm-encadre,
body.salle-bureau .mm-hero__carte,
body.salle-bureau a.mm-carte:hover { transform: none; }

body.salle-bureau .mm-craie { display: none; }

body.salle-bureau .mm-encadre { background: var(--creme-ombre); }

body.salle-salle .mm-craie { display: none; }
body.salle-salle .mm-encadre,
body.salle-salle .mm-hero__carte { transform: none; }

/* =========================================================
   11. PREFERENCES SYSTEME
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .mm-encadre, .mm-hero__carte, .mm-craie { transform: none !important; }
}

@media print {
  .mm-entete, .mm-pied, .mm-allergene, .mm-hero__fond { display: none; }
  body { background: #fff; }
}