/* ============================================================
   Correctifs post-déploiement — Starting Block Digital
   Chargé APRÈS main.css.
   ============================================================ */

/* 1. Neutralise le body{padding/gap} résiduel hérité de la maquette. */
body{padding:0 !important; gap:0 !important;}

/* 2. Boutons : Kadence force le texte en bleu au survol (a:hover).
      On rétablit la couleur d'origine de chaque variante. */
.btn--amber:hover,.btn--amber:focus,.btn--amber:active,
.btn--outline:hover,.btn--outline:focus,.btn--outline:active,
.btn--light:hover,.btn--light:focus,.btn--light:active{color:var(--ink) !important;}
.btn--primary:hover,.btn--primary:focus,.btn--primary:active{color:var(--cream) !important;}

/* Exception : le bouton outline de la barre de navigation.
   Tant que la nav n'a pas defile, elle est transparente et se detache sur le
   hero sombre : main.css garde donc volontairement le texte en --chalk au survol
   et ne le passe en --ink que sous .nav.is-scrolled. La regle ci-dessus, trop
   large, ecrasait cette distinction et rendait le libelle illisible. */
.nav:not(.is-scrolled) .nav-actions .btn--outline:hover,
.nav:not(.is-scrolled) .nav-actions .btn--outline:focus,
.nav:not(.is-scrolled) .nav-actions .btn--outline:active{color:var(--chalk) !important;}
.btn--ghost:hover,.btn--ghost:focus,.btn--ghost:active{color:var(--chalk) !important;}

/* Bouton burger (menu mobile) : Kadence applique a tout <button> sa base
   padding:.4em 1em + font-size:1.125rem. Avec box-sizing:border-box, ce
   padding horizontal (2em ~ 36px) depasse la largeur 28px du bouton : la zone
   de contenu tombe a 0, les 3 barres se retrouvent a width:0, donc le burger
   est invisible. On remet le padding a 0 : les barres reprennent leur largeur.
   Sur :focus/:active, cette meme base collait aussi un fond bleu
   (--global-palette2) + une ombre au tap : on force transparent.
   .nav-toggle:active pese 0,0,2,0, au-dessus du button:active de Kadence
   (0,0,1,1) : pas besoin de !important. */
.nav-toggle{padding:0;}
.nav-toggle:hover,.nav-toggle:focus,.nav-toggle:active{background:transparent;box-shadow:none;}

/* 3. Liens nav / footer : plus de bleu Kadence au survol. */
.nav-link:hover,.nav-link:focus{color:var(--amber) !important;}
.footer a:hover,.footer a:focus{color:var(--amber) !important;}

/* 4. Widgets d'avis Trustindex (héro et section témoignages).
      Le widget apporte son propre style : on ne gère ici que le placement.
      .hero-trustindex remplace l'ancienne boite .hero-google,
      .testi-trustindex remplace la grille de fausses cartes. */
.hero-trustindex{margin-top:2rem; max-width:460px;}
.testi-trustindex{margin-top:2.5rem;}
.hero-trustindex .ti-widget,
.testi-trustindex .ti-widget{margin:0 !important;}

/* 5. Ombres portées au survol : les transitions de main.css existent mais sont
      très courtes (.15s sur les boutons, .2s sur les cartes). Sur des ombres
      larges et diffuses, l'apparition paraît instantanée.
      On allonge la seule box-shadow et on lui donne une courbe sortante ;
      les transform (soulèvement des cartes) gardent leur durée d'origine,
      sinon le survol devient mou. */
:root{
	--shadow-t:box-shadow .4s cubic-bezier(.22,.61,.36,1);
}
.btn{transition:transform .15s ease,var(--shadow-t),background .15s ease,border-color .2s ease,color .2s ease;}
/* L'enfoncement au clic doit rester immédiat. */
.btn:active{transition:transform .05s ease;}
.why-card,
.sol-card,
.pain-card,
.fw-card,
.testi-card,
.case-card{transition:var(--shadow-t),transform .2s;}
.m-card{transition:var(--shadow-t),border-color .2s,transform .15s;}

/* 6. Mention commune du bloc Solutions.
      Reprise à l'identique des styles qui étaient en ligne dans le render,
      déplacés ici pour que le texte devienne un attribut éditable. */
