/* ═════════════════════════════════════════════════════════════════
   Ophtapod : page d'accueil (template-home.php)
   Valeurs relevées sur le site en production à 1370px de viewport
   (conteneur 1100px). Les tokens viennent de main.css.
   ═════════════════════════════════════════════════════════════════ */

/* ── Génériques de section ────────────────────────────────────────── */
/* .op-eyebrow et .op-img-placeholder sont partagés avec les autres modèles :
   ils vivent dans main.css. */

#scroll_anchor {
	display: block;
	height: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────────
   HomeHero : titre, paragraphe d'appui, actions, alignés en bas du visuel
   pleine hauteur. La source approuvée ne comporte ni surétiquette ni second
   titre — la composition en L de l'ancien site est abandonnée. */

.op-hero {
	display: flex;
	align-items: flex-end;
	min-height: 50rem;
	padding: 0 var(--section-px) 6.875rem;
	background-color: var(--c-navy);
	background-size: cover;
	background-position: 50% 50%;
	background-attachment: scroll;
}

.op-hero__inner {
	width: 100%;
}

.op-hero__title {
	margin: 0 0 1.5rem;
	max-width: 42rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: clamp(2.25rem, calc(4rem * var(--op-display)), 6rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--c-white);
}

.op-hero__texte {
	margin: 0 0 2.5rem;
	max-width: 32rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.86);
}

/* Une action de niveau 1 et un lien affirmé, jamais deux boutons. */
.op-hero__actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.op-hero__lien,
.op-hero__lien:hover {
	color: var(--c-white);
}

/* ── Raccourcis ───────────────────────────────────────────────────── */

.op-shortcuts {
	background: var(--c-white);
}

/* Question d'orientation, puis les trois grandes actions. La source place ce
   groupe juste sous le hero — 3.75rem au-dessus, 3.125rem en dessous — et ne
   laisse que 1.5rem entre la question et les pastilles : c'est un même geste
   d'orientation, pas deux blocs séparés. */
.op-shortcuts .op-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 3.75rem 0 3.125rem;
}

.op-shortcuts__title {
	margin: 0;
	max-width: 34rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-shortcuts__wrap {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

/* Grande action : icône, titre, microtexte, chevron. Surface fonctionnelle,
   donc arrondi 0.875rem — pas une pilule, pas une grande carte. */
.op-shortcut {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	min-width: 0;
	min-height: 6.5rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--r-panel);
	transition: background-color 160ms ease-out;
}

.op-shortcut::after {
	content: '';
	flex-shrink: 0;
	width: 0.4375rem;
	height: 0.4375rem;
	border-right: 0.09375rem solid currentColor;
	border-top: 0.09375rem solid currentColor;
	transform: rotate(45deg);
}

.op-shortcut__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	border-radius: var(--r-pill);
}

