/* ============================================================
   ANTINEO — feuille des gabarits du Theme Builder
   ============================================================

   POURQUOI UNE SECONDE FEUILLE. blocs.css habille le CORPS des pages
   reconstruites : tout y est porte sous `.atn-bloc`, parce que c'est ce que le
   reconstructeur fabrique. Celle-ci habille le CHROME et les gabarits : en-tete,
   pied, heros de page, appels a l'action, cartes de boucle, recherche, 404.
   Deux perimetres disjoints, deux fichiers, et un seul jeu de variables : les
   couleurs restent declarees une fois pour toutes dans le `:root` de blocs.css,
   servie avant celle-ci. Une couleur se change toujours a un seul endroit.

   ELLE EST INDISPENSABLE, PAS COSMETIQUE. Aucune des classes employees par les
   huit gabarits n'existait nulle part : ni `atn-head`, ni `atn-foot`, ni
   `atn-page-titre`, ni `atn-b1`. Un gabarit importe sans elle s'affiche en pile
   verticale, et le widget Site Logo sort le PNG a sa taille naturelle, soit un
   logo geant en haut de chaque page.

   AUCUN STYLE N'EST SAISI DANS LES WIDGETS, c'est la contrepartie : tout vit
   ici. Les selecteurs visent le balisage reel d'Elementor
   (`.elementor-heading-title`, `.elementor-nav-menu`), jamais un balisage a
   nous, ce qui permet au client de modifier un texte sans jamais toucher au
   style.
   ============================================================ */

/* ============================================================
   1. Rythme de section, commun a tous les gabarits
   ============================================================ */

.atn-sec {
	padding: clamp(56px, 7vw, 104px) 24px;
}

.atn-sec > .e-con-inner,
.atn-sec .atn-wrap {
	width: 100%;
	max-width: var(--max, 1200px);
	margin-inline: auto;
}

/*
 * SANS ENVELOPPE INTERNE, LA SECTION EST LE CONTENEUR DE CONTENU.
 *
 * Elementor 4 en content_width:full n'emet plus de `.e-con-inner` : il pose
 * `e-con-full` sur la section et y range les enfants directement. On ne peut
 * donc pas lui appliquer le max-width de l'enveloppe — ce serait contraindre la
 * SECTION, et les fonds violets cesseraient d'aller bord a bord.
 *
 * C'est la gouttiere qui centre le contenu : la section reste pleine largeur,
 * et son remplissage horizontal vaut la moitie du debordement au-dela de 1200
 * px, avec un minimum de 24 px sur petit ecran. Fond pleine largeur, contenu
 * aligne, un seul reglage.
 */
.atn-sec.e-con-full {
	max-width: none;
	padding-inline: max(24px, (100% - var(--max, 1200px)) / 2);
}

/* ============================================================
   2. En-tete
   ============================================================ */

/*
 * MOTIF REPRIS DE webplusseo.fr, a la demande du client de l'agence : barre
 * nue et collante, fond translucide avec flou d'arriere-plan, et le menu
 * entier dans un voile ouvert par un burger etiquete.
 *
 * On reprend la STRUCTURE et le COMPORTEMENT, jamais la marque : les couleurs,
 * la police et le rayon restent ceux de la charte Antineo. webplusseo.fr est en
 * Manrope, encre #262019 et rayon 2 px ; rien de tout cela n'a sa place ici.
 *
 * Le collant tient en une ligne, et surtout pas dans Motion Effects, qui charge
 * du JavaScript et decale la mise en page au chargement : le reproche numero un
 * du client.
 */
.atn-head {
	position: sticky;
	top: 0;
	z-index: 9998;
	padding: 0 40px;
	background: rgba(255, 255, 255, .88);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border-bottom: 1px solid var(--line, rgba(102, 51, 102, .14));
	transition: background-color .2s cubic-bezier(.2, 0, .2, 1), border-color .2s cubic-bezier(.2, 0, .2, 1);
}

/* Sans flou d'arriere-plan, la translucidite rend le texte illisible au
   defilement : on retombe sur un fond plein. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.atn-head {
		background: #fff;
	}
}

@media (max-width: 700px) {
	.atn-head {
		padding: 0 20px;
	}
}

.atn-head-in {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	max-width: var(--max, 1200px);
	margin-inline: auto;
	padding: 16px 0;
}

/*
 * LA REGLE QUI EVITE LE LOGO GEANT. Sans contrainte de hauteur, le widget Site
 * Logo sert le PNG a sa taille naturelle. C'est la premiere chose que l'on voit
 * d'un gabarit importe sans feuille.
 */
.atn-head .atn-logo,
.atn-head .elementor-widget-theme-site-logo {
	flex: none;
	margin: 0;
}

.atn-head .atn-logo img {
	display: block;
	height: 42px;
	width: auto;
	max-width: 100%;
	transition: opacity .2s cubic-bezier(.2, 0, .2, 1);
}

.atn-head .atn-logo:hover img {
	opacity: .82;
}

/* Les trois elements de droite forment un groupe : recherche, bouton, burger. */
.atn-head-in > .elementor-widget-search-form,
.atn-head-in > .atn-cta,
.atn-head-in > .atn-nav {
	flex: none;
}

.atn-search {
	margin-inline-start: auto;
}

/* ---------- Le burger, etiquete ----------

   Elementor rend `.elementor-menu-toggle` avec sa seule icone. Le libelle est
   ajoute ici : le bouton porte deja `aria-label`, ce texte est un reperage
   visuel, pas l'information accessible. C'est ce qui distingue un burger d'un
   pictogramme muet, et ce qui rend le motif utilisable sur grand ecran. */

.atn-nav .elementor-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--c2, #2F1639);
}

.atn-nav .elementor-menu-toggle::before {
	content: 'Menu';
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--c2, #2F1639);
}

.atn-nav .elementor-menu-toggle.elementor-active::before {
	content: 'Close';
}

/* ---------- Le voile ----------

   `layout: dropdown` fait sortir le menu en panneau, a toutes les largeurs.
   On l'etale sur toute la hauteur pour que les deux niveaux respirent : c'est
   la raison d'etre du motif, et la reponse au « menu trop abondant ». */

.atn-nav .elementor-nav-menu--dropdown {
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border-top: 1px solid var(--line, rgba(102, 51, 102, .14));
	box-shadow: 0 24px 60px rgba(31, 10, 31, .14);
	padding: clamp(24px, 4vw, 52px) clamp(20px, 5vw, 64px);
	max-height: calc(100vh - 76px);
	overflow-y: auto;
}