.sol-note{
	margin-top:1.8rem;
	background:var(--cream);
	border:1px solid var(--sand-2);
	border-radius:16px;
	padding:1.2rem 1.6rem;
	display:flex;
	align-items:flex-start;
	gap:.9rem;
}
.sol-note svg{flex:0 0 auto; margin-top:1px;}
.sol-note p{font-size:.88rem; color:var(--ink-2); line-height:1.65;}
.sol-note strong{color:var(--ink);}

/* ============================================================
   7. Formulaire de contact (section sombre)

   Kadence stylise les champs via input[type="text"] (spécificité 0,1,1),
   plus fort que le .form-input de la maquette (0,1,0) : les champs se
   retrouvent avec un fond blanc et un texte sombre au milieu d'une section
   sur fond --ink.
   On cible donc les champs par leur TYPE, scopés à la section contact. Cela
   couvre le formulaire de démonstration comme celui généré par l'extension
   via le shortcode du bloc, sans dépendre de ses classes.

   ATTENTION : ici on n'utilise QUE background-color, jamais le raccourci
   background. Le raccourci réinitialise toutes les sous-propriétés, dont
   background-image et background-position : la flèche du menu déroulant,
   qui est une image de fond, sauterait au moindre focus.
   ============================================================ */
.sbd-block-contact .contact-right input[type="text"],
.sbd-block-contact .contact-right input[type="email"],
.sbd-block-contact .contact-right input[type="tel"],
.sbd-block-contact .contact-right input[type="url"],
.sbd-block-contact .contact-right input[type="number"],
.sbd-block-contact .contact-right textarea,
.sbd-block-contact .contact-right select{
	width:100%;
	background-color:rgba(255,255,255,.07);
	border:1px solid rgba(255,255,255,.12);
	border-radius:10px;
	padding:.75rem 1rem;
	color:var(--chalk);
	font-family:'Manrope',sans-serif;
	font-size:.9rem;
	line-height:1.4;
	outline:none;
	box-shadow:none;
	transition:border-color .15s ease,background-color .15s ease;
}
.sbd-block-contact .contact-right textarea{min-height:120px;resize:vertical;}

.sbd-block-contact .contact-right input:focus,
.sbd-block-contact .contact-right textarea:focus,
.sbd-block-contact .contact-right select:focus{
	border-color:var(--amber);
	background-color:rgba(255,255,255,.1);
}

/* Le #5C5040 de la maquette était pensé pour un fond clair. Sur le fond sombre
   rétabli, il devient illisible : on remonte au gris chaud des textes tertiaires. */
.sbd-block-contact .contact-right ::placeholder{color:var(--ink-3);opacity:1;}

/* Menu déroulant natif : color-scheme indique au navigateur de dessiner la
   liste en sombre (texte clair, surbrillance adaptée). Les couleurs d'option
   ne suffisent pas seules, le rendu du popup étant gouverné par l'OS. */
.sbd-block-contact .contact-right select{
	color-scheme:dark;
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
	padding-right:2.5rem;
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E1BDB1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 1rem center;
}
/* Chevron retourné à l'ouverture. Un select natif n'expose pas son état ouvert :
   le focus en est le meilleur indicateur disponible en CSS pur. */
.sbd-block-contact .contact-right select:focus{
	background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23E1BDB1' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='18,15 12,9 6,15'/%3E%3C/svg%3E");
}
.sbd-block-contact .contact-right select option{
	background-color:#241F18 !important;
	color:#EDE6D0 !important;
}

/* ── Spécifique à l'extension de formulaire ──────────────────────────────
   Chaque champ est enveloppé dans un span inline : il doit passer en bloc pour
   que le champ occupe la largeur. L'autop ajoute aussi des p autour des lignes. */
.sbd-block-contact .wpcf7-form-control-wrap{display:block;}
.sbd-block-contact .wpcf7 p{margin:0;}
.sbd-block-contact .form-submit{margin-top:.5rem;}

/* Bouton d'envoi : input[type="submit"], donc même conflit de spécificité que
   les champs. On rejoue le style .form-btn de la maquette, flèche comprise
   (un input ne peut pas contenir de SVG, elle passe en image de fond). */
