/* =========================================================================
   LA4D, feuille principale
   ========================================================================= */

/* -------------------------------------------------------------------------
   Polices
   Clash Display et Figtree sont chargées par Elementor (Polices personnalisées
   / Google Fonts), donc pas de @font-face ici, pour ne pas charger en double.
   Le fichier assets/fonts/ClashDisplay-Variable.woff2 reste dans le thème :
   on le rebranchera via @font-face sur le single projet custom (hors Elementor)
   à l'étape concernée.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */
:root {
	/* --- Palette brute (noms Figma) --- */
	--rouge:          #FA142E;
	--rouge-vif:      #E10019;   /* Rouge +1, survol bouton rouge / clic outline */
	--bordeaux:       #8C021C;
	--bordeaux-fonce: #5E0002;
	--kaki:           #2A392A;
	--kaki-clair:     #4D694D;
	--kaki-fonce:     #0B190B;
	--neon:           #E0FF71;
	--neon-vif:       #D6FF43;   /* Néon +1, clic bouton néon */
	--beige:          #FAFAF8;
	--beige-fonce:    #E5E3D3;
	--blanc:          #FFFFFF;

	/* --- Rôles sémantiques (à utiliser dans le code) --- */
	--c-accent:        var(--rouge);          /* CTA, énergie, fonds rouges */
	--c-accent-hover:  var(--rouge-vif);      /* survol */
	--c-accent-active: var(--bordeaux);       /* clic */
	--c-marque:        var(--kaki);           /* vert sapin, identité */
	--c-texte:         var(--kaki-fonce);
	--c-texte-invert:  var(--blanc);
	--c-fond:          var(--blanc);
	--c-fond-alt:      var(--beige);          /* sections en alternance */
	--c-fond-soutenu:  var(--beige-fonce);
	--c-highlight:     var(--neon);           /* accent secondaire / survols néon */

	/* --- Typographie --- */
	--font-titre: "Clash Display", system-ui, sans-serif;
	--font-corps: "Figtree", system-ui, sans-serif;

	--fs-corps: 18px;  --lh-corps: 28px;      /* corps de texte */
	--fs-h2:    36px;  --lh-h2:    42px;      /* titres de section */
	/* H1 / titres hero : calés page par page (tailles variables selon l'écran) */

	/* --- Formes --- */
	--radius:        16px;                    /* coins images/cartes (à confirmer Figma) */
	--radius-pill:   100px;                   /* boutons */
	--container:     1260px;                  /* largeur de contenu */
	--gap:           20px;                    /* gouttière de grille */
}

/* -------------------------------------------------------------------------
   Bases
   ------------------------------------------------------------------------- */
body {
	font-family: var(--font-corps);
	font-size: var(--fs-corps);
	line-height: var(--lh-corps);
	color: var(--c-texte);
}

/* Conteneur de référence (contenu calé sur ~1260px, marges latérales ~90px). */
.la4d-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: clamp(20px, 6vw, 90px);
}

/* Les styles par composant (grille projets, single, etc.) seront ajoutés
   au fil des étapes. */

/* =========================================================================
   Boutons
   Usage custom   : <a class="btn btn--rouge">…</a>  (ou btn--outline, btn--neon)
   Usage Elementor: widget Bouton > Avancé > Classes CSS = "btn btn--rouge"
                    (laisser le style du widget par défaut, ne pas ajouter
                    d'icône : la flèche est automatique au survol).

   Note technique : dans Elementor, la classe atterrit sur le CONTENEUR du
   widget, pas sur le <a>. On stylise donc l'élément cliquable réel, qui est
   soit <a class="btn"> (custom), soit .elementor-button à l'intérieur d'un
   conteneur .btn. Les variantes ne posent que des variables CSS, héritées par
   le lien interne, donc l'emplacement de la classe n'a aucune importance.
   ========================================================================= */

/* L'élément cliquable réel, dans les deux contextes. */
a.btn,
.btn .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--btn-h, 48px);
	padding: var(--btn-pad, 8px 24px);
	border: 2px solid var(--btn-bd, transparent);
	border-radius: var(--radius-pill);
	background-color: var(--btn-bg, transparent);
	color: var(--btn-fg, currentColor);
	font-family: var(--font-corps);   /* Figtree */
	font-weight: 600;                  /* SemiBold */
	font-size: var(--btn-fs, 18px);
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

a.btn:hover,
.btn .elementor-button:hover {
	background-color: var(--btn-bg-hover, var(--btn-bg));
	border-color: var(--btn-bd-hover, var(--btn-bd));
	color: var(--btn-fg-hover, var(--btn-fg, currentColor));
}

a.btn:active,
.btn .elementor-button:active {
	background-color: var(--btn-bg-active, var(--btn-bg-hover));
	border-color: var(--btn-bd-active, var(--btn-bd-hover));
	color: var(--btn-fg-active, var(--btn-fg-hover, currentColor));
}