.op-shortcut__icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.op-shortcut__text {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.op-shortcut__title {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.1875rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.op-shortcut__sub {
	margin-top: 0.25rem;
	font-size: 0.9375rem;
	line-height: 1.45;
}

/* Pastille d'action principale : dégradé doré, texte bleu nuit.
   Le service d'urgence ne figure pas sur l'accueil (il est réservé à la
   page Nos services), c'est la prise de rendez-vous qui occupe cette place. */
.op-shortcut--rdv {
	background: var(--grad-gold);
}

.op-shortcut--rdv .op-shortcut__icon {
	background: rgba(255, 255, 255, 0.45);
	color: var(--c-navy);
}

.op-shortcut--rdv .op-shortcut__title,
.op-shortcut--rdv .op-shortcut__sub {
	color: var(--c-navy);
}

.op-shortcut--pathologies {
	background: var(--c-blue-pale);
}

.op-shortcut--pathologies .op-shortcut__icon {
	background: var(--c-white);
	color: var(--c-navy);
}

.op-shortcut--pathologies .op-shortcut__title {
	color: var(--c-navy);
}

.op-shortcut--pathologies .op-shortcut__sub {
	color: var(--c-gray);
}

.op-shortcut--contact {
	background: var(--c-blue-pale);
}

.op-shortcut--contact .op-shortcut__icon {
	background: var(--c-white);
	color: var(--c-navy);
}

.op-shortcut--contact .op-shortcut__title {
	color: var(--c-navy);
}

.op-shortcut--contact .op-shortcut__sub {
	color: var(--c-gray);
}

/* Survol : la surface change, jamais l'opacité ni l'échelle. */
a.op-shortcut--pathologies:hover,
a.op-shortcut--contact:hover {
	background: var(--c-rule);
	opacity: 1;
}

a.op-shortcut--rdv:hover {
	background: var(--grad-gold-hover);
	opacity: 1;
}

/* ── Services ─────────────────────────────────────────────────────── */

/* Section contenue, sur blanc. Les filets verticaux bord à bord de la
   référence sont abandonnés : le Design Lock sépare par l'espace, pas par
   le trait. Tête de section détachée de la grille. */
.op-services {
	background: var(--c-white);
}

.op-services .op-container {
	padding: var(--sp-section) 0;
}

/* Tête de section : surétiquette, titre et introduction forment un groupe,
   le lien affirmé se cale à droite sur la ligne de base. */
.op-services__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-bottom: var(--sp-group);
}

.op-services__head-text {
	max-width: 34rem;
}

.op-services__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-services__text {
	margin: 1rem 0 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* Trois cartes de service, trois colonnes : la grille correspond exactement
   au contenu du pattern, aucune colonne ne reste vide. */
.op-services__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.875rem;
	align-items: start;
}

/* Carte menant à la page Nos services : le lien est porté par le titre puis
   étiré à toute la carte via son pseudo-élément (lien étiré), pour que le nom
   annoncé au lecteur d'écran reste le titre du service, pas la carte entière.
   Sans URL de destination (réglage vide), la carte reste statique. */
.op-svc-card {
	position: relative;
	min-width: 0;
}

.op-svc-card__img {
	width: 100%;
	aspect-ratio: 4 / 3;
	margin-bottom: 2rem;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-svc-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 160ms ease-out;
}

/* Survol : la vignette s'éclaircit légèrement, comme sur .op-artcard. Pas de
   soulèvement, pas d'ombre portée, pas de changement d'échelle (Design Lock). */
.op-svc-card--lien:hover .op-svc-card__img img {
	opacity: 0.88;
}

.op-svc-card__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-svc-card__title a {
	color: inherit;
	text-decoration: none;
}

.op-svc-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.op-svc-card__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* Anneau de focus étendu à la carte entière plutôt qu'au seul titre. Repli
   pour les navigateurs sans :has() : l'anneau reste visible autour du titre,
   déjà posé par la règle globale a:focus-visible de main.css. */
@supports selector(:has(a)) {
	.op-svc-card__title a:focus-visible {
		outline: none;
	}

	.op-svc-card--lien:has(.op-svc-card__title a:focus-visible) {
		outline: 0.1875rem solid var(--op-focus);
		outline-offset: 0.25rem;
	}
}

/* ── Preuve : plateau technique ───────────────────────────────────────
   Le « dispositif de preuve » du brief. À gauche l'affirmation et son
   action de niveau 2 ; à droite les preuves chiffrées, en rangées à filet.
   Les chiffres sont statiques : l'odomètre a été retiré au lot 1. */

.op-about {
	background: var(--c-blue-pale);
}

/* 6.875rem, et non --sp-section : le Design Lock respire moins large sur les
   surfaces pâles que sur les sections blanches. */
.op-about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5rem;
	align-items: start;
	padding: 6.875rem 0;
}

.op-about__body {
	max-width: 26rem;
}

/* La surétiquette de ce bloc est plus détachée de son titre que celle d'une
   SectionHead : 1.75rem, valeur de la source. */
.op-about .op-eyebrow {
	margin-bottom: 1.75rem;
}

.op-about__title {
	margin: 0 0 1.5rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-about__intro {
	margin: 0 0 1.5rem;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--c-gray);
}

.op-about__btn {
	margin: 1rem 0 0;
}

/* Une preuve par rangée, chiffre en tête. Le filet bas les sépare ; la
   dernière n'en porte pas, la section s'arrête là. */
