/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Text wrap */
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

/* --------------------
 * --- FLUID DESIGN ---
/* -------------------- */

/* TYPESCALE
* Typographie fluide composée avec Utopia.
* @link https://utopia.fyi/type/calculator?c=360,16,1.2,1600,18,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
* Ajustée pour avoir des valeurs multiples de 4.
*/

:root {
  --font-size-12: clamp(0.625rem, 0.5887rem + 0.1613vw, 0.75rem);
  --font-size-14: clamp(0.75rem, 0.7137rem + 0.1613vw, 0.875rem);
  --font-size-18: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  --font-size-24: clamp(1.25rem, 1.1774rem + 0.3226vw, 1.5rem);
  --font-size-32: clamp(1.5rem, 1.3548rem + 0.6452vw, 2rem);
  --font-size-42: clamp(1.75rem, 1.496rem + 1.129vw, 2.625rem);
  --font-size-56: clamp(2rem, 1.5645rem + 1.9355vw, 3.5rem);
  --font-size-72: clamp(2.625rem, 2.0806rem + 2.4194vw, 4.5rem);
  --font-size-104: clamp(3rem, 1.9839rem + 4.5161vw, 6.5rem);
  --font-size-136: clamp(3.5rem, 2.0484rem + 6.4516vw, 8.5rem);
  --font-size-240: clamp(5rem, 2.0968rem + 12.9032vw, 15rem);
}

/* SPACING
* Système d'espace fluide composé avec Utipia.
* @link https://utopia.fyi/space/calculator?c=360,16,1.2,1600,18,1.333,9,2,&s=0.75|0.5|0.25,1.5|2|3|4|6|8|12,s-l&g=s,l,xl,12
* Ajusté pour avoir des valeurs multiples de 4.
*/

:root {
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-14: clamp(0.75rem, 0.7137rem + 0.1613vw, 0.875rem);
  --space-18: clamp(1rem, 0.9637rem + 0.1613vw, 1.125rem);
  --space-28: clamp(1.5rem, 1.4274rem + 0.3226vw, 1.75rem);
  --space-36: clamp(2rem, 1.9274rem + 0.3226vw, 2.25rem);
  --space-54: clamp(3rem, 2.8911rem + 0.4839vw, 3.375rem);
  --space-72: clamp(4rem, 3.8548rem + 0.6452vw, 4.5rem);
  --space-108: clamp(6rem, 5.7823rem + 0.9677vw, 6.75rem);
  --space-144: clamp(8rem, 7.7097rem + 1.2903vw, 9rem);
  --space-216: clamp(12rem, 11.5645rem + 1.9355vw, 13.5rem);

  /* Pair */
  /* Pour un changement + important lors de la réduction de viewport */
  --space-18-12: clamp(0.75rem, 0.6346rem + 0.5128vw, 1.125rem);
  
  /* Pour les marges des blocs 54px -> 16px */
  --space-54-16: clamp(1rem, 0.3105rem + 3.0645vw, 3.375rem);
	
  /* Pour les padding des heros 72px -> 24px */
  --space-72-24: clamp(1.5rem, 0.629rem + 3.871vw, 4.5rem);

  /* Pour les padding de gros blocs 108px -> 48px */
  --space-108-48: clamp(3rem, 1.9113rem + 4.8387vw, 6.75rem);
}

/* GRID 
* À partir des variables déjà créées
* Système de 12 colonnes sur Desktop puis 4 sur mobile.
*/

:root {
  --grid-gutter: var(--space-18-12, clamp(0.75rem, 0.6346rem + 0.5128vw, 1.125rem));
  --grid-max-column-width: var(--space-108);
  --grid-columns: 12;
}

/* LAYOUT AVEC GOUTTIÈRE
* (colonne + gouttière) × nombre de colonnes.
* Mêmes noms que dans Figma, valeurs px desktop en suffixe.
*/

:root {
  --with-gutter-col-01--126: calc(var(--grid-max-column-width) + var(--grid-gutter));
  --with-gutter-col-02--252: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 2);
  --with-gutter-col-03--378: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 3);
  --with-gutter-col-04--504: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 4);
  --with-gutter-col-05--630: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 5);
  --with-gutter-col-06--756: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 6);
  --with-gutter-col-07--882: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 7);
  --with-gutter-col-08--1008: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 8);
  --with-gutter-col-09--1134: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 9);
  --with-gutter-col-10--1260: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 10);
  --with-gutter-col-11--1386: calc((var(--grid-max-column-width) + var(--grid-gutter)) * 11);
  /* pas de variable col-12 car il n'y a pas de gutter après la 12ème colonne 😅 */
}

/* LAYOUT SANS GOUTTIÈRE
* Colonnes × nombre + une gouttière entre chaque colonne.
* Mêmes noms que dans Figma, valeurs px desktop en suffixe.
*/

:root {
  --no-gutter-col-01--108: var(--grid-max-column-width);
  --no-gutter-col-02--234: calc(var(--grid-max-column-width) * 2 + var(--grid-gutter));
  --no-gutter-col-03--360: calc(var(--grid-max-column-width) * 3 + var(--grid-gutter) * 2);
  --no-gutter-col-04--486: calc(var(--grid-max-column-width) * 4 + var(--grid-gutter) * 3);
  --no-gutter-col-05--612: calc(var(--grid-max-column-width) * 5 + var(--grid-gutter) * 4);
  --no-gutter-col-06--738: calc(var(--grid-max-column-width) * 6 + var(--grid-gutter) * 5);
  --no-gutter-col-07--864: calc(var(--grid-max-column-width) * 7 + var(--grid-gutter) * 6);
  --no-gutter-col-08--990: calc(var(--grid-max-column-width) * 8 + var(--grid-gutter) * 7);
  --no-gutter-col-09--1116: calc(var(--grid-max-column-width) * 9 + var(--grid-gutter) * 8);
  --no-gutter-col-10--1242: calc(var(--grid-max-column-width) * 10 + var(--grid-gutter) * 9);
  --no-gutter-col-11--1368: calc(var(--grid-max-column-width) * 11 + var(--grid-gutter) * 10);
  --no-gutter-col-12--1494: calc(var(--grid-max-column-width) * 12 + var(--grid-gutter) * 11);
}