.atn-nav .elementor-nav-menu--dropdown a {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(17px, 1.9vw, 22px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--c2, #2F1639);
	padding: 11px 0;
	border: 0;
}

.atn-nav .elementor-nav-menu--dropdown a:hover,
.atn-nav .elementor-nav-menu--dropdown a.elementor-item-active {
	color: var(--primary, #663366);
	background: transparent;
}

/* Second niveau : plus petit, en retrait, jamais en gras. La hierarchie doit se
   lire sans avoir a cliquer, sinon on a juste deplace le probleme. */
.atn-nav .elementor-nav-menu--dropdown ul a {
	font-size: 15px;
	font-weight: 400;
	color: var(--muted, #6a6472);
	padding: 7px 0 7px 22px;
}

.atn-nav .elementor-nav-menu--dropdown ul a:hover {
	color: var(--primary, #663366);
}

/* Le bouton d'en-tete disparait quand la barre devient trop courte, par la
   feuille et non par les reglages responsive du widget : le point de rupture
   utile n'est pas un des trois d'Elementor. */
@media (max-width: 1080px) {
	.atn-head .atn-cta {
		display: none;
	}
}

/* ============================================================
   3. Boutons : le degrade balaye de la charte
   ============================================================

   Le degrade compte quatre arrets, etale sur 200 % de largeur : au survol la
   position de fond glisse et produit un balayage. C'est « l'esthetique des
   boutons » que le client demande explicitement de conserver.
   ============================================================ */

.atn-b1 .elementor-button,
.atn-cta .elementor-button,
.atn-btn-plein .elementor-button {
	background-image: var(--btn-gradient, linear-gradient(76.85deg, #642C7A 5%, #2F1639 45%, #2F1639 55%, #642C7A 95%));
	background-size: 200% 100%;
	background-position-x: 0%;
	color: #fff;
	border: 0;
	border-radius: var(--radius, 12px);
	padding: 14px 26px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 15px;
	font-weight: 600;
	transition: background-position-x .5s ease;
}

.atn-b1 .elementor-button:hover,
.atn-cta .elementor-button:hover,
.atn-btn-plein .elementor-button:hover {
	background-position-x: 100%;
	color: #fff;
}

/* Bouton secondaire : meme geometrie, trait plutot que plein. Le second appel a
   l'action ne doit pas rivaliser avec le premier. */
.atn-b2 .elementor-button,
.atn-btn-ligne .elementor-button {
	background: transparent;
	color: var(--primary, #663366);
	border: 1px solid var(--primary, #663366);
	border-radius: var(--radius, 12px);
	padding: 13px 25px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 15px;
	font-weight: 600;
	transition: background-color .25s ease, color .25s ease;
}

.atn-b2 .elementor-button:hover,
.atn-btn-ligne .elementor-button:hover {
	background: var(--primary, #663366);
	color: #fff;
}

/* ============================================================
   4. Heros de page, fil d'Ariane, titres
   ============================================================ */

.atn-page-hero {
	padding-bottom: clamp(24px, 3vw, 40px);
}

.atn-fil {
	font-size: 13.5px;
	color: var(--muted, #6a6472);
	margin-bottom: 18px;
}

.atn-fil a {
	color: var(--muted, #6a6472);
	text-decoration: none;
}

.atn-fil a:hover {
	color: var(--primary, #663366);
	text-decoration: underline;
}

/*
 * Le fil d'Ariane ne rend rien tant que Rank Math ne l'a pas active, et rien du
 * tout en mode edition. Sans cette garde, un vide de 18 px flotte en tete de
 * 1050 pages.
 */
.atn-fil:empty {
	display: none;
}

.atn-page-titre .elementor-heading-title,
.atn-404-titre .elementor-heading-title,
.atn-cat-titre .elementor-heading-title {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(30px, 4vw, 50px);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--c2, #2F1639);
	margin: 0;
}

/* Sur-titre. Une div, jamais un titre : en H6 il fabriquerait un saut de niveau
   sous le H1, sur toutes les pages a la fois. */
.atn-eyebrow .elementor-heading-title {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary, #663366);
	margin: 0 0 14px;
}

.atn-lede .elementor-widget-container {
	font-size: 17.5px;
	line-height: 1.65;
	color: var(--muted, #6a6472);
	max-width: 62ch;
}

.atn-enfants-titre .elementor-heading-title {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--c2, #2F1639);
	margin: 0 0 26px;
}

/* Metadonnees d'article. Aucun modele n'existait pour cette classe. */
.atn-meta .elementor-heading-title,
.atn-meta .elementor-post-info__item {
	font-size: 12.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted, #6a6472);
}

/* Un seul article sur 56 porte des etiquettes : la garde vise le conteneur de
   widget, jamais l'element interne. Elementor abandonne l'ecriture du conteneur
   quand la sortie est vide, et la marge residuelle vient du rythme vertical. */
.atn-meta:not(:has(.elementor-heading-title)) {
	display: none;
}

/* ============================================================
   5. Corps de page et extension au widget Post Content
   ============================================================

   blocs.css porte ses 24 regles de contenu sous
   `.atn-bloc .elementor-widget-text-editor`, parce que le reconstructeur
   fabrique des Text Editor. Les gabarits, eux, servent le contenu par le widget
   Post Content, qui sort en `.elementor-widget-theme-post-content` : classe que
   blocs.css ne vise pas. Sans le pont ci-dessous, les 56 articles, les 12
   publications, les 16 pages a corps classique et les fiches modeles redigees
   sortent sans listes, sans tableaux et sans liens soulignes.
   ============================================================ */

.atn-page-corps {
	padding: 0;
}

.elementor-widget-theme-post-content > .elementor-widget-container {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--text, #1b1e23);
}

.elementor-widget-theme-post-content h2 {
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	letter-spacing: -.02em;
	line-height: 1.2;
	margin: 2em 0 .6em;
	color: var(--c2, #2F1639);
}

.elementor-widget-theme-post-content h3 {
	font-size: clamp(18px, 1.7vw, 22px);
	font-weight: 600;
	margin: 1.6em 0 .5em;
	color: var(--c2, #2F1639);
}

.elementor-widget-theme-post-content p {
	margin: 0 0 1.15em;
}

.elementor-widget-theme-post-content ul {
	margin: 0 0 1.15em;
	padding-inline-start: 1.3em;
	list-style: none;
}

.elementor-widget-theme-post-content ul > li {
	position: relative;
	margin-bottom: .5em;
}

.elementor-widget-theme-post-content ul > li::before {
	content: '';
	position: absolute;
	inset-inline-start: -1.1em;
	top: .62em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--primary, #663366);
}

.elementor-widget-theme-post-content ol {
	margin: 0 0 1.15em;
	padding-inline-start: 1.4em;
}

.elementor-widget-theme-post-content a {
	color: var(--primary, #663366);
	text-decoration: underline;
	text-underline-offset: .18em;
}

.elementor-widget-theme-post-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.4em;
	font-size: 15px;
}

.elementor-widget-theme-post-content th,
.elementor-widget-theme-post-content td {
	border: 1px solid var(--line, rgba(102, 51, 102, .14));
	padding: 10px 13px;
	text-align: start;
}

.elementor-widget-theme-post-content th {
	background: var(--v-10, #f9f3f9);
	font-weight: 600;
}

.elementor-widget-theme-post-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius, 12px);
}

/* Les neuf articles qui portent un PDF le rendent en lien nu dans le corps.
   L'habiller ici evite un widget de plus, et la regle vaut pour tous. */
.elementor-widget-theme-post-content a[href$='.pdf'] {
	display: inline-block;
	text-decoration: none;
	border: 1px solid var(--primary, #663366);
	border-radius: var(--radius, 12px);
	padding: 9px 17px;
	font-weight: 600;
	font-size: 15px;
}

.elementor-widget-theme-post-content a[href$='.pdf']:hover {
	background: var(--primary, #663366);
	color: #fff;
}

/* ============================================================
   6. Appel a l'action de pied de gabarit
   ============================================================ */

.atn-page-cta {
	background: var(--v-05, #faf5fa);
	border-top: 1px solid var(--line, rgba(102, 51, 102, .14));
	text-align: center;
}

.atn-page-cta > .e-con-inner,.atn-page-cta.e-con-full {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.atn-cta-titre .elementor-heading-title {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(24px, 2.8vw, 34px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--c2, #2F1639);
	margin: 0 0 10px;
}

.atn-cta-texte .elementor-widget-container {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--muted, #6a6472);
	max-width: 56ch;
	margin: 0 auto 22px;
}

.atn-page-cta .elementor-widget-button {
	display: inline-block;
	margin: 0 6px;
}

/* ============================================================
   7. Carte de boucle
   ============================================================ */

/*
 * Le lien est porte par le conteneur, pas par le titre : une carte dont seul le
 * texte est cliquable est une carte cassee. La feuille doit donc rendre toute la
 * surface visiblement active.
 */
.atn-carte-page {
	background: #fff;
	border: 1px solid var(--line, rgba(102, 51, 102, .14));
	border-radius: var(--radius, 12px);
	padding: 24px 26px;
	min-height: 128px;
	display: flex;
	align-items: center;
	transition: border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}

.atn-carte-page:hover {
	border-color: var(--primary, #663366);
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(31, 10, 31, .09);
}

.atn-carte-page .elementor-heading-title {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.32;
	letter-spacing: -.015em;
	color: var(--c2, #2F1639);
	margin: 0;
}

/* ============================================================
   8. Recherche et 404
   ============================================================ */

.atn-search-form input[type='search'],
.atn-404-recherche input[type='search'] {
	border: 1px solid var(--line, rgba(102, 51, 102, .14));
	border-radius: var(--radius, 12px);
	padding: 13px 17px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 15.5px;
}

.atn-search-liste .elementor-post {
	border-bottom: 1px solid var(--line, rgba(102, 51, 102, .14));
	padding-bottom: 22px;
	margin-bottom: 22px;
}

.atn-search-liste .elementor-post__title a {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 19px;
	font-weight: 600;
	color: var(--c2, #2F1639);
	text-decoration: none;
}

.atn-search-liste .elementor-post__title a:hover {
	color: var(--primary, #663366);
}

.atn-404-liens .elementor-icon-list-items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
}

.atn-404-liens .elementor-icon-list-item {
	background: var(--v-10, #f9f3f9);
	border-radius: 999px;
	padding: 9px 17px;
}

.atn-404-liens .elementor-icon-list-text {
	font-size: 14.5px;
	font-weight: 500;
	color: var(--primary, #663366);
}

/* ============================================================
   9. Pied de page
   ============================================================ */

.atn-foot {
	background: var(--c2, #2F1639);
	color: var(--text-ondark, #ecf1fb);
	padding: clamp(48px, 5.5vw, 78px) 24px clamp(28px, 3vw, 40px);
}

.atn-foot-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
	max-width: var(--max, 1200px);
	margin-inline: auto;
}

@media (max-width: 900px) {
	.atn-foot-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.atn-foot-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Le fond du pied est presque noir. Si le logo est violet fonce sur transparent,
 * il y disparait. La variante blanche se pose en mediatheque ; en attendant,
 * cette regle le rend lisible sans filtre saisi dans le widget.
 */
.atn-foot .atn-logo img {
	display: block;
	max-height: 46px;
	width: auto;
	margin-bottom: 16px;
}

.atn-foot,
.atn-foot .elementor-widget-container {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 14.5px;
	line-height: 1.7;
	color: rgba(236, 241, 251, .78);
}

.atn-foot-title .elementor-heading-title {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}

.atn-foot .elementor-nav-menu > li > a {
	padding: 5px 0;
	font-size: 14.5px;
	color: rgba(236, 241, 251, .78);
}

.atn-foot .elementor-nav-menu > li > a:hover {
	color: #fff;
}

.atn-foot-coord .elementor-icon-list-item {
	margin-bottom: 9px;
	align-items: flex-start;
}

.atn-foot-coord .elementor-icon-list-icon svg,
.atn-foot-coord .elementor-icon-list-icon i {
	color: var(--secondary, #dfba84);
	font-size: 14px;
}

.atn-foot-coord a {
	color: rgba(236, 241, 251, .78);
	text-decoration: none;
}

.atn-foot-coord a:hover {
	color: #fff;
}

.atn-foot-social {
	margin-top: 16px;
}

/*
 * Les colonnes du pied et de la mention ethique n'ont pas de regle propre : la
 * grille parente les positionne, et leur donner une largeur ici la contredirait.
 * La seule exception est la colonne de marque, dont la phrase de presentation
 * courrait sinon sur toute la largeur de la colonne, illisible.
 */
.atn-foot-brand p {
	max-width: 34ch;
}

/* -- Mention ethique bilingue ------------------------------------------- */

.atn-ethic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 34px;
	max-width: var(--max, 1200px);
	margin: clamp(36px, 4vw, 54px) auto 0;
	padding-top: clamp(28px, 3vw, 38px);
	border-top: 1px solid var(--line-dark, rgba(236, 241, 251, .16));
}

@media (max-width: 760px) {
	.atn-ethic {
		grid-template-columns: 1fr;
	}
}

.atn-lang .elementor-heading-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--secondary, #dfba84);
	margin: 0 0 10px;
}

.atn-ethic a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: .18em;
}

/* -- Barre basse -------------------------------------------------------- */

.atn-foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	max-width: var(--max, 1200px);
	margin: clamp(30px, 3.5vw, 44px) auto 0;
	padding-top: 22px;
	border-top: 1px solid var(--line-dark, rgba(236, 241, 251, .16));
	font-size: 13.5px;
	color: rgba(236, 241, 251, .58);
}

.atn-foot-legal .elementor-nav-menu {
	display: flex;
	gap: 20px;
}

.atn-foot-legal .elementor-nav-menu > li > a {
	padding: 0;
	font-size: 13.5px;
}

/* ============================================================
   10. Archive
   ============================================================ */

.atn-cat-filtres {
	padding: 0 24px clamp(18px, 2vw, 28px);
}

.atn-cat-filtres > .e-con-inner {
	max-width: var(--max, 1200px);
	margin-inline: auto;
}

/* Ce conteneur ne porte aucun fond : le contraindre directement serait sans
   danger. On emploie tout de meme la gouttiere, pour que la barre de filtres
   s'aligne au pixel pres sur les sections qui l'entourent. */
.atn-cat-filtres.e-con-full {
	max-width: none;
	padding-inline: max(24px, (100% - var(--max, 1200px)) / 2);
}

/* ============================================================
   11. FAQ des articles
   ============================================================

   Accordeon natif : `details` et `summary`, zero JavaScript. Le navigateur sait
   ouvrir et fermer, au clavier comme a la souris, et le contenu reste lisible
   si cette feuille ne charge pas. Sur un site dont le grief numero un est le
   temps de chargement, c'est le bon compromis.
   ============================================================ */

.atn-faq {
	margin: clamp(32px, 4vw, 52px) 0 0;
}

.atn-faq-titre.elementor-heading-title,
.atn-faq > h2 {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--c2, #2F1639);
	margin: 0 0 20px;
}

.atn-faq-item {
	border-bottom: 1px solid var(--line, rgba(102, 51, 102, .14));
}

.atn-faq-item:first-of-type {
	border-top: 1px solid var(--line, rgba(102, 51, 102, .14));
}

.atn-faq-item > summary {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	cursor: pointer;
	padding: 18px 0;
	list-style: none;
}

/* Le triangle par defaut de Safari et de Chrome se retire par deux chemins
   differents, aucun des deux n'etant universel. */
.atn-faq-item > summary::-webkit-details-marker {
	display: none;
}

.atn-faq-item > summary::after {
	content: '+';
	margin-inline-start: auto;
	flex: none;
	font-size: 22px;
	line-height: 1;
	font-weight: 400;
	color: var(--primary, #663366);
	transition: transform .2s ease;
}

.atn-faq-item[open] > summary::after {
	content: '\2212';
}

.atn-faq-q {
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.01em;
	color: var(--c2, #2F1639);
	margin: 0;
}

.atn-faq-item > summary:hover .atn-faq-q {
	color: var(--primary, #663366);
}

.atn-faq-r {
	padding: 0 40px 22px 0;
	font-size: 16px;
	line-height: 1.7;
	color: var(--text, #1b1e23);
}

.atn-faq-r p:last-child {
	margin-bottom: 0;
}

/* ==================================================================
   CATALOGUE DES MODELES — archive /models/
   ==================================================================

   DISPOSITION ET PALETTE REPRISES DU MODEL EXPLORER DE PIERRE, a la
   demande d'Antineo : panneau de criteres a gauche, tableau a droite,
   fond lavande, pastilles de couleur par type. Les valeurs viennent de
   son fichier, relevees une a une.

   Les couleurs sont declarees sur `.atn-cat` et non sur `:root` : elles
   ne valent que pour le catalogue et ne debordent pas sur le reste du
   site, qui garde sa charte.

   La police reste celle du site. Pour les micro-libelles, Pierre charge
   IBM Plex Mono ; on emploie la chasse fixe du systeme, qui donne le
   meme registre « technique » sans requete supplementaire.
   ================================================================== */

/* La palette vaut pour le catalogue ET pour les sections de la fiche
   modele, qui prolonge le tableau d'ou l'on vient. */
.atn-cat,
.atn-model-hero,
.atn-model-corps,
.atn-model-cta,
.atn-model-liens {
	--cat-bg: #EFEAF8;
	--cat-paper: #FFFFFF;
	--cat-line: #DCD4EF;
	--cat-ink: #1E1A2E;
	--cat-ink-soft: #5C5570;
	--cat-ink-faint: #948CAA;
	--cat-teal: #0E7A6E;
	--cat-teal-deep: #0A5A51;
	--cat-teal-tint: #E3F1EE;
	--cat-indigo: #5C4AA8;
	--cat-indigo-tint: #EBE6F8;
	--cat-amber: #B6791A;
	--cat-amber-tint: #FBF0DD;
	--cat-rust: #B23A3A;
	--cat-rust-tint: #F8E4E1;
	--cat-prune: #663366;
	--cat-radius: 10px;
	--cat-shadow: 0 1px 2px rgba(30, 26, 46, .06), 0 8px 24px -12px rgba(30, 26, 46, .14);
	--cat-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

	/* Une seule definition des colonnes, partagee par l'en-tete et par
	   chaque ligne : c'est ce qui les garde alignees. */
	--cat-cols: 22% 12% 20% 28% 18%;
}

.atn-cat {
	background: var(--cat-bg);
	color: var(--cat-ink);
}

/* ---------- En-tete : titre a gauche, total a droite ---------- */

.atn-cat-tete {
	--flex-direction: row;
	--align-items: flex-end;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 24px;
	padding-bottom: 18px;
	margin: 10px 0 24px;
	border-bottom: 2px solid var(--cat-ink);
}

.atn-cat-tete-txt {
	flex: 1 1 420px;
	min-width: 0;
}

.atn-cat .atn-cat-titre .elementor-heading-title {
	color: var(--cat-ink);
}

.atn-cat-lede {
	max-width: 62ch;
	margin-top: 10px;
}

.atn-cat-lede p {
	font-size: 15px;
	line-height: 1.55;
	color: var(--cat-ink-soft);
	margin: 0;
}

.atn-cat-total-bloc {
	flex: none;
	width: auto;
}

p.atn-cat-total {
	margin: 0;
	text-align: right;
	font-family: var(--cat-mono);
	line-height: 1;
}

p.atn-cat-total strong {
	display: block;
	font-size: 34px;
	font-weight: 600;
	color: var(--cat-prune);
}

p.atn-cat-total span {
	display: block;
	margin-top: 5px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cat-ink-soft);
}

/* ---------- Les deux colonnes ---------- */

.atn-cat-layout {
	--display: grid;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* ---------- Le panneau de criteres ---------- */

.atn-cat-panel {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: sticky;
	/* Sous l'en-tete du site, lui-meme collant. */
	top: 92px;
	padding: 20px;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: var(--cat-radius);
	box-shadow: var(--cat-shadow);
}

p.atn-cat-panel-titre {
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px dashed var(--cat-line);
	font-family: var(--cat-mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--cat-ink-faint);
}

.atn-cat-groupe {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin-bottom: 18px;
}

.atn-cat-groupe:last-child {
	margin-bottom: 0;
}

.atn-cat-groupe > .elementor-element {
	width: 100%;
}

.atn-cat-label-bloc p,
p.atn-cat-label {
	margin: 0 0 7px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cat-ink);
}

/* ---------- Liste deroulante (assets/filtres.js) ----------

   La barre de boutons native n'est masquee qu'une fois la liste en
   place : si le script ne charge pas, les boutons restent et marchent. */

.atn-filtre-liste--prete .e-filter {
	display: none !important;
}

.atn-liste {
	position: relative;
}

.atn-liste-declencheur {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100%;
	min-height: 36px;
	padding: 8px 10px;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: 7px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 13.5px;
	font-weight: 400;
	text-align: left;
	color: var(--cat-ink-faint);
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.atn-liste-declencheur:hover {
	border-color: var(--cat-indigo);
	background: var(--cat-paper);
	color: var(--cat-ink-faint);
}

.atn-liste.est-ouverte .atn-liste-declencheur {
	border-color: var(--cat-indigo);
	box-shadow: 0 0 0 3px var(--cat-indigo-tint);
}

.atn-liste.a-une-selection .atn-liste-declencheur {
	color: var(--cat-ink);
	font-weight: 500;
}

.atn-liste-declencheur:focus-visible {
	outline: 2px solid var(--cat-indigo);
	outline-offset: 2px;
}

.atn-liste-etiquette {
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.atn-liste-caret {
	flex: none;
	font-size: 10px;
	color: var(--cat-ink-faint);
	transition: transform .15s ease;
}

.atn-liste.est-ouverte .atn-liste-caret {
	transform: rotate(180deg);
}

.atn-liste-panneau {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	max-height: 340px;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: 9px;
	box-shadow: var(--cat-shadow);
}

/* L'attribut `hidden` ne resiste pas a un `display` pose en feuille : il
   faut le redire, sinon le panneau et les options filtrees restent. */
.atn-liste-panneau[hidden],
.atn-liste-option[hidden],
.atn-liste-vide[hidden] {
	display: none;
}

.atn-liste-zone-recherche {
	padding: 8px;
	border-bottom: 1px solid var(--cat-line);
}

input.atn-liste-recherche {
	width: 100%;
	padding: 7px 9px;
	border: 1px solid var(--cat-line);
	border-radius: 6px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 12.5px;
	color: var(--cat-ink);
	background: var(--cat-paper);
}

input.atn-liste-recherche:focus {
	outline: none;
	border-color: var(--cat-indigo);
}

.atn-liste-options {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 6px;
	scrollbar-width: thin;
	scrollbar-color: var(--cat-line) transparent;
}

.atn-liste-option {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0;
	padding: 7px 8px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.35;
	color: var(--cat-ink);
	cursor: pointer;
}

.atn-liste-option:hover {
	background: var(--cat-indigo-tint);
}

.atn-liste-option input {
	flex: none;
	width: 14px;
	height: 14px;
	margin: 2px 0 0;
	accent-color: var(--cat-indigo);
}

.atn-liste-vide {
	margin: 0;
	padding: 14px 10px;
	text-align: center;
	font-size: 12.5px;
	color: var(--cat-ink-faint);
}

.atn-liste-pied {
	display: flex;
	justify-content: space-between;
	padding: 8px;
	border-top: 1px solid var(--cat-line);
}

.atn-liste-pied button {
	padding: 4px 6px;
	background: none;
	border: 0;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 11.5px;
	font-weight: 600;
	color: var(--cat-indigo);
	cursor: pointer;
}

.atn-liste-pied button:hover {
	text-decoration: underline;
	background: none;
	color: var(--cat-indigo);
}

/* ---------- Le type : des cases toujours visibles ----------

   Quatre valeurs se lisent mieux ouvertes qu'enfouies dans une liste. Ce
   sont les boutons natifs d'Elementor, simplement habilles en cases. */

.atn-filtre-cases .e-filter {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin: 0;
	padding: 0;
	border: 0;
}

.atn-filtre-cases .e-filter-item {
	display: flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	padding: 8px 10px;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: 7px;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	text-align: left;
	color: var(--cat-ink);
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}

/* Le carre de couleur de chaque type, celui que Pierre avait prevu. */
.atn-filtre-cases .e-filter-item::before {
	content: '';
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	background: var(--cat-ink-faint);
}

.atn-filtre-cases .e-filter-item[data-filter="xenograft"]::before { background: var(--cat-indigo); }
.atn-filtre-cases .e-filter-item[data-filter="syngeneic"]::before { background: var(--cat-teal); }
.atn-filtre-cases .e-filter-item[data-filter="in-vitro"]::before { background: var(--cat-amber); }
.atn-filtre-cases .e-filter-item[data-filter="resistant"]::before { background: var(--cat-rust); }

.atn-filtre-cases .e-filter-item:hover:not([aria-pressed="true"]) {
	border-color: var(--cat-teal);
	background: var(--cat-paper);
	color: var(--cat-ink);
}

.atn-filtre-cases .e-filter-item[aria-pressed="true"] {
	background: var(--cat-teal-tint);
	border-color: var(--cat-teal);
	color: var(--cat-ink);
}

/* Le bouton « tout » n'a pas de sens pour des cases : on decoche ce
   qu'on a coche, et les puces permettent de tout retirer. */
.atn-filtre-cases .e-filter-item[data-filter="__all"] {
	display: none;
}

.atn-filtre-cases .e-filter-item:focus-visible {
	outline: 2px solid var(--cat-teal);
	outline-offset: 2px;
}

/* ---------- La colonne des resultats ---------- */

.atn-cat-res {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.atn-cat-puces {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-height: 24px;
}

.atn-puce {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 6px 4px 10px;
	background: var(--cat-indigo-tint);
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--cat-mono);
	font-size: 11px;
	line-height: 1.3;
	color: var(--cat-indigo);
	cursor: pointer;
}

.atn-puce:hover {
	border-color: var(--cat-indigo);
	background: var(--cat-indigo-tint);
	color: var(--cat-indigo);
}

.atn-puce-groupe {
	opacity: .75;
}

.atn-puce-croix {
	font-size: 13px;
	line-height: 1;
	padding: 0 2px;
}

/* ---------- Le tableau ---------- */

.atn-cat-table {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: var(--cat-radius);
	box-shadow: var(--cat-shadow);
	overflow: hidden;
}

/* Le H2 tient la hierarchie des titres ; a l'ecran, les en-tetes de
   colonnes le remplacent. Masque visuellement, pas pour les lecteurs
   d'ecran ni pour les moteurs. */
.atn-cat-table-titre {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.atn-cat-thead {
	--display: grid;
	display: grid;
	grid-template-columns: var(--cat-cols);
	gap: 0;
	background: #F7F5FC;
	border-bottom: 1px solid var(--cat-line);
}

.atn-cat-th {
	padding: 12px 14px;
}

.atn-cat-th .elementor-heading-title {
	font-family: var(--cat-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--cat-ink-faint);
	margin: 0;
}

.atn-cat-grille {
	--grid-row-gap: 0px;
	--grid-column-gap: 0px;
}

/* ---------- Une ligne ---------- */

.atn-mrow {
	--display: grid;
	display: grid;
	grid-template-columns: var(--cat-cols);
	gap: 0;
	position: relative;
	background: var(--cat-paper);
	border-bottom: 1px solid var(--cat-line);
	transition: background .12s ease;
}

.atn-cat-grille .e-loop-item:last-child .atn-mrow {
	border-bottom: 0;
}

.atn-mrow:hover {
	background: #F8F5FD;
}

/* CHAQUE CELLULE A SA PLACE, explicitement. Une cellule dont la valeur
   est vide n'est pas rendue du tout par Elementor : sans placement fixe,
   les suivantes glisseraient d'une colonne. */
.atn-mrow > .elementor-element {
	grid-row: 1;
	min-width: 0;
	padding: 12px 14px;
}

.atn-mrow > .atn-mrow-nom { grid-column: 1; }
.atn-mrow > .atn-mrow-org { grid-column: 2; }
.atn-mrow > .atn-mrow-tis { grid-column: 3; }
.atn-mrow > .atn-mrow-pat { grid-column: 4; }
.atn-mrow > .atn-mrow-type { grid-column: 5; }

.atn-mrow .elementor-heading-title {
	margin: 0;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--cat-ink);
	overflow-wrap: anywhere;
}

.atn-mrow-nom .elementor-heading-title {
	font-weight: 600;
}

.atn-mrow-nom .elementor-heading-title::before {
	content: '\25B8';
	display: inline-block;
	margin-right: 8px;
	font-size: 12px;
	color: var(--cat-ink-soft);
	transition: transform .15s ease, color .15s ease;
}

.atn-mrow:hover .atn-mrow-nom .elementor-heading-title::before {
	transform: translateX(2px);
	color: var(--cat-teal-deep);
}

.atn-mrow-nom a {
	color: inherit;
	text-decoration: none;
}

/* LA LIGNE ENTIERE EST CLIQUABLE, par le lien du nom etendu a toute sa
   surface. C'est le seul lien de la ligne : aucune ancre imbriquee. */
.atn-mrow-nom a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.atn-mrow:hover .atn-mrow-nom a {
	color: var(--cat-indigo);
}

.atn-mrow-nom a:focus-visible {
	outline: none;
}

.atn-mrow-nom a:focus-visible::after {
	outline: 2px solid var(--cat-indigo);
	outline-offset: -2px;
}

/* ---------- Les pastilles de type (class-filtres.php) ---------- */

.atn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.atn-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 8px;
	border-radius: 999px;
	font-family: var(--cat-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.25;
	white-space: nowrap;
	background: var(--cat-teal-tint);
	color: var(--cat-teal-deep);
}

.atn-tag::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.atn-tag--xenograft { background: var(--cat-indigo-tint); color: var(--cat-indigo); }
.atn-tag--syngeneic { background: var(--cat-teal-tint); color: var(--cat-teal-deep); }
.atn-tag--in-vitro { background: var(--cat-amber-tint); color: var(--cat-amber); }
.atn-tag--resistant { background: var(--cat-rust-tint); color: var(--cat-rust); }

/* ---------- Pagination ---------- */

.atn-cat-table .elementor-pagination {
	padding: 16px 14px;
	border-top: 1px solid var(--cat-line);
	font-family: var(--cat-mono);
	font-size: 12.5px;
	text-align: center;
	color: var(--cat-ink-soft);
}

.atn-cat-table .elementor-pagination .page-numbers {
	display: inline-block;
	min-width: 28px;
	padding: 5px 7px;
	margin: 0 2px;
	border-radius: 6px;
	color: var(--cat-ink-soft);
	text-decoration: none;
}

.atn-cat-table .elementor-pagination .page-numbers.current {
	background: var(--cat-indigo-tint);
	color: var(--cat-indigo);
	font-weight: 600;
}

.atn-cat-table .elementor-pagination a.page-numbers:hover {
	color: var(--cat-indigo);
}

/* ---------- Garde-fous : le theme et blocs.css ----------

   LE THEME HELLO passe TOUT bouton en rose au survol et au focus :
   `[type=button]:focus, button:hover { background-color:#c36; color:#fff }`
   (reset.css, specificite 0,2,0). Nos boutons ne portent qu'une classe :
   ils perdaient. On remonte chaque regle a 0,3,0 au moins.

   BLOCS.CSS s'applique aussi, parce que la section porte `atn-bloc` : ses
   regles `.atn-bloc .elementor-widget-text-editor p:last-child` (marge
   nulle) et `... strong` (couleur du texte) ecrasaient les marges des
   libelles et le violet du total. Meme remede : prefixer par `.atn-cat`
   et le widget, pour egaler ou depasser, cette feuille etant chargee apres. */

.atn-cat .atn-liste .atn-liste-declencheur:hover,
.atn-cat .atn-liste .atn-liste-declencheur:focus {
	background: var(--cat-paper);
	color: var(--cat-ink-faint);
}

.atn-cat .atn-liste.a-une-selection .atn-liste-declencheur:hover,
.atn-cat .atn-liste.a-une-selection .atn-liste-declencheur:focus {
	color: var(--cat-ink);
}

.atn-cat .atn-liste-pied button:hover,
.atn-cat .atn-liste-pied button:focus {
	background: none;
	color: var(--cat-indigo);
}

.atn-cat .atn-cat-puces .atn-puce:hover,
.atn-cat .atn-cat-puces .atn-puce:focus {
	background: var(--cat-indigo-tint);
	color: var(--cat-indigo);
}

.atn-cat .atn-filtre-cases .e-filter-item:focus:not([aria-pressed="true"]) {
	background: var(--cat-paper);
	color: var(--cat-ink);
}

.atn-cat .elementor-widget-text-editor p.atn-cat-label {
	margin: 0 0 7px;
}

.atn-cat .elementor-widget-text-editor p.atn-cat-panel-titre {
	margin: 0 0 16px;
}

.atn-cat .elementor-widget-text-editor p.atn-cat-total {
	margin: 0;
}

.atn-cat .elementor-widget-text-editor p.atn-cat-total strong {
	color: var(--cat-prune);
}

.atn-cat .elementor-widget-text-editor.atn-cat-lede p {
	margin: 0;
	color: var(--cat-ink-soft);
}

/* La feuille du filtre d'Elementor centre le contenu de ses boutons. */
.atn-cat .atn-filtre-cases .e-filter-item {
	justify-content: flex-start;
}

/* ---------- Aucun resultat ----------

   Le message vient du Loop Grid (Options supplementaires > Nothing Found
   Message) : Pierre le modifie dans Elementor. Ici, seulement sa mise en
   forme — l'etat vide de Pierre, centre sous les en-tetes. */

.atn-cat-table .e-loop-nothing-found-message {
	padding: 56px 24px;
	text-align: center;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cat-ink-soft);
}

.atn-cat-table .e-loop-nothing-found-message:empty {
	display: none;
}

/* ---------- Repli : liste deroulante sans script ----------

   Dans l'editeur Elementor, le script ne tourne pas — volontairement, pour
   que les boutons natifs restent reglables. Idem si le script echoue sur le
   site. Plutot qu'une colonne de 261 boutons centres, une liste courte qui
   defile. */

.atn-filtre-liste:not(.atn-filtre-liste--prete) .e-filter {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 2px;
	max-height: 220px;
	overflow-y: auto;
	padding: 4px;
	border: 1px solid var(--cat-line);
	border-radius: 7px;
}

.atn-filtre-liste:not(.atn-filtre-liste--prete) .e-filter-item {
	justify-content: flex-start;
	text-align: left;
	padding: 5px 8px;
	font-size: 12.5px;
}

@media (prefers-reduced-motion: reduce) {
	.atn-cat *,
	.atn-cat *::before,
	.atn-cat *::after {
		transition: none !important;
	}
}

/* ---------- Tablette : le panneau passe au-dessus ---------- */

@media (max-width: 900px) {
	.atn-cat-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.atn-cat-panel {
		position: static;
	}
}

/* ---------- Mobile : chaque ligne devient une fiche ---------- */

@media (max-width: 700px) {
	.atn-cat-thead {
		display: none;
	}

	.atn-mrow {
		display: flex;
		flex-direction: column;
		padding: 6px 0;
	}

	.atn-mrow > .elementor-element {
		padding: 5px 14px;
	}

	.atn-mrow > .atn-mrow-nom {
		padding-top: 10px;
		padding-bottom: 9px;
		margin-bottom: 3px;
		border-bottom: 1px dashed var(--cat-line);
	}

	.atn-mrow-nom .elementor-heading-title {
		font-size: 15px;
	}

	.atn-mrow > .atn-mrow-org::before,
	.atn-mrow > .atn-mrow-tis::before,
	.atn-mrow > .atn-mrow-pat::before {
		display: block;
		margin-bottom: 2px;
		font-family: var(--cat-mono);
		font-size: 10px;
		letter-spacing: .05em;
		text-transform: uppercase;
		color: var(--cat-ink-faint);
	}

	.atn-mrow > .atn-mrow-org::before { content: 'Organism'; }
	.atn-mrow > .atn-mrow-tis::before { content: 'Tissue of origin'; }
	.atn-mrow > .atn-mrow-pat::before { content: 'Pathology'; }

	.atn-mrow > .atn-mrow-type {
		padding-bottom: 12px;
	}

	.atn-cat-tete {
		align-items: flex-start;
	}

	p.atn-cat-total {
		text-align: left;
	}

	input.atn-liste-recherche,
	.atn-liste-declencheur {
		font-size: 16px;
	}

	.atn-liste-option {
		padding: 10px 8px;
		font-size: 14px;
	}

	.atn-liste-option input {
		width: 18px;
		height: 18px;
	}
}

/* ==================================================================
   FICHE D'UN MODELE — gabarit Single, cahier des charges ch. 3.13
   ==================================================================

   848 fiches, un seul gabarit, et deux etats tres differents :
     - 86 fiches portent un texte (72 riches : croissance tumorale,
       reponses aux traitements, figures citees) ;
     - 762 n'en portent AUCUN.

   Elementor n'imprime pas un widget dont le contenu est vide : sur les
   762, le Post Content est ABSENT de la page, pas vide. Toute la mise
   en page s'articule donc sur `:has(.atn-model-texte)` — present, on a
   le duo texte + carte ; absent, la carte s'etale en tuiles.

   Palette : celle du catalogue (variables declarees plus haut), pour
   que la fiche prolonge le tableau d'ou l'on vient.
   ================================================================== */

/* ---------- 1. En-tete : l'aplat de la marque ---------- */

.atn-model-hero {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(60% 90% at 88% 0%, rgba(223, 186, 132, .20) 0%, rgba(223, 186, 132, 0) 60%),
		radial-gradient(85% 85% at 50% 100%, #1F0A1F 0%, rgba(31, 10, 31, 0) 100%),
		#663366;
	color: #ECF1FB;
}

/* Une trame tres legere, qui rappelle le papier millimetre des
   paillasses sans rien ajouter au poids de la page. */
.atn-model-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image:
		linear-gradient(rgba(236, 241, 251, .045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(236, 241, 251, .045) 1px, transparent 1px);
	background-size: 32px 32px;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 85%);
}

.atn-model-hero > * {
	position: relative;
}

.atn-model-hero .atn-wrap {
	padding-top: 36px;
	padding-bottom: 60px;
}

.atn-model-hero .atn-fil,
.atn-model-hero .atn-fil a,
.atn-model-hero .atn-fil span {
	color: rgba(236, 241, 251, .72);
}

.atn-model-hero .atn-fil a:hover {
	color: #fff;
}

.atn-model-hero .elementor-widget-text-editor p.atn-model-kicker {
	margin: 26px 0 12px;
	font-family: var(--cat-mono);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #DFBA84;
}

.atn-model-hero .atn-model-titre .elementor-heading-title {
	margin: 0;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: clamp(36px, 5.2vw, 64px);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -.028em;
	color: #FFFFFF;
	overflow-wrap: anywhere;
}

.atn-model-hero .atn-model-sous .elementor-heading-title {
	margin: 14px 0 0;
	font-size: clamp(17px, 1.9vw, 22px);
	font-weight: 400;
	line-height: 1.4;
	color: rgba(236, 241, 251, .86);
}

/* Regle de repli du cahier. Le widget etant absent quand la pathologie
   manque, elle ne se declenche pas en pratique, mais elle couvre le cas
   ou Elementor imprimerait un jour un titre vide. */
.atn-model-sous:not(:has(.elementor-heading-title)) {
	display: none;
}

.atn-model-types {
	margin-top: 22px;
}

.atn-model-hero .atn-tag {
	padding: 5px 12px;
	font-size: 12px;
}

/* ---------- 2. Le corps : fond lavande, cartes blanches ---------- */

.atn-model-corps {
	background: var(--cat-bg);
	color: var(--cat-ink);
}

.atn-model-duo {
	--display: grid;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 28px;
	align-items: start;
}

/* La carte de texte. */
.atn-model-corps .atn-model-texte {
	min-width: 0;
	padding: clamp(26px, 3.2vw, 44px);
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: var(--cat-radius);
	box-shadow: var(--cat-shadow);
}

.atn-model-corps .atn-model-texte p {
	margin: 0 0 14px;
	font-size: 16px;
	line-height: 1.72;
	color: var(--cat-ink);
}

.atn-model-corps .atn-model-texte p:last-child {
	margin-bottom: 0;
}

.atn-model-corps .atn-model-texte strong,
.atn-model-corps .atn-model-texte b {
	font-weight: 600;
	color: var(--cat-ink);
}

/* Les intertitres des fiches riches : « Tumour growth in vivo »,
   « Drug responses ». Un filet d'accent au-dessus, une separation
   nette entre les parties. */
.atn-model-corps .atn-model-texte h2 {
	margin: 34px 0 14px;
	padding-top: 26px;
	border-top: 1px solid var(--cat-line);
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 21px;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--cat-ink);
}

.atn-model-corps .atn-model-texte h2::before {
	content: '';
	display: block;
	width: 30px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--cat-indigo);
}

.atn-model-corps .atn-model-texte h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.atn-model-corps .atn-model-texte h2 * {
	font: inherit;
	color: inherit;
}

.atn-model-corps .atn-model-texte ul {
	margin: 0 0 14px;
	padding-left: 20px;
}

.atn-model-corps .atn-model-texte li {
	margin-bottom: 6px;
	line-height: 1.6;
}

/* Le contenu importe porte des styles en ligne : du rouge vif pour
   signaler une resistance, des tailles de police figees. Le rouge
   devient la rouille de la charte, la taille suit le texte. */
.atn-model-corps .atn-model-texte span[style*="ff0000"] {
	color: var(--cat-rust) !important;
	font-weight: 600;
}

.atn-model-corps .atn-model-texte span[style*="font-size"],
.atn-model-corps .atn-model-texte span[style*="color: #000000"] {
	font-size: inherit !important;
	color: inherit !important;
}

/* Le lien PDF de fin de fiche, habille en lien de document. */
.atn-model-corps .atn-model-texte a[href$=".pdf"] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid var(--cat-line);
	border-radius: 7px;
	background: var(--cat-indigo-tint);
	font-size: 14px;
	font-weight: 600;
	color: var(--cat-indigo);
	text-decoration: none;
	transition: border-color .15s ease;
}

.atn-model-corps .atn-model-texte a[href$=".pdf"]::before {
	content: 'PDF';
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--cat-indigo);
	font-family: var(--cat-mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: #fff;
}

.atn-model-corps .atn-model-texte a[href$=".pdf"]:hover {
	border-color: var(--cat-indigo);
}

/* ---------- 3. La carte d'attributs ---------- */

.atn-model-specs {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 0;
	position: sticky;
	/* Sous l'en-tete du site, lui-meme collant. */
	top: 92px;
	padding: 24px;
	background: var(--cat-paper);
	border: 1px solid var(--cat-line);
	border-radius: var(--cat-radius);
	box-shadow: var(--cat-shadow);
}

/* Le H2 tient la hierarchie ; a l'ecran, un titre de carte discret. */
.atn-model-specs .atn-specs-titre .elementor-heading-title {
	margin: 0 0 4px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--cat-line);
	font-family: var(--cat-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cat-ink-faint);
}

.atn-spec-table {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 0;
	margin-bottom: 22px;
}

.atn-spec-ligne {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 13px 0;
	border-bottom: 1px solid var(--cat-line);
}

.atn-model-specs .atn-spec-cle .elementor-heading-title {
	margin: 0;
	font-family: var(--cat-mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cat-ink-faint);
}

.atn-model-specs .atn-spec-val .elementor-heading-title {
	margin: 0;
	font-family: var(--font-base, 'Poppins', sans-serif);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--cat-ink);
}

/* La disponibilite reste une information, pas un argument : la cliente
   ne veut pas la mettre en avant. */
.atn-spec-table > .atn-spec-ligne:last-child .atn-spec-val .elementor-heading-title {
	font-size: 14px;
	font-weight: 400;
	color: var(--cat-ink-soft);
}

/* REGLE DE REPLI DU CAHIER : une ligne sans valeur disparait, libelle
   compris. La valeur est ABSENTE, pas vide — d'ou `:not(:has())`.
   135 fiches sans pathologie, 11 sans tissu. */
.atn-spec-ligne:not(:has(.atn-spec-val)) {
	display: none;
}

.atn-spec-actions {
	--flex-direction: column;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.atn-spec-bouton,
.atn-spec-bouton .elementor-button-wrapper {
	width: 100%;
}

.atn-spec-bouton .elementor-button {
	display: flex;
	justify-content: center;
	width: 100%;
}

.atn-model-specs .atn-spec-ethique {
	text-align: center;
}

.atn-model-specs .elementor-widget-text-editor.atn-spec-ethique p {
	margin: 0;
	font-size: 13px;
}

.atn-model-specs .atn-spec-ethique a {
	color: var(--cat-ink-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--cat-line);
	transition: color .15s ease, border-color .15s ease;
}

.atn-model-specs .atn-spec-ethique a:hover {
	color: var(--cat-teal-deep);
	border-color: var(--cat-teal);
}

.atn-model-specs .atn-spec-ethique a::before {
	content: '';
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-right: 7px;
	border-radius: 50%;
	background: var(--cat-teal);
	vertical-align: 1px;
}

/* ---------- Fiche sans texte : la carte en tuiles ----------

   762 fiches. Une carte etroite centree dans le vide ferait une page
   pauvre : la carte prend toute la largeur, les attributs se rangent en
   tuiles, le bouton et la mention ethique sur une meme ligne en bas. */

.atn-model-duo:not(:has(.atn-model-texte)) {
	grid-template-columns: minmax(0, 1fr);
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-model-specs {
	position: static;
	padding: 28px 32px 30px;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-table {
	--display: grid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	margin: 18px 0 26px;
	border: 1px solid var(--cat-line);
	border-radius: 9px;
	overflow: hidden;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-ligne {
	padding: 18px 20px;
	border-bottom: 0;
	border-right: 1px solid var(--cat-line);
	background: #FCFBFE;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-ligne:last-child {
	border-right: 0;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-val .elementor-heading-title {
	font-size: 17px;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-actions {
	--flex-direction: row;
	--align-items: center;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton,
.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton .elementor-button-wrapper,
.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton .elementor-button {
	width: auto;
}

/* ---------- 4. L'appel a l'action ---------- */

.atn-model-actions {
	--flex-direction: row;
	--align-items: center;
	display: flex;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
	width: auto;
}

/* ---------- 5. Les fiches voisines ---------- */

.atn-model-liens {
	background: var(--cat-bg);
	color: var(--cat-ink);
	border-top: 1px solid var(--cat-line);
}

.atn-model-liens .atn-liens-titre .elementor-heading-title {
	margin: 0;
	font-size: clamp(24px, 2.6vw, 32px);
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--cat-ink);
}

.atn-model-liens .elementor-widget-text-editor.atn-liens-lede p {
	margin: 8px 0 22px;
	font-size: 15px;
	color: var(--cat-ink-soft);
}

/* REGLE DE REPLI DU CAHIER : sans voisin, la section entiere disparait,
   titre compris. 50 fiches n'ont aucun voisin par le tissu. */
.atn-model-liens:not(:has(a[href])) {
	display: none;
}

/* Sans voisin, la grille laisse un message vide d'une soixantaine de
   pixels (skin-loop-base.php) : la section etant masquee, rien a faire,
   mais on le neutralise par surete. */
.atn-model-voisins .e-loop-nothing-found-message:empty,
.atn-model-voisins .e-loop-nothing-found-message:not(:has(*)) {
	display: none;
}

.atn-model-nav {
	margin-top: 22px;
}

.atn-model-nav .elementor-post-navigation {
	display: flex;
	justify-content: space-between;
	gap: 16px;
}

.atn-model-nav .elementor-post-navigation a {
	text-decoration: none;
	color: var(--cat-ink);
}

.atn-model-nav .post-navigation__prev--label,
.atn-model-nav .post-navigation__next--label {
	display: block;
	font-family: var(--cat-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cat-ink-faint);
}

.atn-model-nav .post-navigation__prev--title,
.atn-model-nav .post-navigation__next--title {
	display: block;
	margin-top: 3px;
	font-size: 15px;
	font-weight: 600;
	color: var(--cat-ink);
}

.atn-model-nav a:hover .post-navigation__prev--title,
.atn-model-nav a:hover .post-navigation__next--title {
	color: var(--cat-indigo);
}

.atn-model-nav .post-navigation__arrow-wrapper {
	color: var(--cat-ink-faint);
}

/* ---------- Tablette et mobile ---------- */

@media (max-width: 1024px) {
	.atn-model-duo {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Sur une seule colonne, les attributs d'abord : on vient chercher
	   la pathologie avant de lire l'historique des etudes. */
	.atn-model-specs {
		position: static;
		order: -1;
	}

	.atn-model-duo:has(.atn-model-texte) .atn-spec-table {
		--display: grid;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
	}
}

@media (max-width: 640px) {
	.atn-model-hero .atn-wrap {
		padding-top: 24px;
		padding-bottom: 44px;
	}

	.atn-model-duo:has(.atn-model-texte) .atn-spec-table,
	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-table {
		grid-template-columns: 1fr;
	}

	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-ligne {
		border-right: 0;
		border-bottom: 1px solid var(--cat-line);
	}

	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-ligne:last-child {
		border-bottom: 0;
	}

	.atn-model-duo:not(:has(.atn-model-texte)) .atn-model-specs {
		padding: 22px 20px;
	}

	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton,
	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton .elementor-button-wrapper,
	.atn-model-duo:not(:has(.atn-model-texte)) .atn-spec-bouton .elementor-button {
		width: 100%;
	}

	.atn-model-nav .elementor-post-navigation {
		flex-direction: column;
	}
}

/* ---------- Impression ----------

   Les fiches partent en reunion sur papier. On garde le nom, les
   attributs et le texte ; on retire la navigation, les appels a
   l'action et les aplats de couleur. */

@media print {
	.atn-head,
	.atn-foot,
	.atn-fil,
	.atn-model-cta,
	.atn-model-liens,
	.atn-spec-actions {
		display: none !important;
	}

	.atn-model-hero {
		background: none !important;
		color: #000 !important;
	}

	.atn-model-hero::before {
		display: none;
	}

	.atn-model-hero .atn-model-titre .elementor-heading-title,
	.atn-model-hero .atn-model-sous .elementor-heading-title {
		color: #000 !important;
	}

	.atn-model-corps {
		background: none !important;
	}

	.atn-model-specs,
	.atn-model-corps .atn-model-texte {
		position: static;
		box-shadow: none;
		border-color: #ccc;
	}
}


/* ==================================================================
   GARDE-FOU : LA DIRECTION DES CONTENEURS ELEMENTOR
   ==================================================================

   Elementor 4 pilote la direction d'un conteneur par une variable, et la
   pose a DEUX classes (frontend.min.css) :
     .e-con.e-flex            { --flex-direction: column }
     .e-con-full.e-flex       { flex-direction: var(--flex-direction) }
   Une regle a une seule classe qui demande une ligne perd donc, sans
   bruit : le conteneur reste en colonne. C'est ce qui empilait logo,
   menu et bouton dans un en-tete de 262 px de haut, collant, sur toutes
   les pages. On egale la specificite ; cette feuille etant chargee apres
   celle d'Elementor, elle l'emporte. Releve le 21/09 sur la cible. */

.atn-head-in.e-con,
.atn-cat-tete.e-con,
.atn-model-actions.e-con {
	--flex-direction: row;
	flex-direction: row;
}

/* ==================================================================
   FICHE : RYTHME VERTICAL
   ==================================================================

   Le rythme de section du site (110 px en haut et en bas) est celui
   d'une page de presentation. Une fiche technique se lit comme un
   document : l'en-tete faisait 564 px pour 226 px de contenu. */

.atn-model-hero.atn-sec {
	padding-top: 28px;
	padding-bottom: 54px;
}

.atn-model-hero .atn-wrap {
	padding-top: 0;
	padding-bottom: 0;
}

.atn-model-corps.atn-sec {
	padding-top: 44px;
	padding-bottom: 64px;
}

.atn-model-cta.atn-sec {
	padding-top: 72px;
	padding-bottom: 72px;
}

.atn-model-liens.atn-sec {
	padding-top: 56px;
	padding-bottom: 72px;
}

/* ==================================================================
   BANDEAU D'APPEL SUR FOND PRUNE
   ==================================================================

   `.atn-cta-titre` (chapitre 6) est teinte en prune fonce PARTOUT : elle
   a ete ecrite pour le bandeau clair des pages. Sur un bandeau prune
   (`atn-bg-primary`) — catalogue et fiche modele — le titre s'eteint,
   le texte reste en encre de page et le bouton contour se fond dans le
   fond. Variante sombre, a trois classes pour passer devant la regle
   generale et devant la couleur primaire qu'Elementor pose sur tous
   ses titres. */

.atn-bg-primary .atn-cta-titre .elementor-heading-title {
	color: #FFFFFF;
}

.atn-bg-primary .elementor-widget-text-editor.atn-cta-texte,
.atn-bg-primary .elementor-widget-text-editor.atn-cta-texte p {
	color: rgba(236, 241, 251, .86);
}

.atn-bg-primary .atn-btn-ligne .elementor-button {
	background: transparent;
	border-color: rgba(236, 241, 251, .55);
	color: #FFFFFF;
}

.atn-bg-primary .atn-btn-ligne .elementor-button:hover,
.atn-bg-primary .atn-btn-ligne .elementor-button:focus {
	background: rgba(255, 255, 255, .10);
	border-color: #FFFFFF;
	color: #FFFFFF;
}

/* Titre et texte sont centres : les boutons aussi. */
.atn-model-cta .atn-model-actions.e-con {
	justify-content: center;
}

.atn-model-cta .atn-wrap {
	text-align: center;
}

/* La navigation precedent / suivant prend la couleur d'accent du kit
   Elementor (l'or) a une specificite superieure : on la ramene a
   l'encre du catalogue. */
.atn-model-liens .atn-model-nav span.post-navigation__prev--title,
.atn-model-liens .atn-model-nav span.post-navigation__next--title {
	color: var(--cat-ink);
}

.atn-model-liens .atn-model-nav a:hover span.post-navigation__prev--title,
.atn-model-liens .atn-model-nav a:hover span.post-navigation__next--title {
	color: var(--cat-indigo);
}

.atn-model-liens .atn-model-nav span.post-navigation__prev--label,
.atn-model-liens .atn-model-nav span.post-navigation__next--label,
.atn-model-liens .atn-model-nav .post-navigation__arrow-wrapper {
	color: var(--cat-ink-faint);
}