/* ==========================================================================
   Encart « ouverture de la boutique en ligne »

   Il remplace une vidéo cassée qui occupait 788 px de haut sur la page
   d'accueil, mesurés, pour ne rien montrer du tout. Sa mission est donc double :
   annoncer l'ouverture, et donner enfin quelque chose à regarder à cet endroit.

   Le parti pris : un panneau vert profond, la couleur la plus sombre du logo,
   sur une page d'accueil claire. Le contraste fait l'événement à lui seul, sans
   avoir besoin d'un bandeau clignotant. L'or du logo n'intervient que sur trois
   éléments : le surtitre, le liseré et le bouton. C'est la seule couleur vive
   de l'encart, et elle désigne l'action.

   Couleurs relevées dans le SVG du logo officiel :
     vert #397441, vert profond #04251E, or #D19334.

   TYPOGRAPHIE : pourquoi les familles sont nommées ici

   La convention du thème enfant est `font-family: inherit` partout, pour suivre
   la charte sans être retouché. Elle ne peut pas s'appliquer ici, et c'est
   mesuré, pas supposé : le kit Elementor du site ne déclare AUCUNE variable de
   typographie globale (`--e-global-typography-*-font-family` : toutes vides).
   Les polices sont réglées widget par widget dans Elementor. Hériter revenait
   donc à hériter de la police du corps de page, c'est-à-dire de la pile système
   `-apple-system, …`, relevée sur l'encart : un titre en police d'interface au
   milieu d'une page en Libre Baskerville.

   Les familles sont donc nommées, avec les valeurs relevées sur la page servie :
     titres     Libre Baskerville, poids 600
     textes     Montserrat
     boutons    Crimson Text, en italique

   Une exception assumée, le bouton. Le site met ses boutons en Crimson Text
   italique. Sur une pastille dorée qui doit se lire comme une action, cet
   italique serif est exactement ce qui datait la page qu'on remplace. Le bouton
   reste donc en Montserrat, la police des textes du site : c'est un écart, il
   est volontaire, et il ne concerne que cet élément.
   ========================================================================== */

.gg-ouverture {
	--o-vert-profond: #04251e;
	--o-vert: #397441;
	--o-or: #d19334;
	--o-or-clair: #e7b562;
	--o-creme: #f6f1e7;

	/* Relevées sur la page servie, avec leur pile de secours. */
	--o-titres: "Libre Baskerville", Georgia, "Times New Roman", serif;
	--o-texte: Montserrat, "Helvetica Neue", Arial, sans-serif;

	position: relative;
	/* Il ne rogne plus un coin arrondi, qui n'existe plus. Il reste comme
	   garde-fou : sur un bandeau qui va d'un bord à l'autre de la fenêtre, rien
	   ne doit pouvoir déborder, ni une ombre portée ni un mot insécable plus
	   large que sa colonne. */
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr;
	background: var(--o-vert-profond);
	color: var(--o-creme);
	/* Le liseré doré, très fin. Sur un bandeau qui touche les deux bords de la
	   fenêtre, il n'y a plus de côtés à cadrer : il ne reste que le haut et le
	   bas, qui détachent le bandeau du blanc de la page. */
	border-top: 1px solid rgba(209, 147, 52, 0.34);
	border-bottom: 1px solid rgba(209, 147, 52, 0.34);

	/* --------------------------------------------------------------------
	   LE BORD À BORD

	   Le code court est posé dans une section Elementor « boxed » : son
	   conteneur s'arrête à 1300 px, mesuré. Les trois sections d'histoire
	   juste au-dessus, elles, vont d'un bord à l'autre de la fenêtre. Ces
	   deux marges annulent la largeur du conteneur sans qu'on ait à toucher
	   au réglage de la section en base, qui n'est pas versionné.

	   Le débordement possible est celui de la barre de défilement, que
	   `100vw` compte et que la largeur du conteneur ne compte pas : au pire
	   une dizaine de pixels de fond vert, de chaque côté, sous la barre. Le
	   `overflow-x: clip` du corps de page, relevé sur le site, les absorbe
	   sans faire apparaître de défilement horizontal.

	   `max-width` n'est pas une redite de `width` : sans elle, un
	   `max-width: 100%` venu du thème ramènerait le bandeau à la largeur du
	   conteneur, et le bord à bord tomberait sans rien casser d'autre, donc
	   sans qu'on s'en aperçoive.
	   -------------------------------------------------------------------- */
	width: 100vw;
	max-width: 100vw;
	margin-block: 0;
	margin-inline: calc(50% - 50vw);
}

