/* =====================================================================
   BUREL AVOCAT — PAGE D'ACCUEIL
   Styles spécifiques aux sections de la home. Consomme les tokens de
   theme.css (aucune valeur en dur).
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO — proportions calées sur la maquette Figma
   --------------------------------------------------------------------- */
.hero { padding-block: clamp(7rem, 5rem + 7vw, 11rem) var(--section-padding-y); }
.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.6fr); /* texte large / portrait étroit */
	align-items: center;
	gap: var(--grid-gap);
	position: relative;
	z-index: 1;
}
/* Filigrane logo (balance) très discret, à gauche, débordant sous le contenu */
.hero__watermark {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(-22%, -50%);
	width: clamp(280px, 30vw, 540px);
	z-index: 0;
	opacity: 0.3;
	pointer-events: none;
	line-height: 0;
}
.hero__watermark svg { width: 100%; height: auto; display: block; }
.hero__watermark svg path { fill: #34496d; }

.hero__content { max-width: 740px; }
.hero__title { line-height: 1.14; margin-bottom: var(--space-lg); }
.hero__text { margin-bottom: var(--space-xl); }

/* Conteneur portrait + couronne (la couronne déborde autour de la photo) */
.hero__figure { position: relative; }
.hero__media {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	aspect-ratio: 476 / 687;              /* ratio exact du portrait maquette */
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } /* cadrage favorisant le visage */
.hero__media--empty { background: var(--c-bleu-clair); }

/* Couronne de laurier : largeur 189% du portrait, centrée avec léger
   décalage (gauche/bas) → grande branche à droite, petite en bas-gauche. */
.hero__laurel {
	width: 170%;
	left: 50%;
	top: 50%;
	transform: translate(-52%, -46%);
}

/* ---------------------------------------------------------------------
   INTRODUCTION (citation) — calée sur la maquette
   Texte serif 64px aligné à gauche, couronne pâle à droite, halo à gauche.
   --------------------------------------------------------------------- */
/* min-height (et non height) : avec une hauteur FIXE + `overflow: clip` sur
   .section, un texte plus haut que 80vh débordait de part et d'autre du
   centrage flex et se faisait rogner — il disparaissait sous le hero au-dessus
   et sous la section suivante. C'était le cas dès que la citation dépassait
   quelques lignes (mobile). */
.intro {
	text-align: left;
	min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* halo orange de gauche plus large (son mouvement/opacité est animé au scroll) */
    --glow-size: clamp(460px, 44vw, 1000px);
}
.intro__inner {
	position: relative;
	z-index: 1;
	max-width: 1450px;
	margin-inline: auto;
}
.intro__text {
	font-family: var(--font-body);
	font-size: var(--fs-lead);
	line-height: 1.7;
	color: var(--color-text);
	margin-bottom: var(--space-xl);
}

/* Couronne en filigrane (grande branche à droite, orientation maquette) */
.intro__laurel {
	width: clamp(380px, 42vw, 1100px);
	top: 50%;
	right: 10%;
	transform: translateY(-50%);
	opacity: 0.16;
}

/* Halo orange : géré par l'utilitaire global .opacity-bg-orange
   (classe ajoutée sur la section .intro dans introduction.php).
   Voir theme.css → « UTILITAIRE — halo orange décoratif ». */

/* ---------------------------------------------------------------------
   TYPES D'ACCIDENTS — deck de cartes façon Tinder (GSAP)
   Le titre défile normalement ; seul le deck est épinglé et ses cartes
   occupent toute la hauteur d'écran sous le menu fixe (home.js).
   --------------------------------------------------------------------- */
.accidents__header {
	max-width: 760px;
	margin: 0 auto var(--space-xl);
	text-align: center;
}
.accidents__title { font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem); line-height: 1.12; }

/* Deck : conteneur des cartes empilées, centré, avec halo pêche derrière */
.accidents__deck {
	position: relative;
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
}
.accidents__glow {
	position: absolute;
	inset: -8% -6%;
	z-index: 0;
	background: radial-gradient(ellipse at center, rgba(221, 115, 69, 0.22), transparent 60%);
	pointer-events: none;
}

/* Carte navy */
.accident-card {
	position: relative;
	z-index: 1;
	background-color: var(--color-bg-dark);
	color: var(--color-text-invert);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
	display: flex;
}
/* Image de fond optionnelle (ACF) sous un voile bleu foncé pour la lisibilité */
.accident-card__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-size: cover;
	background-position: center;
}
.accident-card__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 47, 72, 0.74), rgba(30, 47, 72, 0.9));
}
.accident-card--has-bg .accident-card__inner { position: relative; z-index: 1; }
.accident-card__inner {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--space-md);
	padding: clamp(2.25rem, 1.75rem + 3vw, 4rem);
}
.accident-card__icon { width: clamp(120px, 16vw, 200px); }
.accident-card__icon img,
.accident-card__icon svg { width: 100%; height: auto; display: block; }
.accident-card__title { font-size: var(--fs-h2); margin: 0; }
.accident-card__text { max-width: 52ch; margin: 0; color: var(--color-text-invert-muted); }
.accident-card__cta { margin-top: var(--space-xs); }