.sbd-block-contact .contact-right input[type="submit"]{
	width:100%;
	padding:1rem 2.4rem;
	border:1px solid #D9ADAE;
	border-radius:12px;
	color:var(--ink);
	font-family:'Space Grotesk',sans-serif;
	font-weight:700;
	font-size:1rem;
	line-height:1.2;
	cursor:pointer;
	box-shadow:none;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231C1812' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,5 20,12 13,19'/%3E%3C/svg%3E") no-repeat right 1.1rem center,
		linear-gradient(135deg,#FFFFFF 0%,#E1BDB1 100%);
	transition:background .25s ease,border-color .25s ease;
}
.sbd-block-contact .contact-right input[type="submit"]:hover,
.sbd-block-contact .contact-right input[type="submit"]:focus{
	border-color:#CF9E8F;
	background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%231C1812' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='13,5 20,12 13,19'/%3E%3C/svg%3E") no-repeat right 1.1rem center,
		linear-gradient(135deg,#FFFFFF 0%,#D8AC9E 100%);
}

/* Kadence repasse le texte du bouton en blanc au survol, illisible sur le
   dégradé clair. Même correctif que la section 2. */
.sbd-block-contact .form-btn:hover,
.sbd-block-contact .form-btn:focus,
.sbd-block-contact .contact-right input[type="submit"]:hover,
.sbd-block-contact .contact-right input[type="submit"]:focus,
.sbd-block-contact .contact-right button[type="submit"]:hover,
.sbd-block-contact .contact-right button[type="submit"]:focus{color:var(--ink) !important;}

/* Bouton désactivé du formulaire de démonstration (aucun shortcode saisi). */
.sbd-block-contact .form-btn[disabled]{opacity:.5;cursor:not-allowed;}

/* Messages de validation et d'envoi, sur fond sombre. */
.sbd-block-contact .wpcf7-not-valid-tip{
	color:#E9A0A0;
	font-size:.75rem;
	margin-top:.35rem;
}
.sbd-block-contact .contact-right .wpcf7-not-valid{border-color:#C46B6B;}
.sbd-block-contact .wpcf7-response-output{
	margin:1rem 0 0;
	padding:.75rem 1rem;
	border:1px solid rgba(255,255,255,.2);
	border-radius:10px;
	font-size:.82rem;
	line-height:1.5;
	color:#EDE6D0;
}
.sbd-block-contact form.sent .wpcf7-response-output{border-color:#4CAF50;color:#CDE8D2;}
.sbd-block-contact form.invalid .wpcf7-response-output,
.sbd-block-contact form.unaccepted .wpcf7-response-output,
.sbd-block-contact form.failed .wpcf7-response-output{border-color:#C46B6B;color:#F0CFCF;}
.sbd-block-contact .wpcf7-spinner{background-color:var(--amber-lt);}

/* ============================================================
   8. Inversion des colonnes des blocs a deux colonnes.

   .split--reverse existe deja dans main.css. Le bloc ambition reutilisant
   les classes .split, il en herite sans rien ajouter ici.
   Restent story et jamia, qui ont leur propre grille.

   Le repli mobile doit forcer la colonne 1 : sans ca, une inversion pensee
   pour le bureau ferait passer le texte avant l'image sur telephone.
   ============================================================ */
.story-split--reverse .story-media{grid-column:2;grid-row:1;}
.story-split--reverse .story-content{grid-column:1;grid-row:1;}
.jamia-inner--reverse .jamia-left{grid-column:2;grid-row:1;}
.jamia-inner--reverse .jamia-right{grid-column:1;grid-row:1;}

@media(max-width:900px){
	.story-split--reverse .story-media{grid-column:1 !important;grid-row:1 !important;}
	.story-split--reverse .story-content{grid-column:1 !important;grid-row:2 !important;}
	.jamia-inner--reverse .jamia-left{grid-column:1 !important;grid-row:1 !important;}
	.jamia-inner--reverse .jamia-right{grid-column:1 !important;grid-row:2 !important;}
}

/* ============================================================
   9. Liens de la barre de navigation.

   La classe .is-current est deja posee par sbd_nav_menu() depuis le debut,
   elle n'avait simplement jamais ete mise en forme.

   Le rose change de nuance selon l'etat de la nav : --amber-lt (#E1BDB1)
   tant qu'elle est transparente au-dessus du hero sombre, --amber (#9A595C)
   une fois le fond creme en place. Le meme rose sur les deux fonds serait
   illisible sur l'un des deux.
   ============================================================ */

/* Nav transparente : rose clair */
.nav:not(.is-scrolled) .nav-link:hover,
.nav:not(.is-scrolled) .nav-link:focus-visible,
.nav:not(.is-scrolled) .nav-link.is-current{color:var(--amber-lt);}

/* Nav defilee, fond creme : rose fonce */
.nav.is-scrolled .nav-link:hover,
.nav.is-scrolled .nav-link:focus-visible,
.nav.is-scrolled .nav-link.is-current{color:var(--amber);}

/* JAM.IA : lien ordinaire.
   main.css (l.561-562) lui donnait une couleur et une graisse propres pour le
   mettre en avant. Mais dans une barre de navigation le rose signifie deja
   "vous etes ici" : deux liens roses cote a cote laissaient croire qu'on etait
   sur deux pages a la fois. Une couleur ne peut pas porter deux informations.
   On neutralise ici plutot que dans main.css, qui reste le miroir de la maquette.
   La classe is-jamia continue d'etre posee : rien a recoder si l'on revient dessus. */
.nav-link.is-jamia{font-weight:600;color:rgba(248,244,241,.92);}
.nav.is-scrolled .nav-link.is-jamia{color:var(--ink-2);}

/* Survol et page courante : exactement le comportement commun. Declare
   explicitement, car a specificite egale c'est l'ordre qui tranche. */
.nav:not(.is-scrolled) .nav-link.is-jamia:hover,
.nav:not(.is-scrolled) .nav-link.is-jamia:focus-visible,
.nav:not(.is-scrolled) .nav-link.is-jamia.is-current{color:var(--amber-lt);}
.nav.is-scrolled .nav-link.is-jamia:hover,
.nav.is-scrolled .nav-link.is-jamia:focus-visible,
.nav.is-scrolled .nav-link.is-jamia.is-current{color:var(--amber);}

/* Menu mobile : meme logique, son panneau suit l'etat de la nav */
.nav:not(.is-scrolled) .mobile-menu .nav-link:hover,
.nav:not(.is-scrolled) .mobile-menu .nav-link.is-current{color:var(--amber-lt);}
.nav.is-scrolled .mobile-menu .nav-link:hover,
.nav.is-scrolled .mobile-menu .nav-link.is-current{color:var(--amber);}

/* ============================================================
   10. Page courante : un second signal, en plus de la couleur.

   Le lien JAM.IA est rose en permanence (c'est un nom de produit) et la
   page courante l'est aussi : deux liens roses cote a cote donnent
   l'impression d'etre sur deux pages a la fois. La couleur ne peut pas
   porter deux informations differentes, on ajoute donc un soulignement
   qui, lui, ne designe que la position.

   Barre en currentColor : elle suit automatiquement la nuance de rose
   choisie par la section 9 selon l'etat de la nav.
   Reservee au menu de bureau : dans le menu mobile, empile a la verticale,
   la couleur seule suffit.
   ============================================================ */

.nav-links .nav-link.is-current{position:relative;}
.nav-links .nav-link.is-current::after{
	content:'';
	position:absolute;
	left:0;
	right:0;
	bottom:-7px;
	height:2px;
	border-radius:2px;
	background:currentColor;
}

/* ============================================================
   11. Liens des cartes d'abonnement.

   Meme cause que la section 2 : Kadence force a:hover en bleu. Les boutons,
   la nav et le pied de page etaient traites, .sol-link avait ete oublie.
   C'est le dernier lien colore du site qui n'etait pas protege.

   La maquette ne definit aucun survol pour ce lien : on en donne un dans la
   palette (--amber-dk) plutot que de le laisser sans reponse au pointeur.
   La fleche avance comme celle des boutons, pour un comportement homogene.
   ============================================================ */

.sol-link:hover,
.sol-link:focus{color:var(--amber-dk) !important;}

/* Carte sombre (variante mise en avant) : le rose fonce y serait illisible. */
.sol-card--featured .sol-link:hover,
.sol-card--featured .sol-link:focus{color:var(--chalk) !important;}

.sol-link svg{transition:transform .15s ease;}
.sol-link:hover svg{transform:translateX(3px);}

/* ============================================================
   12. Footer centre sur mobile.

   Sous 900px, .footer-grid passe deja en une seule colonne (main.css). On
   centre alors tout son contenu. text-align:center sur la grille suffit pour
   le logo (inline-flex), les titres de colonne et la description ; mais les
   listes de liens sont en flex-direction:column, donc c'est align-items qui
   les centre, pas text-align. La description recentre sa max-width via margin
   auto, et la barre du bas passe de space-between a center (avec ses deux
   liens legaux autorises a passer a la ligne si l'ecran est etroit).
   ============================================================ */
@media(max-width:900px){
	.footer-grid{text-align:center;}
	.footer-desc{margin-inline:auto;}
	.footer-links{align-items:center;}
	.footer-bottom{justify-content:center;text-align:center;}
	.footer-bottom > div{flex-wrap:wrap;justify-content:center;}
}