/* ------------------------------------------------------------------------------
  custom.css — ajouts ADDITIFS du projet Dr Florence Nanga
  Chargé en dernier (après style.css). Ne jamais éditer les fichiers de base du thème :
  toute personnalisation vit ici. (cf. CLAUDE.md v2 §1)

  Sommaire
    1. Modales de contenu
    2. Honeypot anti-spam
    3. Header — une seule bande alignée (≥768)
    4. Liens légaux du footer fixe (accueil)
    5. SOUS-PAGES — refonte design « revue éditoriale & sculpturale »
       5.1 Base + clairances + formes organiques
       5.2 Hero
       5.3 Liste presse (rangées éditoriales)
       5.4 Pages légales (panneau + hiérarchie)
       5.5 Pied de page statique
    6. Passe de finition du 24/09/2026 (accueil + presse)
       6.1 Distinctions : titre plafonné pour tenir dans sa colonne
       6.2 Mobile : éléments décoratifs qui masquaient du texte
       6.3 Parcours : couleurs des organisations (palette du site)
       6.4 Modales : largeur + bouton final
       6.5 Centres : date absente sans saut de mise en page
       6.6 Médias : bulles pleine largeur + liens
       6.7 Paroles : citations (notes masquées)
       6.8 Liens légaux (menu + copyright fixe)
       6.9 Presse : ancres sous l'en-tête fixe, date absente
       6.10 Page 404
       6.11 Retours du vérificateur (formulaire, copyright, menu, décor tablette)
       6.12 Portrait de l'accueil (WebP + repli PNG, masqué sous 576 px)
       6.13 Photo dans une modale
       6.14 EN : titre « AWARDS » à taille normale
       6.15 Presse : ligne kit presse
       6.16 Grandes modales limitées à la hauteur de l'écran
       6.17 Icône TikTok
       6.18 Centres : carte photo à droite (≥ 1200 px)
       6.19 Presse : logo du média dans le rail
-------------------------------------------------------------------------------*/


/* ============================================================================
   1. Modales de contenu (expertises, bio, points de présence)
   ============================================================================ */
.modal-body .slide-descr { margin-bottom: 1rem; }
.modal-body .slide-descr:last-child { margin-bottom: 0; }
.modal-body .modal-list { margin: 0 0 1rem; padding-left: 1.1rem; }
.modal-body .modal-list li { margin-bottom: .4rem; }
.modal-body blockquote {
	margin: 0 0 1rem;
	padding-left: 1rem;
	border-left: 3px solid #c9a86a;
	font-style: italic;
}
/* Sur écran peu haut, le corps de la modale défile au lieu de déborder */
@media (max-height: 760px) {
	.modal-body { max-height: 68vh; overflow-y: auto; }
}


/* ============================================================================
   2. Champ anti-spam (honeypot) : invisible à l'humain, rempli par les robots
   ============================================================================ */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	width: 1px; height: 1px;
	opacity: 0; overflow: hidden;
}


/* ============================================================================
   3. HEADER — aligner logo + tagline + contacts + menu sur UNE SEULE bande.
   La base du thème est en float (brand:left, hamburger:right, header-content en marges %)
   → pas de centrage vertical, la bande tagline/contacts tombait sous le logo.
   On passe la barre en flex + align-items:center (≥768px ; le mobile garde le float).
   S'applique aussi à l'accueil (header partagé) sans le casser.
   ============================================================================ */
@media (min-width: 768px) {
	.header .container-fluid { display: flex; align-items: center; }
	.header .brand { float: none; margin-right: 2.5rem; }
	.header .header-content { order: 2; flex: 1 1 auto; margin-left: 0; margin-right: 0; padding-top: 0; }
	.header .nav-toggle-btn { float: none; order: 3; margin-left: 1.5rem; }
}


/* ============================================================================
   4. Liens légaux dans le copyright fixe du one-page (accueil)
   ============================================================================ */