/* La moitié de gauche : le panneau vert, qui porte tout le texte. Il est à
   gauche, et l'aperçu à droite, pour alterner avec la section « Notre
   savoir-faire » juste au-dessus, dont le panneau vert est à droite. */
.gg-ouverture__panneau {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* Retrait égal sur trois côtés tant que le panneau occupe toute la largeur.
	   En bas, moins : à cette taille le bouton suit dans la colonne d'à côté, et
	   l'écart entre les repères et lui n'est fait que de ce rembourrage. Le
	   creux de 107 px des sections d'histoire, lui, ne vaut que pour une
	   demi-largeur : il est repris plus bas, avec les deux colonnes. */
	padding: clamp(38px, 5vw, 76px) clamp(22px, 5vw, 72px) clamp(28px, 4vw, 40px);
}

/* --------------------------------------------------------------------------
   La trame

   Deux halos verts très dilués, décentrés, qui donnent du relief au fond sans
   qu'on puisse nommer un motif. Un aplat uni à cette taille paraît plat ;
   une image de fond coûterait une requête et un poids pour le même effet.
   -------------------------------------------------------------------------- */

.gg-ouverture__trame {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(58% 74% at 82% 12%, rgba(57, 116, 65, 0.55) 0%, rgba(57, 116, 65, 0) 62%),
		radial-gradient(46% 62% at 8% 92%, rgba(209, 147, 52, 0.2) 0%, rgba(209, 147, 52, 0) 66%);
}

.gg-ouverture__contenu {
	position: relative;
	max-width: 41rem;
}

/* --------------------------------------------------------------------------
   Le texte
   -------------------------------------------------------------------------- */

.gg-ouverture__surtitre {
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: var(--o-or-clair);
	font-family: var(--o-texte);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	/* Mesuré : #e7b562 sur #04251e donne 8,4:1, largement au-dessus du seuil AA
	   de 4,5:1, ce qui compte pour un texte aussi petit et aussi espacé. */
}

.gg-ouverture__surtitre::before {
	content: "";
	width: 26px;
	height: 1px;
	background: currentColor;
	flex: 0 0 auto;
}

.gg-ouverture__titre {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--o-titres);
	font-size: clamp(28px, 4.2vw, 46px);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

.gg-ouverture__texte {
	/* Sans marge basse : le bouton qu'elle espaçait est parti sous la fenêtre,
	   et les repères apportent déjà la leur. */
	margin: 0;
	max-width: 34rem;
	color: rgba(246, 241, 231, 0.86);
	font-family: var(--o-texte);
	font-size: clamp(15px, 1.5vw, 17.5px);
	line-height: 1.62;
}

.gg-ouverture__date {
	margin: 18px 0 0;
	color: rgba(246, 241, 231, 0.7);
	font-size: 14px;
}

/* --------------------------------------------------------------------------
   Les actions
   -------------------------------------------------------------------------- */

.gg-ouverture__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 26px;
}

/*
 * Le bouton doré.
 *
 * Sélecteur préfixé par `.gg-ouverture` : le `reset.css` du thème stylise tout
 * lien en rose #cc3366 et tout bouton par un sélecteur d'attribut, de même
 * poids qu'une classe. Sans ce préfixe, l'arbitrage se jouerait à l'ordre de
 * chargement, ce qui est trop fragile pour l'appel à l'action d'une page
 * d'accueil.
 */