/* Indice de défilement : flèche entourée qui rebondit */
.accidents__cue {
	position: fixed;   /* collée au bas de l'écran ; visible seulement pendant le swipe (JS) */
	left: 50%;
	bottom: clamp(0.6rem, 2vh, 1.25rem);
	transform: translateX(-50%);
	z-index: 20;
	color: var(--color-accent);
}
.accidents__cue-ring {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid currentColor;
	border-radius: 50%;
	animation: cue-bounce 1.5s ease-in-out infinite;
}
.accidents__cue svg { width: 22px; height: 22px; display: block; }
@keyframes cue-bounce {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(10px); }
}
@media (prefers-reduced-motion: reduce) {
	.accidents__cue-ring { animation: none; }
}

/* --- Mode swipe (JS/GSAP actif) : cartes superposées en absolu --------
   Sans JS, fallback = cartes en liste verticale (toutes lisibles). */
.accidents__deck:not(.is-swipe) .accident-card { margin-bottom: var(--space-lg); }

/* Hauteur du deck = écran − menu (--deck-top, JS) − place de la flèche.
   Chaque carte remplit le deck ; marges et icône suivent la hauteur
   d'écran pour que le contenu tienne aussi sur un portable. */
.accidents__deck.is-swipe {
	height: calc(100vh - var(--deck-top, 6rem) - 5.5rem);
}
.accidents__deck.is-swipe .accident-card {
	position: absolute;
	inset: 0;
	margin: 0;
	will-change: transform;
}
.accidents__deck.is-swipe .accident-card__inner {
	justify-content: safe center;   /* si ça déborde : vers le bas, jamais rogné en haut */
	padding: clamp(1.5rem, 5vh, 4rem) clamp(2rem, 6vw, 6rem);
	gap: clamp(0.75rem, 2.2vh, var(--space-md));
}
.accidents__deck.is-swipe .accident-card__icon { width: clamp(80px, min(16vw, 16vh), 200px); }
.accidents__deck.is-swipe .accident-card__title { font-size: clamp(1.75rem, 1rem + 2.2vh, var(--fs-h2)); }
.accidents__deck.is-swipe .accident-card__text { max-width: 95ch; }

/* Le carrousel « carte vedette » (dommages + articles de compétence) est
   désormais un composant GLOBAL défini dans theme.css (réutilisé hors home). */

/* Le composant « À PROPOS » (.about / .stat) est désormais GLOBAL (theme.css)
   pour être réutilisé hors home (page À propos). */

/* ---------------------------------------------------------------------
   CONTACT
   --------------------------------------------------------------------- */
.contact__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 1rem + 4vw, 5rem);
	align-items: start;
}
.contact__title { font-size: var(--fs-h2); margin-bottom: var(--space-md); }
.contact__text { margin-bottom: var(--space-xl); max-width: 44ch; }
.contact__coords { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); }
.contact__coord { display: flex; align-items: center; gap: var(--space-sm); }
.contact__coord-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; flex-shrink: 0;
	border-radius: var(--radius-sm);
	background: var(--c-blanc-15);
	color: var(--color-accent);
}
.contact__socials { display: flex; gap: var(--space-md); }
.contact__socials a { font-size: var(--fs-small); text-decoration: underline; }

/* Formulaire */
.contact-form { display: grid; gap: var(--space-md); }
.contact-form__field { display: flex; flex-direction: column; gap: var(--space-2xs); margin: 0; }
.contact-form__field label { font-size: var(--fs-small); color: var(--color-text-invert-muted); }
.contact-form input,
.contact-form textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-body);
	color: var(--color-text-invert);
	background: var(--c-blanc-15);
	border: 1px solid var(--color-border-invert);
	border-radius: var(--radius-sm);
	padding: 0.85rem 1rem;
	transition: border-color var(--transition-base);
}
.contact-form input:focus,
.contact-form textarea:focus { outline: none; border-color: var(--color-accent); }
.contact-form textarea { resize: vertical; }
.contact-form__field--hp { position: absolute; left: -9999px; }
.contact-form__submit { justify-content: center; margin-top: var(--space-xs); }

.contact__notice { padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); margin-bottom: var(--space-md); }
.contact__notice--ok  { background: rgba(46, 160, 90, 0.18); }
.contact__notice--err { background: rgba(221, 115, 69, 0.20); }

/* Le footer est désormais un composant global (voir theme.css → FOOTER). */

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
	.hero__inner,
	.contact__inner { grid-template-columns: 1fr; }
	.hero__media { max-width: 460px; margin-inline: auto; }
	.dommages__header { flex-direction: column; align-items: flex-start; }
	.hero__laurel { opacity: 0.5; }

	/* La citation reprend sa hauteur naturelle : sur un écran étroit elle tient
	   rarement dans 80vh et le centrage forcé la faisait déborder. */
	.intro { min-height: 0; }
}


/* « Types d'accidents » en liste : mobile ET écrans trop bas pour le swipe */
@media (max-width: 900px), (max-height: 639px) {
	/* --- « Types d'accidents » : plus de deck empilé -------------------
	   Le swipe est désactivé en JS sous 901px de large ou 640px de haut
	   (home.js) : les cartes se lisent l'une sous l'autre. */
	.accidents__deck { max-width: 560px; }
	.accidents__deck:not(.is-swipe) .accident-card:last-child { margin-bottom: 0; }
	.accidents__cue { display: none; }
}

/* Mobile : plus d'air entre le sur-titre du hero et le header fixe */
@media (max-width: 700px) {
	.hero { padding-top: clamp(10.5rem, 8rem + 12vw, 12.5rem); }
}