.op-counters {
	display: flex;
	flex-direction: column;
}

.op-counter {
	display: flex;
	align-items: baseline;
	gap: 1.5rem;
	padding: 2rem 0;
	box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule-pale);
}

.op-counter:last-child {
	box-shadow: none;
}

.op-counter__num {
	flex-shrink: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--c-navy);
	/* Chiffres à chasse fixe : le compteur GSAP ne fait pas danser la
	   largeur du bloc pendant le défilement de 0 à la valeur finale. */
	font-variant-numeric: tabular-nums;
}

.op-counter__suffix {
	color: inherit;
}

.op-counter__label {
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.375rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* ── Pathologies ──────────────────────────────────────────────────── */

.op-pathos {
	background: var(--c-blue-pale);
}

.op-pathos .op-container {
	padding: 6.875rem 0;
}

.op-pathos__head {
	max-width: 34rem;
	margin-bottom: 2.75rem;
}

.op-pathos__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Trois pathologies, puis la carte de synthèse vers la liste complète. */
.op-pathos__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.5rem;
	align-items: stretch;
}

.op-patho-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.op-patho-card__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: 1.5rem;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-patho-card__img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.op-patho-card__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-card__text {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--c-gray);
}

/* Carte reliée à sa fiche : toute la carte est cliquable depuis le lien du
   titre (pseudo-élément étiré), comme les cartes de services. */
.op-patho-card--lien {
	position: relative;
}

.op-patho-card__title a {
	color: inherit;
	text-decoration: none;
}

.op-patho-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.op-patho-card__img img {
	transition: opacity 160ms ease-out;
}

/* Vignette dessinée (en attendant des photos du centre) : fond bleu pâle,
   dessin centré qui occupe le cadre. */
.op-patho-card__img--ig {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--c-blue-pale);
}

.op-patho-card__img--ig svg {
	display: block;
	width: 100%;
	height: 100%;
}

.op-patho-card--lien:hover .op-patho-card__img img {
	opacity: 0.88;
}

.op-patho-card--lien:hover .op-patho-card__title a {
	text-decoration: underline;
	text-decoration-color: var(--c-gold);
	text-decoration-thickness: 0.125rem;
	text-underline-offset: 0.25rem;
}

@supports selector(:has(*)) {
	.op-patho-card__title a:focus-visible {
		outline: none;
	}

	.op-patho-card--lien:has(.op-patho-card__title a:focus-visible) {
		outline: 0.1875rem solid var(--op-focus);
		outline-offset: 0.25rem;
	}
}

/* Carte de synthèse : surface blanche cerclée d'un filet, pas de dégradé
   doré — le doré est réservé à l'action de niveau 1. */
.op-patho-more {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	padding: 2.5rem;
	background: var(--c-white);
	box-shadow: inset 0 0 0 0.0625rem var(--c-rule-pale);
	border-radius: var(--r-panel);
	transition: background-color 160ms ease-out;
}

.op-patho-more:hover {
	background: var(--c-rule);
	opacity: 1;
}

.op-patho-more__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.875rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-patho-more__text {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1rem;
	color: var(--c-navy);
	transition: gap 160ms ease-out;
}

.op-patho-more__text::after {
	content: '';
	width: 0.4375rem;
	height: 0.4375rem;
	border-right: 0.09375rem solid currentColor;
	border-top: 0.09375rem solid currentColor;
	transform: rotate(45deg);
	flex-shrink: 0;
}

.op-patho-more:hover .op-patho-more__text {
	gap: 1.375rem;
}

/* La croix décorative de la référence disparaît : le renvoi est porté par
   le lien affirmé. */
.op-patho-more__cross {
	display: none;
}

/* ── Témoignages ──────────────────────────────────────────────────── */

/* Carousel ton « dark » : surface profonde, citation seule, plus de photo.
   La colonne de texte occupe désormais toute la largeur du conteneur. */
.op-testimonials {
	background: var(--c-navy-footer);
}

.op-testimonials__grid {
	padding: 6.25rem 0;
}

.op-tslider {
	position: relative;
}

.op-tslider__viewport {
	overflow: hidden;
}

