/* =========================================================================
   1Parquet, parqueteur à Bourg-en-Bresse : jetons de conception.
   Couleurs et polices relevées sur le site actuel du client (1parquet.com).
   ========================================================================= */

/* ---- Polices du client : Bricolage Grotesque (titres) et Karla (texte) ---- */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/bricolage-grotesque-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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/karla-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/karla-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;
}

:root {
  /* ---- Couleurs du site actuel ----------------------------------------- */
  --c-vert: #DA741B;          /* orange du client : boutons pleins, icônes (nom historique du jeton) */
  --c-vert-sombre: #362317;   /* brun profond : survols, sections sombres, pied de page */
  --c-vert-accent: #DA741B;   /* étoiles, numéros, sur-titres */
  --c-creme: #FAF8F5;         /* fond de page */
  --c-creme-2: #F1EBE2;       /* fonds de champ, carrés d'icônes, lignes de FAQ */
  --c-creme-3: #F1EBE2;       /* bouton secondaire */
  --c-blanc: #FFFFFF;         /* cartes */
  --c-encre: #251D18;         /* texte principal */
  --c-encre-douce: #5F5249;   /* texte secondaire (assombri pour le contraste) */
  --c-encre-claire: #D9CEC4;  /* texte secondaire sur fond sombre */
  --c-trait: #E3DAD0;         /* filets, bordures de carte */
  --c-trait-sombre: #5A4638;  /* filets sur fond sombre */

  /* ---- Voiles et verre ------------------------------------------------ */
  --v-verre: rgba(250, 248, 245, .62);
  --v-verre-bord: rgba(250, 248, 245, .72);
  --v-verre-sombre: rgba(37, 29, 24, .55);
  --v-photo: linear-gradient(100deg, rgba(30, 20, 14, .78) 0%, rgba(30, 20, 14, .55) 42%, rgba(30, 20, 14, .12) 78%);
  /* Voile vertical sous la bande menu : une photo de jardin a presque toujours
     du ciel clair en haut, et le voile horizontal ci-dessus ne couvre pas la
     droite. Sans lui, le bouton blanc de l'en-tête se dissout dans le ciel. */
  --v-entete: linear-gradient(to bottom, rgba(30, 20, 14, .55) 0%, rgba(30, 20, 14, .28) 45%, transparent 100%);
  /* voile de bas de hero, posé seulement sur téléphone : le texte y descend
     sur la pelouse, qui est claire. Sans lui le paragraphe tombe à 2,6:1. */
  --v-photo-bas: linear-gradient(to top, rgba(30, 20, 14, .88) 0%, rgba(30, 20, 14, .72) 30%, rgba(30, 20, 14, .34) 58%, transparent 84%);
  /* Sur téléphone, le texte des bandeaux et des cartes photo occupe toute la
     largeur : les voiles latéraux du grand écran ne le couvrent plus. */
  --v-appel-mobile: linear-gradient(to top, rgba(30, 20, 14, .92) 0%, rgba(30, 20, 14, .82) 50%, rgba(30, 20, 14, .66) 100%);
  --v-carte-mobile: linear-gradient(to top, rgba(30, 20, 14, .92) 10%, rgba(30, 20, 14, .66) 52%, rgba(30, 20, 14, .2) 86%);

  /* ---- Typographie ---------------------------------------------------- */
  --f-titre: 'Bricolage Grotesque', 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --f-texte: 'Karla', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 16px;
  --fs-md: 16px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: clamp(20px, 1.8vw, 23px);
  --fs-3xl: clamp(23px, 2.2vw, 28px);
  --fs-4xl: clamp(26px, 2.5vw, 34px);
  --fs-5xl: clamp(30px, 3.2vw, 42px);
  --fs-titre-section: clamp(32px, 4.2vw, 60px);  /* ancienne taille du titre du hero */
  --fs-6xl: clamp(34px, 4.2vw, 60px); /* relevé : 47,5 px sur 926 = 5,13 % de la largeur */

  --fw-normal: 400;
  --fw-moyen: 500;
  --fw-demi: 600;
  --fw-gras: 700;
  --fw-noir: 800;

  --ls-titre: -.03em;   /* relevé sur le hero */
  --ls-sous-titre: -.02em;
  --ls-capitales: .14em;

  --lh-titre: 1.14;     /* relevé : 54 px d'interligne pour 47,5 px de corps */
  --lh-serre: 1.2;
  --lh-texte: 1.55;
  --lh-large: 1.65;

  /* ---- Espacement (multiples de 4) ------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;
  --sp-40: 160px;

  /* ---- Rythme des sections -------------------------------------------- */
  --sp-section: clamp(64px, 7vw, 120px);
  --sp-section-courte: clamp(48px, 5vw, 80px);

  /* ---- Grille --------------------------------------------------------- */
  --l-contenu: 1280px;      /* 1440 − 2 × 80 de gouttière */
  --l-etroit: 900px;
  --l-texte: 62ch;          /* longueurs de ligne sous 75 caractères */
  --l-gouttiere: clamp(20px, 5.6vw, 80px);
  --l-bande: clamp(20px, 3.4vw, 48px);   /* gouttière de la bande menu, pleine largeur */
  --l-header: 112px;
  --l-collant: 104px;      /* accroche des cartes qui s'empilent au défilement */

  /* ---- Rayons --------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 28px;
  --r-pill: 999px;
  --r-bouton: 6px;      /* boutons : angles presque droits, façon Légaut */

  /* ---- Ombres (deux seulement, jamais dures) -------------------------- */
  --sh-carte: 0 18px 40px -24px rgba(37, 29, 24, .28);
  --sh-flottant: 0 30px 70px -30px rgba(37, 29, 24, .45);

  /* ---- Mouvement ------------------------------------------------------ */
  --tr-rapide: 140ms cubic-bezier(.2, .6, .3, 1);
  --tr-normal: 260ms cubic-bezier(.2, .6, .3, 1);
  --tr-lent: 700ms cubic-bezier(.16, .84, .28, 1);
}