/* Rubrique « Transmettre », gabarit deux colonnes + carte brochure collante.
   Maquette Thy (formulaire sticky sur toutes les pages de la rubrique). */

/* Corps sur deux colonnes, dans le shell du gabarit article. Même largeur
   maximale que .fhcl-projet__container pour que le titre, le fil d'Ariane et le
   texte restent alignés d'un bloc à l'autre. */
.fhcl-trans__wrap{
	max-width:1240px;margin:0 auto;padding:0 24px;
	display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:56px;align-items:start;
}
.fhcl-trans__main{min-width:0;}
/* Le corps hérite d'une largeur de lecture étroite sur les articles : ici c'est
   la colonne qui la fixe, sinon le texte n'occuperait que la moitié gauche. */
.fhcl-trans .fhcl-trans__main .fhcl-prose{max-width:none;}
/* Titres de section en orange (maquette) ; le premier, qui coiffe le chapô,
   reste en encre pour marquer la hiérarchie. */
.fhcl-trans .fhcl-prose h2{color:var(--c-orange-text);}
.fhcl-trans .fhcl-prose > h2:first-of-type{color:var(--c-ink);}

/* --- Carte « page dédiée » -------------------------------------------- */
.fhcl-trans-card{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	background:#FDF2EC;border-radius:var(--r-md);padding:20px 22px;margin:20px 0 32px;
}
.fhcl-trans-card__text{min-width:0;}
.fhcl-trans-card__title{
	display:inline-block;color:var(--c-orange-text);font-size:18px;
	font-weight:var(--fw-bold);text-decoration:underline;
}
.fhcl-trans-card__teaser{margin:6px 0 0;color:#8A8079;font-size:15px;line-height:1.5;}
.fhcl-trans-card__cta{
	flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
	background:var(--c-orange);color:#fff;border-radius:var(--r-sm);
	padding:13px 20px;font-size:16px;font-weight:var(--fw-medium);text-decoration:none;
}
.fhcl-trans-card__cta:hover{background:var(--c-orange-hover);color:#fff;}
/* Les cartes sont injectées DANS .fhcl-prose : sans ce rappel, la règle
   générique des liens du corps (orange souligné) l'emporte en spécificité et le
   bouton se retrouve en texte orange sur fond orange, illisible. */
.fhcl-prose .fhcl-trans-card__cta,
.fhcl-prose .fhcl-trans-card__cta:hover{color:#fff;text-decoration:none;}

/* Visuel du bloc, à droite du texte (maquette). Flotté plutôt que placé en
   grille : il est injecté au milieu d'un flux de paragraphes issu de l'import,
   dont on ne maîtrise pas la structure. */
.fhcl-trans-illu{float:right;margin:4px 0 16px 28px;max-width:302px;}
.fhcl-trans-illu img{display:block;width:100%;height:auto;border-radius:var(--r-md);}
/* La carte ne doit pas s'enrouler autour du visuel. */
.fhcl-trans-card{clear:both;}
@media (max-width:760px){
	/* En mobile l'illustration ne flotte plus, mais elle ne doit pas s'étirer sans
	   limite : une image carrée occuperait tout l'écran (symbole géant signalé au
	   recettage). On la borne et on la centre. */
	.fhcl-trans-illu{float:none;margin:0 auto 16px;max-width:min(302px,100%);}
}

/* --- Fin d'article ----------------------------------------------------- */
.fhcl-trans-end{margin-top:48px;padding-top:40px;border-top:1px solid #EDE5D9;}
.fhcl-trans-end__cta{
	display:flex;align-items:center;justify-content:space-between;gap:24px;
	background:#FDF2EC;border-radius:var(--r-md);padding:22px;
}
.fhcl-trans-end__cta p{margin:0;color:var(--c-ink);font-size:16px;line-height:1.55;}
.fhcl-trans-end__cta .fhcl-btn{flex:0 0 auto;white-space:nowrap;}
.fhcl-trans-end__intro{margin:28px 0 0;color:var(--c-ink-60);font-size:16px;line-height:1.6;}
.fhcl-trans-end__ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:24px;text-align:center;}
/* Pastille des moyens de contact : elle porte désormais un pictogramme, il faut
   donc le centrer et lui donner sa couleur (elle était vide au recettage). */
.fhcl-trans-end__dot{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:0 auto 12px;border-radius:50%;background:var(--c-orange);color:#fff;}
.fhcl-trans-end__dot svg{width:22px;height:22px;display:block;}
.fhcl-trans-end__waytitle{margin:0;font-size:17px;font-weight:var(--fw-bold);color:var(--c-ink);}
.fhcl-trans-end__wayval{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--c-ink-60);}
.fhcl-trans-end__wayval a{color:var(--c-ink-60);text-decoration:underline;}

/* --- Carte brochure ------------------------------------------------------ */
.fhcl-broch{
	/* Accrochée en HAUT, sous le bandeau de navigation : c'est ce qui se lit
	   comme un formulaire qui suit le lecteur. La carte reste plus haute qu'un
	   écran de portable, d'où `max-height` + défilement interne : sur un grand
	   écran elle tient en entier, sur un petit on garde le haut visible et le
	   bouton d'envoi reste atteignable sans quitter la carte. */
	position:sticky;top:104px;
	max-height:calc(100vh - 128px);overflow-y:auto;overscroll-behavior:contain;
	background:var(--c-cream);border-radius:var(--r-md);
	padding:18px;
}
.fhcl-broch__intro{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:start;}
.fhcl-broch__portrait{
	margin:0;height:168px;border-radius:var(--r-sm);
	background-size:cover;background-position:center top;
	display:flex;align-items:flex-end;position:relative;overflow:hidden;
}
/* Voile QUASI OPAQUE au bas du portrait, pas seulement assombri. Le nom est en
   orange clair sur cette zone : à 82 % d'opacité le contraste dépendait encore
   de la photo téléversée, et axe ne sait pas mesurer un texte posé sur une image
   (il le classe « incomplet », pas « en échec »). À 96 % il tient quelle que
   soit la photo. */
.fhcl-broch__portrait::after{
	content:"";position:absolute;inset:auto 0 0 0;height:62%;
	background:linear-gradient(180deg,rgba(24,14,9,0) 0%,rgba(24,14,9,.96) 72%);
}
.fhcl-broch__portrait figcaption{position:relative;z-index:1;padding:10px;display:grid;gap:2px;}
.fhcl-broch__name{color:var(--c-orange-on-dark);font-weight:var(--fw-bold);font-size:15px;line-height:1.2;}
.fhcl-broch__role{color:#fff;font-size:13px;line-height:1.25;}
.fhcl-broch__quote{margin:0;}
.fhcl-broch__quote p{margin:0;color:var(--c-ink);font-size:15px;line-height:1.4;}

.fhcl-broch__coords{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:12px 0 2px;}
.fhcl-broch__coord{
	margin:0;background:#EDE5D9;border-radius:var(--r-sm);padding:8px 12px;
	display:grid;gap:2px;min-width:0;
}
.fhcl-broch__coord span{color:var(--c-ink);font-size:14px;font-weight:var(--fw-bold);}
.fhcl-broch__coord a{
	color:var(--c-orange-text);font-size:14px;text-decoration:underline;
	overflow-wrap:anywhere;                     /* l'adresse mail est longue */
}

.fhcl-broch__title{margin:14px 0 10px;color:var(--c-orange-text);font-size:20px;font-weight:var(--fw-bold);}

.fhcl-broch__form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.fhcl-broch__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

.fhcl-broch__civ{grid-column:1/-1;margin:0;padding:0;border:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;}
.fhcl-broch__civ legend{float:left;margin:0 12px 0 0;padding:0;font-size:15px;font-weight:var(--fw-medium);color:var(--c-ink);}
.fhcl-broch__radio{display:inline-flex;align-items:center;gap:7px;}
.fhcl-broch__radio input{width:18px;height:18px;accent-color:var(--c-orange);}
.fhcl-broch__radio label{font-size:15px;color:var(--c-ink);}

.fhcl-broch__row{grid-column:1/-1;display:flex;flex-direction:column;gap:5px;}
.fhcl-broch__row--half{grid-column:span 1;}
.fhcl-broch__row label{font-size:14px;font-weight:var(--fw-medium);color:var(--c-ink);}
.fhcl-broch__row input{
	background:#fff;border:1px solid #E2D9CB;border-radius:var(--r-sm);
	padding:10px 12px;font:inherit;font-size:15px;color:var(--c-ink);width:100%;
}
.fhcl-broch__row input:focus{outline:none;border-color:var(--c-orange);box-shadow:0 0 0 3px rgba(199,80,0,.15);}

.fhcl-broch__req{grid-column:1/-1;margin:2px 0 0;font-size:13px;color:#6B6259;}

.fhcl-broch__check{grid-column:1/-1;display:flex;align-items:flex-start;gap:9px;margin:6px 0;}
.fhcl-broch__check input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;accent-color:var(--c-orange);}
.fhcl-broch__check label{font-size:15px;font-weight:var(--fw-medium);color:var(--c-ink);line-height:1.35;}

.fhcl-broch__legal{grid-column:1/-1;margin:2px 0 0;font-size:12.5px;line-height:1.4;color:#6B6259;}
/* Souligné obligatoire : un lien dans un bloc de texte ne peut pas se distinguer
   par la seule couleur (règle axe link-in-text-block / RGAA 10.6). */
.fhcl-broch__legal a{color:var(--c-orange-text);text-decoration:underline;}

/* Anti-robot : deux encadrés côte à côte (maquette Thy). */
.fhcl-broch__captcha{
	grid-column:1/-1;margin-top:6px;
	display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;
}
.fhcl-broch__challenge{
	margin:0;background:#fff;border:1px solid #E2D9CB;border-radius:var(--r-sm);
	display:flex;align-items:center;justify-content:center;min-height:62px;
	font-size:20px;font-weight:var(--fw-bold);letter-spacing:.06em;color:var(--c-ink);
	user-select:none;
}
.fhcl-broch__captcha .fhcl-broch__row{grid-column:auto;justify-content:center;}

.fhcl-broch__submit{
	grid-column:1/-1;margin-top:8px;
	background:var(--c-orange);color:#fff;border:0;border-radius:var(--r-sm);
	padding:14px 20px;font:inherit;font-size:17px;font-weight:var(--fw-bold);
	cursor:pointer;transition:background .15s ease;
}
.fhcl-broch__submit:hover{background:var(--c-orange-hover);}
.fhcl-broch__submit:focus-visible{outline:3px solid var(--c-navy);outline-offset:2px;}

.fhcl-broch__notice{
	grid-column:1/-1;margin:0 0 10px;padding:11px 13px;border-radius:var(--r-sm);
	font-size:15px;line-height:1.4;
}
.fhcl-broch__notice--ok{background:#E7F2E9;color:#1F5B2C;}
.fhcl-broch__notice--err{background:#FBE9E4;color:#8A2C10;}

@media (max-width:1080px){
	.fhcl-trans__wrap{grid-template-columns:minmax(0,1fr);gap:40px;}
	/* Empilé : plus de colonne à suivre, donc plus de raison de coller, et un
	   défilement interne sur mobile serait un piège tactile. */
	.fhcl-broch{position:static;max-height:none;overflow:visible;}
}
@media (max-width:760px){
	.fhcl-trans-card,
	.fhcl-trans-end__cta{flex-direction:column;align-items:flex-start;}
	.fhcl-trans-end__ways{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:560px){
	.fhcl-broch__intro{grid-template-columns:minmax(0,1fr);}
	.fhcl-broch__portrait{height:220px;}
	.fhcl-broch__coords{grid-template-columns:minmax(0,1fr);}
	.fhcl-broch__form{grid-template-columns:minmax(0,1fr);}
	.fhcl-broch__row--half{grid-column:1/-1;}
}