.gg-ouverture .gg-ouverture__bouton {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 54px;
	padding: 15px 30px;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--o-or-clair) 0%, var(--o-or) 62%);
	/* Vert profond sur or : 7,9:1 mesuré. Le blanc sur or n'aurait donné que
	   2,3:1, en dessous du seuil, et se serait vu. */
	color: var(--o-vert-profond);
	font-family: var(--o-texte);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	text-transform: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.gg-ouverture .gg-ouverture__bouton:hover {
	color: var(--o-vert-profond);
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 12px 30px rgba(209, 147, 52, 0.28);
}

.gg-ouverture .gg-ouverture__bouton:focus-visible {
	outline: 2px solid var(--o-creme);
	outline-offset: 3px;
}

/* La flèche est dessinée en bordures : pas de police d'icônes, pas de requête,
   et elle prend la couleur du texte sans qu'on ait à la redéfinir. */
.gg-ouverture__fleche {
	width: 8px;
	height: 8px;
	flex: 0 0 auto;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.18s ease;
}

.gg-ouverture .gg-ouverture__bouton:hover .gg-ouverture__fleche {
	transform: rotate(45deg) translate(2px, -2px);
}

.gg-ouverture .gg-ouverture__lien {
	color: var(--o-creme);
	font-family: var(--o-texte);
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.gg-ouverture .gg-ouverture__lien:hover {
	color: var(--o-or-clair);
}

/* --------------------------------------------------------------------------
   Les trois repères

   Ils ferment l'encart par du concret. Séparés du texte par un filet, alignés
   en trois colonnes sur grand écran et empilés en dessous.
   -------------------------------------------------------------------------- */

.gg-ouverture__reperes {
	position: relative;
	display: grid;
	/* Les trois repères tenaient sur toute la largeur de l'encart ; ils vivent
	   maintenant dans une demi-largeur. `auto-fit` les remet sur deux lignes
	   quand la colonne devient trop étroite, sans qu'on ait à choisir un point
	   de bascule de plus. */
	grid-template-columns: repeat(auto-fit, minmax(124px, 1fr));
	gap: 14px 24px;
	/* Même laisse que le texte au-dessus : sans elle, sur un très grand écran,
	   le filet des repères continuerait bien après la fin des paragraphes. */
	max-width: 41rem;
	margin: clamp(30px, 4vw, 46px) 0 0;
	padding: 22px 0 0;
	border-top: 1px solid rgba(246, 241, 231, 0.16);
	list-style: none;
	color: rgba(246, 241, 231, 0.72);
	font-size: 14.5px;
	line-height: 1.45;
}

.gg-ouverture__reperes span {
	display: block;
	color: #fff;
	font-weight: 600;
}

@media (max-width: 720px) {
	.gg-ouverture__reperes {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.gg-ouverture__reperes li {
		display: flex;
		align-items: baseline;
		gap: 8px;
		flex-wrap: wrap;
	}

	.gg-ouverture__reperes span {
		display: inline;
	}
}

/* --------------------------------------------------------------------------
   La moitié de droite : l'aperçu de la boutique

   Une carte claire posée sur un fond crème, en face du panneau vert. C'est le
   même contraste que la section « Notre savoir-faire » au-dessus, où une photo
   claire fait face au vert, mais ici la moitié claire montre ce qu'il y a
   derrière le bouton plutôt qu'une photo de plus.

   Le bouton est ici, et non dans le panneau de gauche : posé sous la fenêtre,
   il se lit comme le bouton de validation du formulaire qu'elle imite. C'est
   d'ailleurs la place du vrai, « J'achète de suite », en bas du configurateur.

   Sous 1025 px, la FENÊTRE disparaît, comme la colonne photo de la section
   « Notre savoir-faire » qui porte `elementor-hidden-tablet` et
   `elementor-hidden-mobile`. La colonne, elle, reste : elle porte le bouton,
   qui doit être là quelle que soit la taille de l'écran. Sans fond ni cadre à
   cette largeur, il se pose dans le prolongement du panneau vert, sous les
   repères.
   -------------------------------------------------------------------------- */

.gg-ouverture__apercu {
	padding: 0 clamp(22px, 5vw, 72px) clamp(38px, 5vw, 76px);
}

.gg-ouverture__fenetre {
	/* Masquée par défaut, révélée à partir de 1025 px. Le sens compte : la
	   masquer dans une requête `max-width: 1024px` laissait la carte
	   réapparaître entre 1024 et 1025 px, où aucune des deux requêtes ne
	   s'applique, posée sur le vert et sans le rembourrage de sa colonne. Cette
	   bande n'a rien de théorique : zoom du navigateur, densité fractionnaire,
	   fenêtre de largeur impaire. */
	display: none;
	width: min(100%, 400px);
	padding: 24px 26px 26px;
	border: 1px solid rgba(4, 37, 30, 0.08);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 26px 54px rgba(4, 37, 30, 0.16);
}

/* Le titre de la carte est celui de la vraie page, « Je choisis mon gant ».
   En vert profond et non en or : l'or de la charte sur du blanc ne donne que
   2,65:1, mesuré, et cette ligne est petite. L'or reste au filet, en dessous. */
.gg-ouverture__fenetre-titre {
	margin: 0 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(209, 147, 52, 0.45);
	color: var(--o-vert-profond);
	font-family: var(--o-texte);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
}

.gg-ouverture__champs {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Un champ du configurateur : son intitulé et la valeur choisie à gauche, la
 * précision à droite sur les deux lignes. Deux colonnes, deux rangées, et
 * chaque élément placé à sa case : c'est ce qui évite trois `span`
 * d'emballage pour un même dessin.
 */
.gg-ouverture__champ {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 2px 14px;
	padding: 11px 14px;
	border: 1px solid rgba(4, 37, 30, 0.1);
	border-radius: 12px;
	background: #fdfcfa;
}

.gg-ouverture__champ-nom {
	grid-area: 1 / 1;
	/* Vert profond à 65 % sur le fond de champ : 5,1:1 mesuré. À 60 %, qui
	   était la première valeur, on tombait à 4,4:1, sous le seuil AA, pour du
	   10 px. L'aperçu est décoratif, mais rien n'oblige à l'écrire moins net
	   que le reste de la page. */
	color: rgba(4, 37, 30, 0.65);
	font-family: var(--o-texte);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1;
	text-transform: uppercase;
}

.gg-ouverture__champ-valeur {
	grid-area: 2 / 1;
	color: var(--o-vert-profond);
	font-family: var(--o-texte);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
}

.gg-ouverture__champ-fin {
	grid-area: 1 / 2 / 3 / 3;
	display: flex;
	align-items: center;
	gap: 6px;
	/* Même mesure que l'intitulé, et pour la même raison : 3,7:1 à 55 %. */
	color: rgba(4, 37, 30, 0.65);
	font-family: var(--o-texte);
	font-size: 12px;
	line-height: 1.3;
}

/* Les trois cuirs cités par les repères, à gauche : agneau, cerf, pécari.
   Les teintes sont peintes de mémoire de peausserie, elles ne sortent ni du
   logo ni d'une photo du site. Celle du cerf porte un anneau doré : c'est la
   matière que la carte récapitule juste à côté. */
.gg-ouverture__cuir {
	width: 15px;
	height: 15px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(4, 37, 30, 0.14);
}

.gg-ouverture__cuir--agneau {
	background: #2f2b28;
}

.gg-ouverture__cuir--cerf {
	background: #8c5a30;
}

.gg-ouverture__cuir--pecari {
	background: #c8a982;
}

.gg-ouverture__cuir--choisi {
	box-shadow: inset 0 0 0 1px rgba(4, 37, 30, 0.14), 0 0 0 2px var(--o-or);
}

/* --------------------------------------------------------------------------
   Les deux colonnes

   Regroupées ici, après le dessin de l'aperçu, pour que le fichier se lise
   dans l'ordre : d'abord ce que contient chaque moitié, ensuite la façon dont
   les deux se rangent.
   -------------------------------------------------------------------------- */

@media (min-width: 1025px) {
	.gg-ouverture {
		grid-template-columns: 1fr 1fr;
	}

	/* 107 px de retrait à 1440 px de large : la valeur relevée sur les
	   sections d'histoire, qui creusent 15 % de leur demi-largeur. Elle ne
	   s'applique qu'ici, là où le panneau est bien une demi-largeur. Le bas
	   retrouve la valeur des trois autres côtés : le bouton n'est plus en
	   dessous du panneau, mais à côté. */
	.gg-ouverture__panneau {
		padding-left: clamp(48px, 7.4vw, 107px);
		padding-bottom: clamp(38px, 5vw, 76px);
	}

	.gg-ouverture__fenetre {
		display: block;
	}

	.gg-ouverture__apercu {
		display: grid;
		align-content: center;
		justify-items: center;
		gap: clamp(20px, 2.4vw, 30px);
		padding: clamp(40px, 4.4vw, 70px);
		/* Un crème franc, et non un blanc cassé : la page d'accueil est blanche,
		   et une moitié presque blanche donnait un bandeau qui semblait coupé
		   au milieu. Le dégradé part du crème de l'encart, #f6f1e7, et va vers
		   un ton plus doré, tiré vers l'or de la charte, pour que la carte
		   blanche s'en détache. Ces deux valeurs sont composées, pas relevées :
		   elles n'existent pas dans le logo. */
		background: linear-gradient(158deg, #f7f2e8 0%, #e9dcc3 100%);
	}

	/* Le centrage sous la fenêtre vient du `justify-items` de la colonne ; ceci
	   ne joue que si les actions passent sur deux lignes, c'est-à-dire avec un
	   lien secondaire long. */
	.gg-ouverture__actions {
		justify-content: center;
	}

	/*
	 * LE CHANGEMENT DE FOND SOUS LE BOUTON
	 *
	 * Le crème du panneau vert, porté ici sur le dégradé clair, ne donne plus
	 * que 1,2:1, mesuré : l'anneau de focus disparaissait, et le lien second
	 * avec lui. Les deux repassent donc au vert profond, qui donne 12:1 sur ce
	 * fond. C'est le seul endroit du fichier où une couleur dépend de la
	 * largeur de la fenêtre, parce que c'est le seul élément qui change de fond
	 * en changeant de colonne.
	 */
	.gg-ouverture .gg-ouverture__bouton:focus-visible {
		outline-color: var(--o-vert-profond);
	}

	.gg-ouverture .gg-ouverture__lien {
		color: var(--o-vert-profond);
	}

	/* L'or de la charte assombri jusqu'à passer le seuil : 5,8:1 mesuré, quand
	   #d19334 n'en donnait que 2 et le vert #397441 que 4,1, sous les 4,5
	   attendus pour ce corps de texte. */
	.gg-ouverture .gg-ouverture__lien:hover {
		color: #6f4a10;
	}
}

/* --------------------------------------------------------------------------
   L'impression

   Le bandeau vit sur `100vw` et deux marges négatives, qui sur une feuille de
   papier sortent des marges de page. On lui rend sa largeur de conteneur, et
   la fenêtre ne s'imprime pas : c'est une illustration d'interface. Le bouton,
   lui, reste : imprimé, il ne se clique pas, mais son intitulé dit encore où
   aller.
   -------------------------------------------------------------------------- */

@media print {
	/* Une page A4 en paysage fait environ 1122 px : la requête des deux colonnes
	   s'y applique, et la moitié droite s'imprimerait en grand aplat vide avec
	   le seul bouton au milieu. On la remet en une colonne. */
	.gg-ouverture {
		width: auto;
		max-width: none;
		margin-inline: 0;
		grid-template-columns: 1fr;
	}

	.gg-ouverture__fenetre {
		display: none;
	}

	.gg-ouverture__apercu {
		align-content: start;
		background: none;
	}
}

/* Le seul mouvement de l'encart est celui du bouton au survol, et il disparaît
   pour qui a demandé moins d'animation. */
@media (prefers-reduced-motion: reduce) {
	.gg-ouverture .gg-ouverture__bouton,
	.gg-ouverture__fleche {
		transition: none;
	}

	.gg-ouverture .gg-ouverture__bouton:hover {
		transform: none;
	}
}