.op-tslider__track {
	display: flex;
	transition: transform 200ms ease-out;
}

/* La diapositive occupe toute la fenêtre : c'est ce qui garantit qu'une seule
   citation est visible et que la translation de 100 % tombe juste. La mesure
   de 52rem de la source porte sur la colonne de texte, pas sur la
   diapositive ; l'y poser laissait dépasser le témoignage suivant. */
.op-tslide {
	flex: 0 0 100%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.op-tslide > * {
	max-width: 52rem;
}

/* Sur la surface profonde les étoiles sont blanches, non dorées : c'est le
   ton « dark » de la source. */
.op-tslide__stars {
	display: inline-flex;
	gap: 0.3em;
	margin-bottom: 2rem;
	color: var(--c-white);
}

.op-tslide blockquote {
	margin: 0 0 2rem;
}

.op-tslide blockquote p {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--c-white);
}

.op-tslide figcaption {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--c-rule-pale);
}

/* Segments de progression à gauche, contrôles ronds à droite. */
.op-tslider__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 4.375rem;
}

.op-tslider__dots {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.op-tslider__dots:empty {
	display: none;
}

/* Segment de progression, non cliquable : il informe, il ne commande pas. */
.op-tslider__dot {
	width: 3rem;
	height: 0.125rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.35);
	border: 0;
	border-radius: 0;
	transition: background-color 200ms ease-out;
}

.op-tslider__dot.is-active {
	background: var(--c-white);
}

.op-tslider__arrows {
	display: flex;
	gap: 1rem;
}

/* IconControl : cercle de 3.5rem, chevron du système recalé optiquement. */
.op-tslider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	padding: 0;
	background: rgba(255, 255, 255, 0.16);
	color: var(--c-white);
	border: 0;
	border-radius: var(--r-pill);
	cursor: pointer;
	transition: background-color 160ms ease-out, color 160ms ease-out;
}

/* display:inline-flex écraserait le masquage natif quand le script cache les
   flèches (témoignage unique) : la règle doit être explicite. */
.op-tslider__arrow[hidden] {
	display: none;
}

.op-tslider__arrow::after {
	content: '';
	width: 0.5625rem;
	height: 0.5625rem;
	border-right: 0.09375rem solid currentColor;
	border-top: 0.09375rem solid currentColor;
}

.op-tslider__arrow--prev::after {
	transform: rotate(-135deg) translate(-0.125rem, -0.125rem);
}

.op-tslider__arrow--next::after {
	transform: rotate(45deg) translate(-0.125rem, 0.125rem);
}

/* Le suivant porte le ton blanc : c'est le sens de lecture par défaut. */
.op-tslider__arrow--next {
	background: var(--c-white);
	color: var(--c-navy);
}

.op-tslider__arrow:hover {
	background: var(--c-white);
	color: var(--c-navy);
}

/* Pas de bouclage : l'extrémité désactive sa flèche au lieu de la masquer,
   la place du contrôle ne bouge donc jamais. */
.op-tslider__arrow[aria-disabled="true"] {
	background: var(--c-blue-pale);
	color: var(--c-disabled);
	cursor: default;
}

/* ── Contact ──────────────────────────────────────────────────────── */

/* HomeContact : surface pâle, plus de photographie de fond. À gauche
   l'invitation et les coordonnées, à droite le formulaire. */
.op-contact {
	background: var(--c-blue-pale);
}

.op-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	gap: 5rem;
	align-items: start;
	padding: 6.875rem 0;
}

.op-contact__title {
	margin: 0;
	max-width: 24rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Desktop : les coordonnées d'abord, l'action en dernier. L'ordre s'inverse
   en mobile, où le geste prime sur l'information. */
/* La surétiquette de ce bloc se détache de son titre à 1.5rem, le titre des
   coordonnées à 2rem : valeurs de la source. */
.op-contact .op-eyebrow {
	margin-bottom: 1.5rem;
}

.op-contact__coord {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.op-contact__btn {
	margin: 2.5rem 0 0;
}

/* Le champ contraste toujours avec sa surface porteuse : formulaire blanc,
   donc champs pâles. */
.op-contact-card {
	padding: 2.5rem 2.5rem 2.75rem;
	background: var(--c-white);
	border-radius: var(--r-panel);
}

/* Le formulaire de contact est partagé par l'accueil et la page Contact :
   ses classes .op-form* vivent dans main.css, chargé partout. */


/* ── Actualités ───────────────────────────────────────────────────── */

.op-news {
	background: var(--c-white);
}

.op-news .op-container {
	padding: var(--sp-section) 0;
}

.op-news__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2.5rem;
	margin-bottom: var(--sp-group);
}

.op-news__head-text {
	max-width: 34rem;
}

.op-news__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5rem;
	align-items: start;
}