.footer-legal-links {
	display: block;
	margin-top: .5rem;
	font-size: .7rem;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
}
.footer-legal-links a { color: inherit; }
.footer-legal-links a:hover { color: #c0593f; }


/* ============================================================================
   5. SOUS-PAGES — refonte design (harmonie profonde avec l'accueil)
   Tout est scopé .subpage / .subpage-body / .press-* / .legal-* / .footer-static :
   n'affecte JAMAIS l'accueil / one-page.
   Grammaire reprise de l'accueil : crème, or Monument, formes organiques pleines
   débordantes, tracé fin en filigrane, radius asymétrique signature, rangées
   éditoriales à filets fins (façon section « Parcours »). Aucune carte blanche à
   ombre, aucun dégradé, aucun halo.
   ============================================================================ */

/* —— 5.1 Base + clairances + formes organiques —————————————————————————————— */

.subpage-body { background: #f5f4f0; }
/* Clôt tout débordement horizontal (menu off-canvas + formes décoratives).
   :has(.subpage-body) ne matche QUE les sous-pages, jamais l'accueil. */
.subpage-body,
html:has(.subpage-body) { overflow-x: hidden; }

.subpage {
	position: relative;
	overflow: hidden;          /* clippe les formes qui débordent */
	padding-top: 9rem;         /* clairance header (mobile) */
	padding-bottom: 5rem;
}
@media (min-width: 768px)  { .subpage { padding-top: 11rem; padding-bottom: 6rem; } }
@media (min-width: 1280px) { .subpage { padding-top: 12rem; padding-bottom: 8rem; } }

.subpage .container { position: relative; z-index: 2; }

/* Pas de formes organiques de fond sur les sous-pages (retour Daniel 24/06 :
   le grand cercle oblique « faisait bizarre »). L'identité tient à la typo,
   aux grands numéros, aux accents de couleur et aux rangées éditoriales. */


/* —— 5.2 Hero —————————————————————————————————————————————————————————————— */

.subpage .page-hero { margin-bottom: 3.5rem; }
@media (min-width: 992px) {
	.subpage .press-hero {
		display: grid;
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		column-gap: 3.5rem;
		align-items: end;
	}
}
.subpage .page-hero .slide-title {
	font-size: clamp(2.6rem, 6.5vw, 5rem);
	line-height: 1.06;
	margin-bottom: 1.25rem;
}
.subpage .page-hero-descr {
	color: #574f47;
	font-size: 1.2rem;
	line-height: 1.7;
	max-width: 40rem;
	margin: 0;
}
/* accroche complémentaire (à droite du titre, façon section « Awards ») */
.subpage .page-hero-aside {
	margin-top: 1.5rem;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.02em;
	color: #2b2622;
}
@media (min-width: 992px) { .subpage .page-hero-aside { margin-top: 0; padding-bottom: .35rem; } }
.subpage .page-hero-aside .text-primary { color: #b99e64 !important; }


/* —— 5.3 Liste presse : rangées éditoriales (grammaire « Parcours ») ———————— */

.subpage .press-list { display: block; margin: 0; }

.subpage .press-entry {
	display: grid;
	grid-template-columns: 1fr;
	gap: .2rem;
	padding: 2.4rem 1.5rem;
	margin: 0 -1.5rem;
	border-top: 1px solid #ddd7cd;
	border-radius: 1.2rem 1.2rem 2.4rem 1.2rem;  /* visible au survol */
	transition: background-color .3s ease;
}
.subpage .press-entry:last-child { border-bottom: 1px solid #ddd7cd; }
.subpage .press-entry:hover { background-color: #efe9dd; }

@media (min-width: 768px) {
	.subpage .press-entry {
		grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
		column-gap: 3.5rem;
		padding: 3rem 2rem;
		margin: 0 -2rem;
	}
}

/* rail gauche : grand numéro + nom du média + badges/date */
.subpage .press-index {
	display: block;
	font-family: 'MonumentExtended', sans-serif;
	font-size: 3.4rem;
	line-height: .9;
	color: #cebf9c;             /* or doux */
	margin-bottom: 1rem;
}
@media (min-width: 768px) { .subpage .press-index { font-size: 4.25rem; } }

.subpage .press-name {
	font-family: 'MonumentExtended', sans-serif;
	text-transform: uppercase;
	font-size: 1.3rem;
	line-height: 1.3;
	letter-spacing: .02em;
	color: #b99e64;
	margin-bottom: .9rem;
}
.subpage .press-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .55rem;
	font-size: .72rem;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.subpage .press-badge {
	background: #ece3d2;
	color: #8a6d33;
	border-radius: 999px;
	padding: .25rem .75rem;
	font-weight: 600;
}
.subpage .press-date { color: #9a8f84; font-weight: 600; }

/* contenu droit : titre + résumé + lien */
.subpage .press-entry h2 {
	font-size: clamp(1.5rem, 2.3vw, 1.95rem);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: #2b2622;
	margin: .4rem 0 1rem;
}
@media (min-width: 768px) { .subpage .press-entry h2 { margin-top: .1rem; } }
.subpage .press-summary {
	color: #574f47;
	font-size: 1.06rem;
	line-height: 1.75;
	margin: 0 0 1.1rem;
}
.subpage .press-link {
	display: inline-block;
	font-weight: 700;
	text-transform: uppercase;
	font-size: .9rem;
	letter-spacing: .04em;
}
.subpage .press-link-todo {
	color: #a89f93;
	font-style: italic;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}

/* accents chromatiques rotatifs (façon noms d'organisations du Parcours) */
.subpage .press-entry:nth-child(3n+2) .press-name  { color: #c0593f; }
.subpage .press-entry:nth-child(3n+2) .press-index { color: #e0b7a8; }
.subpage .press-entry:nth-child(3n)   .press-name  { color: #5ca595; }
.subpage .press-entry:nth-child(3n)   .press-index { color: #aed2c8; }

/* bouton bas de liste */
.subpage .page-back { margin-top: 3rem; }


/* —— 5.4 Pages légales : panneau signature + hiérarchie lisible (WCAG AA) ——— */

.subpage .legal-content {
	position: relative;
	max-width: 54rem;
	background: #ffffff;
	border: 1px solid rgba(43, 38, 34, .05);
	border-radius: 1rem 1rem 3rem 1rem;        /* radius asymétrique signature */
	box-shadow: 0 22px 55px rgba(60, 45, 30, .06);
	padding: 3rem 3.25rem;
}
@media (max-width: 767px) {
	.subpage .legal-content { padding: 1.8rem 1.5rem; border-radius: .9rem .9rem 2rem .9rem; }
}
.subpage .legal-content,
.subpage .legal-content p,
.subpage .legal-content li { color: #4a433c; font-size: 1.05rem; line-height: 1.75; }
.subpage .legal-content p,
.subpage .legal-content li { margin-bottom: .85rem; }
.subpage .legal-content ul { padding-left: 1.2rem; }
.subpage .legal-content a { color: #c0593f; }
.subpage .legal-content h2 {
	font-family: 'MonumentExtended', sans-serif;
	text-transform: uppercase;
	color: #2b2622;
	font-size: 1.05rem;
	letter-spacing: .02em;
	line-height: 1.4;
	margin: 2.6rem 0 .9rem;
	padding-left: 1.1rem;
	position: relative;
}
.subpage .legal-content h2::before {
	content: "";
	position: absolute;
	left: 0; top: .12em; bottom: .12em;
	width: 4px;
	border-radius: 2px;
	background: #b99e64;          /* marqueur or (pas de dégradé) */
}
.subpage .legal-content h2:first-of-type { margin-top: 0; }


/* —— 5.5 Pied de page statique (sous-pages) ———————————————————————————————— */

.footer-static {
	position: static;
	background: #efece6;
	border-top: 1px solid rgba(201, 168, 106, .3);
	padding: 2.5rem 0;
	margin-top: 0;
}
.footer-static .container {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .6rem 1.5rem;
}
.footer-static .footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin-bottom: 0;
}
.footer-static .footer-links a { color: #2b2622; font-weight: 700; }
.footer-static .footer-links a:hover { color: #c0593f; }
.footer-static .copyright { color: #9a8f84; font-size: .85rem; }


/* ============================================================================
   6. PASSE DE FINITION (24/09/2026) : correctifs additifs, scopés par section.
   Aucune règle de transform/opacity sur les éléments animés du thème.
   ============================================================================ */

/* —— 6.1 Distinctions ———————————————————————————————————————————————————————
   « DISTINCTIONS » / « RECOGNITION » est deux fois plus long que « AWARDS » :
   à 7.4vmin il débordait sur l'accroche (1920×1080, 2560×1440, 768×1024…).
   Largeur mesurée ≈ 9,06 × taille de police : on plafonne selon la colonne md-7. */
@media (min-width: 768px) {
	.slide-personal-awards .slide-title { font-size: min(7.40740741vmin, 41px); }
}
@media (min-width: 992px) {
	.slide-personal-awards .slide-title { font-size: min(7.40740741vmin, 56px); }
}
@media (min-width: 1200px) {
	.slide-personal-awards .slide-title { font-size: min(7.40740741vmin, 68px); }
}

/* —— 6.2 Mobile : décor qui masquait du texte ——————————————————————————————— */
@media (max-width: 575px) {
	/* disque doré de l'accueil : il couvrait « Je suis » (sous-titre sur 4 lignes) */
	/* lunettes du Parcours : elles recouvraient le titre et les flèches */
	.slide-experience-image1 { display: none; }
	/* petit disque terracotta du Contact : il passait sous l'adresse */
	.slide-contacts-circle2 { display: none; }
}

@media (max-width: 1199px) {
	/* disque doré de l'accueil : il couvrait « Je suis » (mobile, 768, 1024) */
	.slide-intro-circle1 { left: -8rem !important; }
}
/* Section 7 sur tablette : le disque terracotta passait sous la fin des citations */
@media (min-width: 768px) and (max-width: 991px) {
	.slide-testimonials-circle2 { display: none; }
}

/* —— 6.3 Parcours : couleurs d'origine remplacées par l'alternance or / terracotta / vert,
   la même que celle des noms de médias de la page Presse. ——————————————————— */
.company-blue  { color: #c0593f; }
.company-pink  { color: #b99e64; }
.company-green { color: #5ca595; }

/* —— 6.4 Modales de contenu —————————————————————————————————————————————————
   style.css bride toutes les modales à 450 px, ce qui annulait .modal-lg (textes
   longs coupés en hauteur). La modale de demande (#send-request) reste à 450 px. */
@media (min-width: 992px) {
	.modal-dialog.modal-lg { max-width: 720px; }
}
.modal-body .modal-cta { margin-top: 2rem; }

/* —— 6.5 Centres : une date d'ouverture inconnue garde la hauteur de sa ligne
   (les commentaires HTML ne comptent pas pour :empty) —————————————————————— */
.carousel-project-personal .project-date:empty::before { content: "\00a0"; }

/* —— 6.6 Médias : les bulles 3, 4 et 6 réduisaient l'image (logo sur fond clair) ;
   les mentions des médias occupent désormais toute la bulle. ———————————————— */
.clients-photo .clients-photo-item3 img,
.clients-photo .clients-photo-item4 img,
.clients-photo .clients-photo-item6 img { width: 100%; margin-top: 0; }
.clients-photo-item .inside > a { display: block; }

/* —— 6.7 Paroles : citations sourcées en attendant de vrais témoignages.
   Pas de notes sur des citations (retirer la classe pour les réafficher). ———— */
.testimonials-item--quote .testimonials-item-rating { display: none; }

/* —— 6.8 Liens légaux ————————————————————————————————————————————————————————
   Menu latéral (seul accès sur mobile, où le copyright fixe est masqué). */
.menu-legal {
	margin-top: .75rem;
	font-size: .8125rem;
	font-weight: 400;
	color: #999999;
}
.menu-legal a { color: #736b62; text-decoration: underline; }
.menu-legal a:hover { color: #c0593f; }
/* Copyright fixe : liens plus lisibles (11 px à 60 % d'opacité auparavant) */
.footer-legal-links { font-size: .75rem; }
.footer-legal-links a { text-decoration: underline; }
.body-copyright-light .copyright .footer-legal-links a { color: rgba(255,255,255,.92); }

/* —— 6.9 Presse ——————————————————————————————————————————————————————————————
   Ancres (#bbc-news…) : l'entrée ne passe pas sous l'en-tête fixe, et reste
   repérable à l'arrivée. Une date inconnue n'affiche rien. */
.subpage .press-entry { scroll-margin-top: 12rem; }
.subpage .press-entry:target { background-color: #efe9dd; }
.subpage .press-date:empty { display: none; }

/* —— 6.10 Page 404 : contenu court, le pied de page reste en bas d'écran ———— */
@media (min-width: 768px) {
	.subpage.subpage-404 { min-height: calc(100vh - 7rem); }
}

/* —— 6.11 Retours du vérificateur ——————————————————————————————————————————— */
/* Pièce jointe : le message d'erreur s'affichait sur la ligne du trombone.
   jquery.validate l'insère avant le champ visible : on le replace dessous. */
.control-file { display: flex; flex-direction: column; }
.control-file .file-path-wrapper { order: 1; }
.control-file label.error { order: 2; margin: .5rem 0 0; }

/* Écrans bas (1366×768, 1280×800) : le champ téléphone poussait « Envoyer »
   sous le bas de l'écran. On resserre le formulaire du Contact uniquement. */
@media (min-width: 992px) and (max-height: 860px) {
	.contact-personal-form .form-group-material { margin-bottom: 0; }
	.contact-personal-form textarea.form-control { height: 3.5rem; }
	.contact-personal-form .control-file { margin-top: .75rem; margin-bottom: 1.25rem; }
}

/* Copyright fixe : entre 768 et 1199 px il chevauchait les contenus (cartes,
   paragraphes). Les liens légaux sont dans le menu : on le masque à ces tailles. */
@media (max-width: 1199px) {
	.footer .copyright.copyright-fixed { display: none !important; }
}
/* Au-delà de 1920 px, le grand disque des Distinctions gardait sa taille en
   pixels : le début du copyright (blanc) sortait du disque. Proportions de 1920. */
@media (min-width: 1921px) {
	.slide-awards-circle2 { width: 37.76vw; height: 37.76vw; }
}

/* Menu sur écran bas (téléphone en paysage) : la liste occupait 100 % de la
   hauteur et passait sous le pied de menu. Elle prend l'espace restant et défile. */
@media (max-height: 600px) {
	.menu .menu-main { height: auto; flex: 1 1 auto; min-height: 0; }
	.menu .menu-footer { padding-top: 1rem; }
}

/* Parcours sur tablette : lunettes et mallette passaient sous les flèches et le
   texte (même correctif que sous 576 px, étendu jusqu'à 991 px). */
@media (max-width: 991px) {
	.slide-experience-image1,
	.slide-experience-image3 { display: none; }
}

/* —— 6.12 Portrait de l'accueil (original HD fourni par la cliente, détouré, image
   2560×1440) : WebP transparent (≈130 Ko) pour les navigateurs récents, le PNG
   du thème reste le repli. Sous 576 px, le texte d'accueil passerait sur le
   tailleur (gris sur rose, illisible) : le portrait n'est pas affiché. ——————— */
.slide-intro-man {
	background-image: url("../img/bg-personal-intro-man.png");
	background-image: image-set(url("../img/dr-florence-nanga-trichologue-abidjan.webp") type("image/webp"), url("../img/bg-personal-intro-man.png") type("image/png"));
}
/* Au-delà de 2200 px, le titre (en vmin) rattrapait le portrait (0 px d'écart mesuré
   à 2560×1440) : hauteur du portrait bornée selon largeur et hauteur de l'écran,
   calé en bas à droite. Écart titre→portrait mesuré ≥ 120 px de 2200 à 3840 px. */
@media (min-width: 2200px) {
	.slide-intro-man { background-size: auto min(100%, calc(57.1vw + 531px - 58.3vh)); background-position: 100% 100%; }
}
@media (max-width: 575px) {
	.slide-intro-man { display: none; }
}

/* —— 6.13 Photo dans une modale de contenu (diagnostic, traitements, head spa, Nama-Gny, histoire) :
   flottante à droite, rayon asymétrique du thème ; sur mobile, pleine largeur en carré
   (le 4:5 d'origine occuperait tout l'écran), cadré sur le haut de l'image. */
.modal-body .modal-figure { float: right; width: 42%; margin: .25rem 0 1rem 1.5rem; }
.modal-body .modal-figure img { display: block; width: 100%; height: auto; border-radius: 1rem 1rem 3rem 1rem; }
.modal-body .modal-cta { clear: both; }
@media (max-width: 575px) {
	.modal-body .modal-figure { float: none; width: 100%; margin: 0 0 1.25rem; }
	.modal-body .modal-figure img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 25%; }
}

/* —— 6.14 EN : le titre « AWARDS » (mot court) tient dans sa colonne :
   il retrouve la taille des autres titres (le plafond de 6.1 ne vaut que pour le FR). */
@media (min-width: 768px) {
	html[lang="en"] .slide-personal-awards .slide-title { font-size: 7.40740741vmin; }
}

/* —— 6.15 Presse : ligne « kit presse » au-dessus du bouton final ——————————— */
.subpage .press-kit { margin: 2.5rem 0 0; font-size: 1rem; color: #574f47; }
.subpage .press-kit a { color: #c0593f; text-decoration: underline; }

/* —— 6.16 Grandes modales (bio, distinctions) : jamais plus hautes que l'écran ;
   titre et bouton final restent visibles, seul le texte défile. —————————————— */
@media (min-width: 576px) {
	.modal-dialog.modal-lg .modal-content { max-height: calc(100vh - 3.5rem); }
	.modal-dialog.modal-lg .modal-body { overflow-y: auto; }
}
/* Le bouton final reste collé en bas de la zone qui défile : il signale qu'il y a
   une suite et reste accessible (mobile compris, où le corps défile sous 760 px). */
.modal-body .modal-cta { position: sticky; bottom: -2rem; margin-bottom: -2rem; padding: 1rem 0 2rem; background: #fff; }

/* —— 6.17 Icône TikTok (absente de LineIcons) : même pastille que le glyphe LinkedIn
   (carré 1em à coins arrondis, note découpée en creux), couleur héritée du lien
   (fill="currentColor" aussi en attribut, donc correcte même si ce CSS est en cache),
   même alignement que le glyphe (descente de 16/144 em). ——————————————————————— */
.social .icon-tiktok { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: -.111em; }

/* —— 6.18 Centres : une carte photo dans la colonne de droite de chaque slide, sous la ville
   (le thème prévoit un visuel à droite de chaque aplat). Absolue dans sa colonne : elle ne touche
   ni les flèches, ni les puces, ni le copyright. Fond CSS déclaré à partir de 1200 px :
   rien n'est téléchargé sur mobile ni tablette. Rayon du cadre vidéo de la section 7.
   Largeur : 26rem au plus, et jamais plus que la place laissée par le mot le plus long des
   titres (« PLATEAUX » ≈ 52,6vmin, le titre étant en vmin et le conteneur fixe à 1140 px).
   Hauteur : 4:5 au plus, plafonnée pour rester au-dessus du copyright. ——————————————— */
.project-photo { display: none; }
@media (min-width: 1200px) {
	.slide-personal-projects .row:first-child > .col-md-5 { position: relative; }
	.project-photo {
		display: block; position: absolute; top: calc(100% + 2.5rem);
		right: calc(15px + max(0px, 681px - 50vw)); /* sous 1366 px, la flèche « suivant » entre dans le conteneur */
		width: min(100% - 30px, 26rem, 1170px - 52.6vmin - 3rem);
		aspect-ratio: 4 / 5; max-height: min(38vh, 32rem);
		background: center / cover no-repeat; border-radius: 2rem 2rem 5rem 2rem;
	}
	.project-photo--1 {
		background-image: url("../img/head-spa-centre-florence-sante-du-cheveu.jpg");
		background-image: image-set(url("../img/head-spa-centre-florence-sante-du-cheveu-1x.webp") type("image/webp") 1x, url("../img/head-spa-centre-florence-sante-du-cheveu.webp") type("image/webp") 2x);
	}
	.project-photo--2 {
		background-position: 50% 15%; /* garde le visage quand la carte est plus carrée que la photo */
		background-image: url("../img/coiffure-centre-florence-sante-du-cheveu.jpg");
		background-image: image-set(url("../img/coiffure-centre-florence-sante-du-cheveu-1x.webp") type("image/webp") 1x, url("../img/coiffure-centre-florence-sante-du-cheveu.webp") type("image/webp") 2x);
	}
	.project-photo--3 {
		background-position: 50% 0; /* garde le visage quand la carte est plus carrée que la photo */
		background-image: url("../img/accueil-equipe-centre-florence-sante-du-cheveu.jpg");
		background-image: image-set(url("../img/accueil-equipe-centre-florence-sante-du-cheveu-1x.webp") type("image/webp") 1x, url("../img/accueil-equipe-centre-florence-sante-du-cheveu.webp") type("image/webp") 2x);
	}
	.project-photo--4 {
		background-image: url("../img/cheveux-naturels-centre-florence-sante-du-cheveu.jpg");
		background-image: image-set(url("../img/cheveux-naturels-centre-florence-sante-du-cheveu-1x.webp") type("image/webp") 1x, url("../img/cheveux-naturels-centre-florence-sante-du-cheveu.webp") type("image/webp") 2x);
	}
}

/* —— 6.19 Presse : logo du média en pastille ronde, sur la ligne du grand numéro
   (même traitement que les bulles de la section Médias de l'accueil). ——————————— */
.subpage .press-rail { position: relative; }
.subpage .press-logo { position: absolute; top: 0; right: 0; width: 56px; height: 56px; border-radius: 50%; }
@media (min-width: 768px) { .subpage .press-logo { top: .3rem; } }