/*
Theme Name: Farah Sa Tech
Description: Thème enfant Blocksy du site farahtech.ma. Code dans le dépôt farahTech-Siteweb (ADR 0002).
Author: Farah Sa Tech
Template: blocksy
Version: 0.6.1
Text Domain: farahtech
*/

/* Police arabe servie par le site (licence OFL, fichiers Fontsource). Seuls les caractères arabes l'utilisent :
   les chiffres et le latin gardent la police du thème.
   optional et non swap : si elle n'est pas là au premier affichage (mobile lent, première visite), la page garde la police
   arabe du téléphone, sans décaler le héros (CLS) ; la police est alors en cache pour la page suivante. */
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(fonts/ibm-plex-sans-arabic-400.woff2) format("woff2");
	font-weight: 400; font-display: optional;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(fonts/ibm-plex-sans-arabic-600.woff2) format("woff2");
	font-weight: 600; font-display: optional;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
	font-family: "IBM Plex Sans Arabic";
	src: url(fonts/ibm-plex-sans-arabic-700.woff2) format("woff2");
	font-weight: 700 900; font-display: optional;
	unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

:root {
	--ft-violet: var(--theme-palette-color-1, #7456f1);
	--ft-violet-fonce: var(--theme-palette-color-2, #5e3fde);
	--ft-texte: var(--theme-palette-color-3, #4d5d6d);
	--ft-encre: var(--theme-palette-color-4, #102136);
	--ft-bord: var(--theme-palette-color-5, #e7ebee);
	--ft-fond: var(--theme-palette-color-6, #f3f5f7);
	--ft-rayon: 14px;
	--ft-largeur: 1200px;
}

html:lang(ar) {
	--theme-font-family: "IBM Plex Sans Arabic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html:lang(ar) body { line-height: 1.75; }

/* Sélecteur de langue */
.ft-langues { display: flex; align-items: center; gap: .4em; white-space: nowrap; }
.ft-langues span[aria-current] { font-weight: 700; color: var(--ft-encre); }
.ft-langues a { font-weight: 500; }

/* Sections : pleine largeur pour le fond, contenu aligné sur --ft-largeur */
.ft-section { padding: clamp(3rem, 7vw, 5.5rem) max(1.25rem, calc((100vw - var(--ft-largeur)) / 2)); }
.ft-section > * { margin-block: 0; }
.ft-section > * + * { margin-block-start: 1.25rem; }
.ft-section > p, .ft-section > ul { max-width: 46rem; }
.ft-section h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); color: var(--ft-encre); max-width: 22em; }
.ft-section h3 { font-size: 1.2rem; color: var(--ft-encre); }
.ft-section .wp-block-buttons { margin-block-start: 2rem; }
.ft-probleme, .ft-secteurs, .ft-faq { background: var(--ft-fond); }

/* Héros */
.ft-hero { background: linear-gradient(160deg, color-mix(in srgb, var(--ft-violet) 10%, #fff), #fff 70%); }
.ft-hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.15; color: var(--ft-encre); margin-block: .4em; }
.ft-surtitre { font-weight: 600; color: var(--ft-violet-fonce); letter-spacing: .02em; margin: 0; }
.ft-chapo { font-size: clamp(1.05rem, 1.6vw, 1.2rem); max-width: 36em; }
.ft-confiance { font-size: .9rem; color: var(--ft-texte); margin-block-start: 1.5rem; }

/* Emplacements de captures : masqués tant qu'aucune image n'y est placée */
.ft-media:not(:has(img)) { display: none; }
.ft-capture img { border-radius: var(--ft-rayon); box-shadow: 0 20px 50px rgba(16, 33, 54, .15); }

/* Grilles de cartes : 3 colonnes (fonctionnalités, Packs) ou 4 (secteurs) sur grand écran */
.ft-grille { gap: 1.25rem; margin-block-start: 2rem !important; }
@media (min-width: 1000px) {
	.ft-fonctions .ft-grille, .ft-packs .ft-grille { grid-template-columns: repeat(3, 1fr); }
	.ft-secteurs .ft-grille { grid-template-columns: repeat(4, 1fr); }
	.ft-section.ft-deux .ft-grille { grid-template-columns: repeat(2, 1fr); } /* quatre cartes : deux par ligne */
	.ft-section.ft-trois .ft-grille { grid-template-columns: repeat(3, 1fr); }
}
.ft-carte { background: #fff; border: 1px solid var(--ft-bord); border-radius: var(--ft-rayon); padding: 1.5rem; }
.ft-carte > * { margin-block: 0; }
.ft-carte > * + * { margin-block-start: .75rem; }
.ft-carte .ft-capture { margin: -1.5rem -1.5rem 1rem; }
.ft-carte .ft-capture img { border-radius: var(--ft-rayon) var(--ft-rayon) 0 0; box-shadow: none; }

/* Listes à coches */
.ft-coches { list-style: none; padding: 0; }
.ft-coches li { position: relative; padding-inline-start: 1.6em; margin-block: .45em; }
.ft-coches li::before {
	content: ""; position: absolute; inset-inline-start: 0; top: .45em; width: .9em; height: .5em;
	border-left: 2px solid var(--ft-violet); border-bottom: 2px solid var(--ft-violet); transform: rotate(-45deg); /* coche identique en RTL */
}

/* Packs */
.ft-intro { max-width: 46em; }
.ft-pack { display: flex; flex-direction: column; }
.ft-pack-nom { font-size: 1.35rem !important; }
.ft-prix { color: var(--ft-texte); }
.ft-prix strong { font-size: 2.5rem; line-height: 1; color: var(--ft-encre); margin-inline-end: .2em; }
.ft-prix-ensuite { font-size: .9rem; color: var(--ft-texte); }
.ft-pack-qui { font-weight: 600; color: var(--ft-encre); padding-block-end: .75rem; border-bottom: 1px solid var(--ft-bord); }
.ft-options table { background: #fff; border-radius: var(--ft-rayon); overflow: hidden; }
.ft-options th, .ft-options td { border: 0; border-bottom: 1px solid var(--ft-bord); padding: .8em 1em; text-align: start; }
.ft-options thead th { background: var(--ft-fond); color: var(--ft-encre); }

/* Questions fréquentes */
.ft-faq details { background: #fff; border: 1px solid var(--ft-bord); border-radius: var(--ft-rayon); padding: 1rem 1.25rem; max-width: 52rem; }
.ft-faq details + details { margin-block-start: .75rem; }
.ft-faq summary { font-weight: 600; color: var(--ft-encre); cursor: pointer; margin: 0; }
.ft-faq details p { margin-block: .75rem 0; }

/* Appel à l'action */
.ft-cta {
	background: linear-gradient(135deg, var(--ft-violet-fonce), var(--ft-violet)); color: #fff; text-align: center;
	--theme-button-background-initial-color: #fff;
	--theme-button-text-initial-color: var(--ft-violet-fonce);
	--theme-button-background-hover-color: var(--ft-encre);
	--theme-button-text-hover-color: #fff;
}
.ft-cta > * { margin-inline: auto; }
.ft-cta h2 { color: #fff; }
.ft-cta p { max-width: 40em; color: rgba(255, 255, 255, .9); }
.ft-cta .wp-block-buttons { justify-content: center; }

/* Formulaires (Contact Form 7), dans l'appel à l'action */
.ft-piege { display: none; }
.ft-cta .wpcf7 {
	max-width: 34rem; padding: 1.5rem; background: #fff; color: var(--ft-texte); border-radius: var(--ft-rayon); text-align: start;
	--theme-button-background-initial-color: var(--ft-violet-fonce);
	--theme-button-text-initial-color: #fff;
}
.ft-cta .wpcf7 p { max-width: none; color: inherit; margin-block: 0 1rem; }
.ft-cta .wpcf7 label { display: block; font-weight: 600; color: var(--ft-encre); }
.ft-cta .wpcf7 input:not([type="submit"]), .ft-cta .wpcf7 select, .ft-cta .wpcf7 textarea { width: 100%; margin-block-start: .35rem; font-weight: 400; }
.ft-cta .wpcf7 textarea { height: 8rem; }
.ft-cta .wpcf7 input[type="submit"] { width: 100%; }
.ft-cta .wpcf7-turnstile { margin-block-end: 1rem; }
.ft-cta .wpcf7 .ft-confidentialite { font-size: .9rem; margin-block-end: 0; }
.ft-cta .wpcf7-response-output { margin: 1rem 0 0; color: var(--ft-encre); }

/* Politique de confidentialité : une seule section, titres espacés */
.ft-politique > h2 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.ft-politique > h2:not(:first-child) { margin-block-start: 2.5rem; }

/* Témoignages */
.ft-temoignage { border: 0; padding: 0; margin: 0; }
.ft-temoignage cite { display: block; margin-block-start: .75rem; font-style: normal; font-weight: 600; color: var(--ft-encre); }

/* Bouton WhatsApp flottant (functions.php) */
.ft-whatsapp {
	position: fixed; z-index: 999; inset-block-end: 20px; inset-inline-end: 20px;
	display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
	background: #25d366; color: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.ft-whatsapp:hover, .ft-whatsapp:focus-visible { background: #1ebe5b; color: #fff; }

/* Bandeau cookies (functions.php) : non bloquant, en bas du côté opposé au bouton WhatsApp, sans jamais le couvrir
   (20 px de marge de chaque côté, 56 px de bouton, 20 px d'écart) */
.ft-bandeau {
	position: fixed; z-index: 998; inset-block-end: 20px; inset-inline-start: 20px;
	width: min(26rem, calc(100vw - 116px)); padding: 1rem 1.25rem; display: grid; gap: .75rem;
	background: #fff; color: var(--ft-texte); border: 1px solid var(--ft-bord); border-radius: var(--ft-rayon);
	box-shadow: 0 10px 30px rgba(16, 33, 54, .15); font-size: .9rem; line-height: 1.5;
}
.ft-bandeau[hidden] { display: none; }
.ft-bandeau p { margin: 0; }
.ft-bandeau button {
	justify-self: start; min-height: 40px; padding: .4em 1.2em; font-size: .9rem; font-weight: 600; cursor: pointer;
	background: var(--ft-violet-fonce); color: #fff; border: 0; border-radius: 6px;
}
.ft-bandeau button:hover, .ft-bandeau button:focus-visible { background: var(--ft-encre); }