/* ArticleCard variante « card » : visuel, date, titre, lien affirmé, dans
   cet ordre de lecture. Un seul groupe, donc des écarts serrés. */
.op-news-card {
	min-width: 0;
}

.op-news-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	margin-bottom: 1.25rem;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-news-card__img img,
.op-news-card__img .op-img-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Métadonnée : catégorie en casse naturelle, filet court, date. */
.op-news-card__date {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.625rem;
	font-family: var(--font-mono);
	font-size: 0.6875rem;
	line-height: 1.4;
	color: var(--c-gray);
}

.op-news-card__sep {
	width: 0.75rem;
	height: 0.0625rem;
	background: var(--c-rule-pale);
}

.op-news-card__title {
	margin: 0 0 1rem;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.op-news-card__title a {
	color: var(--c-navy);
}

.op-news-card__title a:hover {
	color: var(--c-navy);
	opacity: 1;
}

.op-news-card__more {
	margin: 0;
}

/* ── Marquee ──────────────────────────────────────────────────────── */

/* Bande statique : un mot, puis une rangée de vignettes dont la dernière est
   coupée par le bord — c'est l'affordance, à la place du défilement retiré au
   lot 1. Aucune animation, aucun script. */
.op-marquee {
	background: var(--c-white);
	padding: 6.875rem 0;
	overflow: hidden;
}

.op-marquee__word {
	margin: 0;
	padding: 0 var(--section-px);
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 7rem;
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--c-navy);
}

.op-marquee__row {
	display: flex;
	gap: 1.875rem;
	margin-top: 3.125rem;
	padding-left: var(--section-px);
}

.op-marquee__vignette {
	display: block;
	flex: 0 0 auto;
	width: 17rem;
	aspect-ratio: 4 / 3;
	border-radius: var(--r-media);
	overflow: hidden;
}

.op-marquee__vignette img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── FAQ ──────────────────────────────────────────────────────────── */

.op-faq {
	background: var(--c-white);
}

/* Tête de section à gauche, liste à droite : composition de la source. */
.op-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
	gap: 4rem;
	align-items: start;
	padding: 6.875rem 0;
}

.op-faq__head {
	max-width: 34rem;
}

.op-faq__title {
	margin: 0;
	font-family: var(--font-title);
	font-weight: 600;
	font-size: 2.75rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

/* Les rangées se touchent : leur filet bas fait la séparation, un écart en
   plus ferait lire une pile de cartes au lieu d'une liste. */
.op-faq__list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Rangée de liste, non carte : le filet bas suffit à séparer, et il disparaît
   quand la question est ouverte, la réponse prenant le relais. */
.op-faq-item {
	background: transparent;
	border-radius: 0;
	box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule);
}

.op-faq-item:has(.op-faq-item__toggle[aria-expanded="true"]) {
	box-shadow: none;
}

.op-faq-item__heading {
	margin: 0;
}

.op-faq-item__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	width: 100%;
	min-height: var(--op-tap);
	padding: 1.75rem 0;
	background: transparent;
	border: 0;
	text-align: left;
	cursor: pointer;
}

/* La graisse passe de 500 à 600 à l'ouverture : l'état n'est jamais porté
   par la seule couleur, ni par le seul chevron. */
.op-faq-item__question {
	font-family: var(--font-title);
	font-weight: 500;
	font-size: 1.25rem;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--c-navy);
}

.op-faq-item__toggle[aria-expanded="true"] .op-faq-item__question {
	font-weight: 600;
}