/* Flèche révélée au survol et au clic (prend la couleur du texte courant). */
a.btn::after,
.btn .elementor-button::after {
	content: "";
	width: 0;
	height: 24px;
	margin-left: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	opacity: 0;
	transition: width .2s ease, margin-left .2s ease, opacity .2s ease;
}
a.btn:hover::after,  .btn .elementor-button:hover::after,
a.btn:active::after, .btn .elementor-button:active::after {
	width: 24px;
	margin-left: 10px;
	opacity: 1;
}

/* --- Variantes : ne posent que des variables (héritées par le lien) --- */

/* Plein, rouge */
.btn--rouge {
	--btn-bg: var(--rouge);          /* #FA142E */
	--btn-bd: var(--rouge);
	--btn-fg: var(--blanc);
	--btn-bg-hover: var(--rouge-vif); --btn-bd-hover: var(--rouge-vif);   /* #E10019 */
	--btn-bg-active: var(--bordeaux);  --btn-bd-active: var(--bordeaux);   /* #8C021C */
}

/* Contour rouge (fonds clairs) */
.btn--outline {
	--btn-bg: transparent;
	--btn-bd: var(--rouge);          /* contour #FA142E */
	--btn-fg: var(--bordeaux);       /* texte #8C021C */
	--btn-bg-hover: var(--rouge);     --btn-bd-hover: var(--rouge);     --btn-fg-hover: var(--blanc);
	--btn-bg-active: var(--rouge-vif); --btn-bd-active: var(--rouge-vif); --btn-fg-active: var(--blanc);
}

/* Néon (fonds foncés) */
.btn--neon {
	--btn-bg: transparent;
	--btn-bd: var(--neon);           /* #E0FF71 */
	--btn-fg: var(--neon);
	--btn-bg-hover: var(--neon);     --btn-bd-hover: var(--neon);     --btn-fg-hover: var(--kaki-fonce);
	--btn-bg-active: var(--neon-vif); --btn-bd-active: var(--neon-vif); --btn-fg-active: var(--kaki-fonce);
}

/* Taille M (plus petite, ex. footer) */
.btn--m {
	--btn-h: 40px;
	--btn-pad: 8px 20px;
	--btn-fs: 16px;
}

/* =========================================================================
   Header
   "Discuter" et "Menu" sont des widgets Bouton Elementor. Tout ce qui est
   réglable nativement (couleur du texte en blanc, fond transparent, padding,
   typo, burger via l'icône FontAwesome "bars") se fait DANS Elementor.
   Le CSS ne garde que les deux effets non-natifs : le soulignement qui glisse
   au survol, et la flèche de "Discuter" qui pivote de ↗ à →.
   Les deux suivent la couleur du texte (currentColor), donc règle juste le
   blanc dans Elementor et tout suit.
   ========================================================================= */

/* Curseur main sur les liens du header (Discuter, et Menu qui n'a pas de href). */
.header-link .elementor-button { cursor: pointer; }

/* Soulignement animé du libellé au survol. */
.header-link .elementor-button .elementor-button-content-wrapper { align-items: center; }
.header-link .elementor-button-text { position: relative; }
.header-link .elementor-button-text::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s ease;
}
.header-link:hover .elementor-button-text::after { transform: scaleX(1); }

/* "Discuter" : flèche pivotée en diagonale (↗) au repos, redressée (→) au
   survol. Une seule icône, rotation fluide. Pas d'icône à mettre dans le
   widget Discuter : c'est ce ::after qui la pose. */
.header-link--discuter .elementor-button-content-wrapper::after {
	content: "";
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: rotate(-45deg);
	transition: transform .25s ease;
}
.header-link--discuter:hover .elementor-button-content-wrapper::after { transform: rotate(0deg); }

/* =========================================================================
   Menu plein écran (popup)
   Les items remontent légèrement au survol. Le passage en néon, lui, se règle
   dans Elementor (couleur de survol du menu). Classe "menu-overlay" à poser
   sur le widget Menu.
   ========================================================================= */
.menu-overlay .elementor-item {
	transition: transform .3s ease, color .3s ease;
	will-change: transform;
}
.menu-overlay .elementor-item:hover,
.menu-overlay .elementor-item:focus {
	transform: translateY(-6px);
}

/* Zone haute du menu (spacer / logo / bouton) : on force les deux côtés à une
   largeur strictement égale (flex-basis 0) pour centrer le logo. Elementor
   n'expose pas ce réglage, et enveloppe les enfants dans un .e-con-inner, d'où
   le double sélecteur. Classe "menu-top" sur le conteneur du haut.
   Le logo (widget Image) est exclu : il garde sa largeur naturelle. */
.menu-top > .e-con-inner > .elementor-element:not(.elementor-widget-image),
.menu-top > .elementor-element:not(.elementor-widget-image) {
	flex: 1 1 0;
}