/* Chevron du système : bas fermé, haut ouvert. */
.op-faq-item__sign {
	position: relative;
	flex: 0 0 0.625rem;
	width: 0.625rem;
	height: 0.625rem;
	border-right: 0.09375rem solid var(--c-navy);
	border-top: 0.09375rem solid var(--c-navy);
	transform: rotate(135deg) translate(-0.15rem, 0.15rem);
	transition: transform 200ms ease-out;
}

.op-faq-item__toggle[aria-expanded="true"] .op-faq-item__sign {
	transform: rotate(-45deg) translate(-0.15rem, 0.15rem);
}

.op-faq-item__panel {
	overflow: hidden;
	transition: height 220ms ease-out;
}

.op-faq-item__panel p {
	margin: 0;
	padding: 0 0 1.75rem;
	max-width: 32rem;
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--c-gray);
}

/* ═════════════════════════════════════════════════════════════════
   Responsive
   ═════════════════════════════════════════════════════════════════ */

/* ── Tablette : 768 à 1279px ──────────────────────────────────────── */
/* Palier de transition : les grilles se réduisent, la composition reste
   celle du desktop. Les marges latérales ne sont pas retouchées ici — main.css
   ramène déjà --section-px à 40px, et .op-container suit. Les transformations
   mobiles approuvées (services 2×2, pathologies et articles en rangées, preuve
   condensée, contact réordonné) commencent à 767px. */

@media (max-width: 1279px) {
	/* Le Design Lock ne définit que desktop et mobile : en tablette on garde
	   la composition desktop. La respiration entre sections est portée par
	   --sp-section, déclaré dans main.css — le redéclarer ici l'emportait
	   jusqu'à 767px inclus, puisque home.css est chargé après main.css, et
	   la respiration desktop fuitait dans le mobile. */
	.op-hero {
		min-height: 44rem;
		padding: 0 var(--section-px) 5.625rem;
	}
	.op-shortcuts__wrap {
		grid-template-columns: 1fr;
	}
	.op-services__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.op-about__grid,
	.op-contact__grid {
		grid-template-columns: 1fr;
		gap: 3.125rem;
	}
	.op-about__body,
	.op-contact__title {
		max-width: none;
	}
	.op-pathos__row,
	.op-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.op-marquee__word {
		font-size: 5rem;
	}
}

/* ── Mobile : 767px et moins ──────────────────────────────────────── */
/* Composition mobile approuvée, et non une compression du desktop :
   raccourcis empilés, services en une colonne, pathologies et articles en
   rangées de liste, preuve condensée, contact ordonné action → coordonnées
   → formulaire.
   --sp-section vaut 4.375rem et --section-px 1.5rem, tous deux posés par
   main.css : aucune feuille de modèle ne doit les redéclarer. */

@media (max-width: 767px) {

	/* ── Hero ── */
	/* Hero mobile : cadrage propre au format portrait. Le sujet remonte dans
	   le tiers haut, ce qui dégage une zone calme sous lui pour le titre et
	   les deux actions. Le recadrage desktop est inchangé. */
	.op-hero {
		min-height: 33rem;
		padding: 0 var(--section-px) 3.125rem;
		background-position: 50% 25%;
	}
	.op-hero__title {
		margin-bottom: 1rem;
		max-width: 19rem;
		font-size: clamp(1.75rem, calc(2.375rem * var(--op-display)), 3.5rem);
	}
	.op-hero__texte {
		margin-bottom: 2rem;
		max-width: 20rem;
		font-size: 1rem;
	}
	.op-hero__actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}
	.op-hero__actions .op-btn {
		width: 100%;
	}
	/* Sur mobile les deux actions forment une paire de pilules : le renvoi
	   secondaire quitte le lien affirmé pour un contour blanc de niveau 2,
	   afin que le groupe se lise d'un seul tenant sous le titre. Le traitement
	   desktop, lui, reste le lien affirmé — cette règle est mobile seulement. */
	.op-hero__lien {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0;
		width: 100%;
		min-height: var(--op-tap);
		padding: 1rem 2rem;
		background: transparent;
		border-radius: var(--r-pill);
		box-shadow: inset 0 0 0 0.0625rem var(--c-white);
		font-family: var(--font-title);
		font-weight: 600;
		font-size: 1rem;
		line-height: 1.25;
		letter-spacing: -0.01em;
		color: var(--c-white);
	}
	.op-hero__lien::after {
		display: none;
	}
	.op-hero__lien:hover {
		background: var(--c-white);
		color: var(--c-navy);
	}

	/* ── Raccourcis : intertitre puis grandes actions empilées ── */
	.op-shortcuts .op-container {
		gap: 1.125rem;
		padding: 3.125rem 0 3.125rem;
	}
	.op-shortcuts__title {
		font-size: 1.25rem;
	}
	.op-shortcuts__wrap {
		gap: 0.75rem;
	}
	.op-shortcut {
		min-height: 5.75rem;
		padding: 1rem 1.25rem;
		gap: 1rem;
	}
	.op-shortcut__icon {
		flex-basis: 2.5rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	/* ── Preuve : bloc condensé, bouton après les preuves ──
	   .op-about__body passe en display:contents pour que ses enfants
	   rejoignent la colonne de la section : c'est ce qui permet de placer le
	   bouton après les preuves sans toucher au markup. */
	/* gap:0 volontaire : les enfants deviennent frères par display:contents,
	   et une gouttière commune écraserait le rapprochement surétiquette-titre.
	   Chaque écart est donc porté par sa propre marge. */
	.op-about__grid {
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 4.375rem 0;
	}
	.op-about__body {
		display: contents;
	}
	.op-about__body > .op-eyebrow {
		order: 0;
	}
	.op-about__title {
		order: 1;
		margin: 0 0 2rem;
		font-size: 1.875rem;
	}
	/* Le texte d'introduction tombe en mobile : la preuve chiffrée porte
	   l'argument à elle seule (Design Lock, ProofBlock condensé). */
	.op-about__intro {
		display: none;
	}
	.op-counters {
		order: 2;
		gap: 1.25rem;
		margin-bottom: 2.5rem;
	}
	.op-about__btn {
		order: 3;
		margin: 0;
	}
	.op-about__btn .op-btn {
		width: 100%;
	}
	/* Preuve condensée : chiffre et libellé sur une ligne, sans filet. */
	.op-counter {
		gap: 1rem;
		padding: 0;
		box-shadow: none;
	}
	.op-counter__num {
		font-size: 1.75rem;
	}
	.op-counter__label {
		font-size: 1.1875rem;
	}

	/* ── Services : une colonne de cartes compactes ── */
	.op-services__head {
		display: block;
		margin-bottom: 2rem;
	}
	.op-services__head-text {
		max-width: none;
	}
	.op-services__title {
		font-size: 1.875rem;
	}
	.op-services__text {
		display: none;
	}
	.op-services__lien {
		margin-top: 1.25rem;
	}
	/* Une seule colonne : deux cartes de service côte à côte à 390px donnent
	   des visuels minuscules et des colonnes de texte trop étroites. */
	.op-services__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
	/* Visuel pleine largeur à la hauteur de la source, écarts internes de la
	   carte à 1rem. Le corps ne descend jamais sous 0.9375rem. */
	.op-svc-card__img {
		height: 9.5rem;
		margin-bottom: 1rem;
	}
	.op-svc-card__title {
		font-size: 1.125rem;
	}
	.op-svc-card__text {
		font-size: 0.9375rem;
	}

	/* ── Pathologies : rangées de liste, plus de cartes illustrées ── */
	.op-pathos .op-container {
		padding: 4.375rem 0;
	}
	.op-pathos__head {
		max-width: none;
		margin-bottom: 2rem;
	}
	.op-pathos__title {
		font-size: 1.875rem;
	}
	.op-pathos__row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.op-patho-card {
		padding: 1.625rem 0;
		box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule-pale);
	}
	.op-patho-card__img {
		display: none;
	}
	.op-patho-card__title {
		margin-bottom: 0.375rem;
		font-size: 1.25rem;
	}
	.op-patho-card__text {
		font-size: 0.9375rem;
	}
	.op-patho-more {
		margin-top: 1.625rem;
		padding: 1.75rem 1.25rem;
	}
	.op-patho-more__title {
		font-size: 1.375rem;
	}

	/* ── Témoignages : glissement seul, contrôles masqués ── */
	.op-testimonials__grid {
		padding: var(--sp-section) 0;
	}
	.op-tslide blockquote p {
		font-size: 1.5rem;
	}
	.op-tslider__controls {
		margin-top: 2.5rem;
	}
	.op-tslider__arrows {
		display: none;
	}

	/* ── Actualités : une carte, puis deux rangées de liste ── */
	.op-news__head {
		display: block;
		margin-bottom: 2rem;
	}
	.op-news__head-text {
		max-width: none;
	}
	.op-news__title {
		font-size: 1.875rem;
	}
	.op-news__lien {
		margin-top: 1.25rem;
	}
	.op-news__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.op-news-card:first-child {
		margin-bottom: 1.25rem;
	}
	.op-news-card:nth-child(n+2) {
		padding: 1.625rem 0;
		box-shadow: inset 0 -0.0625rem 0 0 var(--c-rule);
	}
	.op-news-card:nth-child(n+2) .op-news-card__img,
	.op-news-card:nth-child(n+2) .op-news-card__more {
		display: none;
	}
	.op-news-card:nth-child(n+2) .op-news-card__title {
		margin-bottom: 0;
		font-size: 1.25rem;
	}

	/* ── Votre vision ── */
	/* Bandeau de marque : respiration courte de la source, et non deux fois
	   la respiration de section, qui laissait une large zone vide. */
	.op-marquee {
		padding: 2.5rem 0 3.125rem;
	}
	.op-marquee__word {
		font-size: 1.875rem;
	}
	.op-marquee__row {
		gap: 1rem;
		margin-top: 1.25rem;
	}
	.op-marquee__vignette {
		width: 9rem;
	}

	/* ── Contact : action, puis coordonnées, puis formulaire ── */
	.op-contact__grid {
		display: flex;
		flex-direction: column;
		gap: 2.5rem;
		padding: var(--sp-section) 0;
	}
	.op-contact__intro {
		display: flex;
		flex-direction: column;
	}
	.op-contact__intro > .op-eyebrow {
		order: 0;
	}
	.op-contact__title {
		order: 1;
		max-width: none;
		font-size: 1.875rem;
	}
	.op-contact__btn {
		order: 2;
		margin: 2rem 0 0;
	}
	.op-contact__btn .op-btn {
		width: 100%;
	}
	.op-contact__coord {
		order: 3;
		margin: 1.5rem 0 0;
		font-size: 0.9375rem;
	}
	.op-contact-card {
		padding: 1.75rem 1.25rem 2rem;
	}


	/* ── FAQ ── */
	/* La seule grille de l'accueil qui n'avait pas de composition mobile :
	   elle restait en deux colonnes 1fr / 1.2fr avec un écart de 4rem. À
	   390px les deux pistes ne pouvaient plus se réduire sous leur contenu
	   minimal et la page débordait de 54px vers la droite, seule cause du
	   défilement horizontal du document. La source donne ici une colonne,
	   écart 1.75rem, respiration 4.375rem. */
	.op-faq__grid {
		grid-template-columns: 1fr;
		gap: 1.75rem;
		padding: 4.375rem 0;
	}
	.op-faq-item__toggle {
		padding: 1.5rem 0;
		gap: 1.25rem;
	}
	.op-faq-item__question {
		font-size: 1.125rem;
	}
	.op-faq-item__panel p {
		padding: 0 0 1.5rem;
		font-size: 1rem;
	}
}

/* ── Aperçu éditorial ─────────────────────────────────────────────────
   Un article listable dont le corps n'est pas encore rédigé garde sa carte,
   mais elle ne mène nulle part : ni lien, ni survol, ni curseur de main. Le
   contenu reste exact — titre, visuel, métadonnée — et rien n'est inventé
   pour combler le manque. La carte redevient cliquable dès que l'article est
   écrit. */

.op-news-card--apercu,
.op-news-card--apercu .op-news-card__img {
	cursor: default;
}