/*
 * suite.css : composants qui ne servent pas au premier écran.
 * Titre de section, carte, pastille d'icône, numéro d'étape et étapes, questions, bande d'avis,
 * « L'essentiel », bloc « Bilan offert », pied de page. Les avis, la carte au clic, la carte d'un cabinet et les composants des cures ont chacun leur feuille.
 * Les jetons et la base sont dans haut.css. Mobile d'abord (390 px), puis paliers à 640, 768, 960, 1280 px.
 */

/* ---------- Titre de section : trait court, titre, filet fin ---------- */
.titre-section{--c-titre:var(--vert-titre);--c-filet:var(--vert-filet);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.titre-section--fonce{--c-titre:var(--vert-fonce)}
.titre-section--soin{--c-titre:var(--soin-texte)}
.titre-section--filet-beige{--c-filet:var(--beige-filet)}
.titre-section__trait{flex:none;width:28px;height:2px;border-radius:1px;background:var(--soin-lisere)}
.titre-section__titre{min-width:0;font-family:var(--police-titre);font-weight:600;font-size:27px;line-height:34px;color:var(--c-titre)}
.titre-section__titre em{font-style:italic;font-weight:500}
.titre-section__filet{flex:1;min-width:16px;height:1px;background:var(--c-filet)}
.titre-section__lien,.titre-section__note{flex:none;font-size:15px;line-height:24px}
.titre-section__lien{position:relative;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.titre-section__lien::after{content:"";position:absolute;inset:-10px -4px}
.titre-section__note{color:var(--encre)}
.titre-section__note strong{font-weight:600}
.titre-section__etoile{color:var(--etoile)}
@media (min-width:960px){
	.titre-section{flex-wrap:nowrap;gap:20px}
	.titre-section__trait{width:44px}
	.titre-section__titre{font-size:36px;line-height:44px}
	.titre-section__lien{font-size:16px}
}
/* Variante empilée : trait au-dessus du titre, sans filet (« Venir au cabinet », « Vos questions ») */
.titre-section--empile{flex-direction:column;align-items:flex-start;gap:14px}
.titre-section--empile .titre-section__filet{display:none}
.titre-section--empile .titre-section__titre{font-weight:700;font-size:26px;line-height:33px;color:var(--vert-fonce)}
@media (min-width:960px){
	.titre-section--empile{gap:18px}
	.titre-section--empile .titre-section__trait{width:44px}
	.titre-section--empile .titre-section__titre{font-size:34px;line-height:42px}
}
/* Variante empilée à partir de 960 px seulement : sur mobile, titre de section habituel (trait, titre, filet) */
@media (min-width:960px){
	.titre-section--empile-large{flex-direction:column;align-items:flex-start;gap:18px}
	.titre-section--empile-large .titre-section__filet{display:none}
	.titre-section--empile-large .titre-section__titre{font-weight:700;font-size:34px;line-height:42px;color:var(--vert-fonce)}
}

/* ---------- Carte ---------- */
.carte{display:flex;border-radius:14px;background:var(--blanc);color:var(--encre)}
.carte:hover{color:var(--encre)}
.carte--lisere-gauche{border-left:5px solid var(--soin-lisere)}
.carte--lisere-haut{border-top:5px solid var(--soin-lisere)}
.carte__corps{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0}
.carte__entete{display:flex;align-items:center;gap:10px}
.carte__titre{font-family:var(--police-titre);font-weight:700;font-size:18px;line-height:23px}
.carte__texte{font-size:13px;line-height:19px;color:var(--encre-douce)}
.carte__icone{color:var(--soin-trait)}
.carte__icone--bureau,.carte__lien{display:none}
.carte--cure{align-items:center;gap:14px;padding:12px 14px 12px 12px}
.carte--simple{flex-direction:column;gap:6px;padding:20px}
.carte--simple .carte__corps{gap:6px}
.carte--simple .carte__titre{font-size:18px;line-height:24px}
.carte--simple .carte__texte{font-size:14px;line-height:21px}
@media (min-width:1280px){
	.carte--cure{gap:22px;padding:20px 24px 20px 20px}
	.carte--cure .carte__corps{gap:4px}
	.carte--cure .carte__titre{font-size:22px;line-height:28px}
	.carte--cure .carte__texte{font-size:14px;line-height:22px}
	.carte__icone--bureau{display:block}
	.carte__icone--mobile{display:none}
	.carte__lien{display:block;margin-top:4px;font-size:14px;line-height:21px;font-weight:600;color:var(--soin-texte);text-decoration:underline;text-underline-offset:4px}
}

/* ---------- Pastille d'icône ---------- */
.pastille-icone{display:flex;flex:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:var(--soin-teinte);color:var(--soin-texte)}
.pastille-icone .icone{width:18px;height:18px}
.pastille-icone--grande{width:46px;height:46px;background:var(--blanc);color:var(--soin-trait)}
.pastille-icone--grande .icone{width:26px;height:26px}
@media (min-width:1280px){
	.pastille-icone{width:42px;height:42px}
	.pastille-icone .icone{width:20px;height:20px}
}

/* ---------- Numéro d'étape et étapes ---------- */
.numero-etape{display:flex;flex:none;align-items:center;justify-content:center;width:46px;height:46px;border:1.5px solid var(--soin-lisere);border-radius:50%;font-family:var(--police-titre);font-weight:600;font-size:17px;color:var(--soin-texte)}
.numero-etape--sur-vert{width:50px;height:50px;border-color:var(--vert-pale);font-size:18px;color:var(--blanc)}
.etapes{display:flex;flex-direction:column;gap:18px}
.etape{position:relative;display:flex;align-items:flex-start;gap:14px}
.etape--sur-vert{gap:16px}
.etape__corps{display:flex;flex-direction:column;gap:2px}
.etape__titre{font-family:var(--police-titre);font-weight:700;font-size:19px;line-height:25px}
.etape__texte{font-size:15px;line-height:23px;color:var(--encre-douce)}
.etape--sur-vert .etape__titre{font-size:20px;line-height:26px}
.etape--sur-vert .etape__texte{color:var(--blanc)}
.etape__suite{color:var(--vert-pale)}
@media (min-width:960px){
	.etapes--bandeau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
}
@media (min-width:1280px){
	.etapes{gap:20px}
	.numero-etape{width:52px;height:52px;font-size:19px}
	.numero-etape--sur-vert{width:58px;height:58px;font-size:21px}
	.etape{gap:18px}
	.etape__corps{gap:4px}
	.etape__titre{font-size:20px;line-height:26px}
	.etape__texte{line-height:24px}
	.etape--sur-vert .etape__corps{gap:6px}
	.etape--sur-vert .etape__titre{font-size:22px;line-height:28px}
	.etape--sur-vert .etape__texte{font-size:14px;line-height:22px}
	.etape--sur-vert .etape__suite{display:block}
	.etapes--bandeau{gap:40px}
}


/* ---------- Questions dépliables ---------- */
.questions{border-bottom:1px solid var(--filet)}
.questions__item{padding:16px 0;border-top:1px solid var(--filet)}
.questions__question{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:40px;cursor:pointer;list-style:none}
.questions__question::-webkit-details-marker{display:none}
.questions__question::after{content:"";position:absolute;inset:-4px 0}
.questions__texte{font-family:var(--police-titre);font-weight:600;font-size:17px;line-height:24px}
.questions__pastille{display:flex;flex:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:var(--vert-clair);color:var(--vert-fonce)}
.questions__moins,.questions__item[open] .questions__plus{display:none}
.questions__item[open] .questions__moins{display:block}
.questions__reponse{margin-top:8px;font-size:15px;line-height:25px;color:var(--texte-courant)}
.questions__reponse p+p{margin-top:10px}
@media (min-width:960px){
	.questions__item{padding:20px 0}
	.questions__texte{font-size:19px;line-height:26px}
}

/* ---------- Étoiles d'une note ---------- */
.etoiles{font-size:16px;line-height:normal;letter-spacing:4px;color:var(--etoile)}
.etoiles__vides{color:var(--etoile-vide)}
.etoiles--sur-vert{color:var(--etoile-claire)}

/* ---------- « L'essentiel » ---------- */
.essentiel__titre{font-size:12px;letter-spacing:.22em}
.essentiel__liste{display:flex;flex-direction:column;margin-top:6px}
.essentiel__point{display:flex;align-items:flex-start;gap:12px;padding:12px 0}
.essentiel__point+.essentiel__point{border-top:1px solid var(--filet)}
.essentiel__texte{display:flex;flex-direction:column;gap:1px}
.essentiel__etiquette{font-family:var(--police-titre);font-weight:700;font-size:16px;line-height:normal;color:var(--vert-fonce)}
.essentiel__detail{font-size:14px;line-height:21px;color:var(--texte-courant)}
@media (min-width:640px){
	.essentiel__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 32px}
	.essentiel__point+.essentiel__point{border-top:0}
}
@media (min-width:1280px){
	.essentiel__titre{letter-spacing:.24em}
	.essentiel__liste{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}
	.essentiel--trois .essentiel__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
	.essentiel__point{gap:14px;padding:0}
	.essentiel__texte{gap:3px}
	.essentiel__etiquette{font-size:18px;line-height:normal}
	.essentiel__detail{font-size:15px;line-height:23px}
}

/* ---------- Bloc « Bilan offert » ---------- */
.bloc-bilan{position:relative;display:flex;flex-direction:column;gap:14px;overflow:hidden;padding:22px 20px;border-radius:16px;background:var(--vert);color:var(--blanc)}
.bloc-bilan__corps,.bloc-bilan__bouton{position:relative}
.bloc-bilan__titre{font-family:var(--police-titre);font-weight:700;font-size:21px;line-height:27px}
.bloc-bilan__texte{display:none}
.bloc-bilan__bouton{--h:50px;--fs:15px;--px:24px}
@media (min-width:768px){
	.bloc-bilan{flex-direction:row;align-items:center;justify-content:space-between;gap:24px;padding:32px 40px;border-radius:18px}
	.bloc-bilan__corps{display:flex;flex-direction:column;gap:4px}
	.bloc-bilan__titre{font-size:27px;line-height:34px}
	.bloc-bilan__texte{display:block;font-size:16px;line-height:26px;color:var(--blanc)}
	.bloc-bilan__bouton{flex:none;--h:54px;--fs:16px;--px:28px}
}
/* Un bouton par cabinet */
.bloc-bilan__boutons{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bloc-bilan__boutons .bloc-bilan__bouton{--px:8px;border-width:0}
@media (min-width:768px){
	.bloc-bilan__boutons{display:flex;flex:none;gap:12px}
	.bloc-bilan__boutons .bloc-bilan__bouton{--px:26px}
}

/* Bilan en colonne étroite (colonne latérale des articles et des fiches saison) */
.bloc-bilan--colonne{flex-direction:column;align-items:stretch;gap:10px;padding:24px;border-radius:16px}
.bloc-bilan--colonne .bloc-bilan__corps{display:flex;flex-direction:column;gap:10px}
.bloc-bilan--colonne .bloc-bilan__titre{font-size:21px;line-height:27px}
.bloc-bilan--colonne .bloc-bilan__texte{display:block;font-size:14px;line-height:22px}
.bloc-bilan--colonne .bloc-bilan__bouton{--h:48px;--fs:15px;margin-top:6px;border-radius:10px}
.bloc-bilan--colonne .grand-cercle--bilan{top:auto;right:-80px;bottom:-110px;width:220px;height:220px}
/* ---------- Pied de page ---------- */
.pied{position:relative;overflow:hidden;background:var(--vert);color:var(--blanc)}
.pied a:not(.bouton){color:var(--blanc)}
.pied__contenu{position:relative;width:100%;max-width:var(--largeur);margin-inline:auto;padding:40px var(--marge) 32px}
.pied__grille{display:grid;gap:28px 40px}
.pied__bloc{display:flex;flex-direction:column;align-items:flex-start}
.pied__titre-grand{font-family:var(--police-titre);font-weight:700;font-size:28px;line-height:36px}
.pied__bloc--rdv{gap:16px}
.pied .bouton{--px:22px}
.pied__titre{font-family:var(--police-titre);font-weight:700;font-size:18px;line-height:24px}
.pied__liste{display:flex;flex-direction:column;margin-top:4px;font-size:15px}
.pied__liste li{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;min-height:44px}
.pied__liste a{display:inline-flex;align-items:center;min-height:44px}
.pied__lien-fort{font-weight:600;text-decoration:underline;text-underline-offset:4px}
.pied__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 32px;margin-top:12px;font-size:14px}
.pied__liens-bas{display:flex;flex-wrap:wrap;gap:0 24px}
/* La rangée du bas commence après le grand cercle du pied (en bas à gauche sur ordinateur) : aucun texte ni aplat sur le cercle */
.pied__copyright{margin:0}
@media (min-width:960px) and (max-width:1439px){.pied__legal{padding-inline-start:320px}}
.pied__reseaux{display:flex;flex-wrap:wrap;gap:0 32px}
.pied__reseau{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px}
.pied__reseau-lieu{font-weight:600}
.pied__liens-bas a{display:inline-flex;align-items:center;min-height:44px}
.pied__reseau .pied__liens-bas{gap:0}
.pied__liens-bas .pied__logo{justify-content:center;min-width:44px;min-height:44px}
.icone--logo{fill:currentColor;stroke:none}
.pied__liste a,.pied__liens-bas a{min-width:44px}
.pied__mention{margin-top:30px;padding-top:20px;border-top:1px solid var(--vert-filet-pied);font-size:13px;line-height:20px}
@media (min-width:640px){.pied__grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1280px){
	.pied__contenu{padding-block:52px 44px}
	.pied__grille{grid-template-columns:1.15fr 1.15fr .9fr 1fr}
	.pied__titre-grand{font-size:32px;line-height:40px}
	.pied__titre{font-size:18px}
	.pied__liste{margin-top:7px;gap:7px;line-height:23px}
	.pied__liste li{min-height:0}
	.pied__liste a{min-height:24px}
	.pied__liens-bas a{min-height:32px}
	.pied__liens-bas .pied__logo{min-height:44px}
}

/* ---------- Pastille de note (posée sur une photo) ---------- */
.pastille-note{position:absolute;z-index:1;left:-22px;bottom:36px;display:flex;flex-direction:column;padding:10px 14px;border-radius:12px;background:var(--blanc);box-shadow:0 10px 22px rgba(60,50,30,.2);line-height:normal;animation:flottement 5s ease-in-out infinite alternate}
.pastille-note__note{font-family:var(--police-titre);font-weight:700;font-size:17px;line-height:normal;color:var(--encre)}
.pastille-note__etoile{color:var(--etoile)}
.pastille-note__detail{font-size:12px;line-height:normal;color:var(--encre-douce)}
@media (min-width:1280px){
	.pastille-note{left:-30px;bottom:91px;padding:12px 18px;border-radius:14px;box-shadow:var(--ombre-flottante)}
	.pastille-note__note{font-size:20px}
	.pastille-note__detail{font-size:13px}
}

/* ---------- Puces : « Et aussi », « Près de chez vous » ---------- */
.puces{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.puces__titre{margin-right:4px;font-size:15px;line-height:24px;color:var(--texte-courant)}
.puces__liste{display:flex;flex-wrap:wrap;gap:10px 12px}
.puce{display:flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;border:1px solid var(--filet);border-radius:22px;background:var(--blanc);font-size:15px;font-weight:500;line-height:normal;color:var(--encre)}
.puce:hover{color:var(--encre);border-color:var(--soin-lisere)}
.puce__pastille{flex:none;width:10px;height:10px;border-radius:50%;background:var(--soin-lisere)}

/* ---------- Lien d'appui ---------- */
.lien-fort{position:relative;font-size:15px;line-height:24px;font-weight:600;text-decoration:underline;text-underline-offset:5px}
.lien-fort::after{content:"";position:absolute;inset:-10px -4px}
@media (min-width:960px){.lien-fort{font-size:16px}}

/* ---------- Photo en fenêtre à gauche, texte à droite ---------- */
.photo-texte{background:var(--creme)}
.photo-texte--blanc{background:var(--blanc)}
.photo-texte__contenu{display:flex;flex-direction:column;gap:22px;width:100%;max-width:var(--largeur);margin-inline:auto;padding:36px var(--marge)}
.photo-texte__photo{display:flex;justify-content:center;padding:8px}
.photo-texte__texte{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.photo-texte__titre{margin-top:12px;font-family:var(--police-titre);font-weight:700;font-size:26px;line-height:33px;color:var(--soin-texte)}
.photo-texte__titre em{font-style:italic;font-weight:500;color:var(--vert)}
.photo-texte__paragraphe{margin-top:14px;font-size:15px;line-height:25px;color:var(--texte-courant)}
.photo-texte__texte .lien-fort{align-self:flex-start;margin-top:22px}
.photo-texte__actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px 24px;margin-top:22px}
.photo-texte__texte .photo-texte__actions .lien-fort{margin-top:0}
@media (min-width:960px){
	.photo-texte__contenu{display:grid;grid-template-columns:clamp(320px,36vw,460px) minmax(0,1fr);align-items:center;gap:48px;padding-block:72px}
	.photo-texte--approche .photo-texte__contenu{grid-template-columns:clamp(320px,34vw,420px) minmax(0,1fr)}
	.photo-texte__photo{padding:10px}
	.photo-texte__photo .fenetre{width:100%}
	.photo-texte--bilan .fenetre{--ratio:440/460}
	.photo-texte__titre{font-size:38px;line-height:46px}
	.photo-texte--bilan .photo-texte__titre{font-size:40px;line-height:48px}
	.photo-texte__paragraphe{font-size:16px;line-height:28px}
	.photo-texte--bilan .photo-texte__paragraphe{line-height:27px}
}
/* Photo à droite (alternance automatique) : ordinateur seulement, l'ordre du code et du mobile ne change pas */
@media (min-width:960px){
	.photo-texte--inverse .photo-texte__contenu{grid-template-columns:minmax(0,1fr) clamp(320px,36vw,460px)}
	.photo-texte--inverse.photo-texte--approche .photo-texte__contenu{grid-template-columns:minmax(0,1fr) clamp(320px,34vw,420px)}
	.photo-texte--inverse.photo-texte--deroule .photo-texte__contenu{grid-template-columns:minmax(0,1fr) clamp(320px,34.4vw,440px)}
	.photo-texte--inverse .photo-texte__photo{order:2}
}
@media (min-width:1280px){.photo-texte__contenu{gap:80px}}
/* Sans photo : pas de colonne vide, le texte passe dans la colonne de lecture centrée */
@media (min-width:960px){
	.photo-texte--sans-photo .photo-texte__contenu{display:block}
	.photo-texte--sans-photo .photo-texte__texte{max-width:var(--colonne-lecture);margin-inline:auto}
}

/* Appuis (lignes à liseré) et boutons du bloc bilan */
.appuis{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.appui{display:flex;align-items:baseline;gap:10px;padding:14px 20px;border-left:5px solid var(--vert-lisere);border-radius:14px;background:var(--blanc)}
.appui__terme{flex:none;width:118px;font-weight:600;font-size:16px;line-height:normal;color:var(--vert-titre)}
.appui__texte{font-size:15px;line-height:22px;color:var(--encre-douce)}
.photo-texte__boutons{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.photo-texte__boutons .bouton{--h:54px;--px:26px;--fs:16px}
@media (max-width:639px){
	/* Mobile : le bloc bilan devient une carte compacte (titre et deux boutons) */
	.photo-texte--bilan:last-child{margin-bottom:36px}
	.photo-texte--bilan{margin-inline:var(--marge);border-left:5px solid var(--vert-lisere);border-radius:16px;background:var(--blanc)}
	.photo-texte--bilan .photo-texte__contenu{padding:22px 20px}
	.photo-texte--bilan .photo-texte__photo,.photo-texte--bilan .photo-texte__surtitre,.photo-texte--bilan .photo-texte__paragraphe,.photo-texte--bilan .appuis{display:none}
	.photo-texte--bilan .photo-texte__titre{margin-top:0;font-size:22px;line-height:28px}
	.photo-texte--bilan .photo-texte__boutons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
	.photo-texte--bilan .photo-texte__boutons .bouton{--h:50px;--px:8px;--fs:15px;background:var(--vert);border-color:transparent;color:var(--blanc)}
	/* Mobile : la photo d'un bloc sur deux (choisie par le gabarit, voir `parapuncture_photo_mobile`) est montrée au-dessus du texte, à plat, en 16/9, pleine largeur du bloc */
	.photo-texte.photo-texte--photo-mobile .photo-texte__photo{display:block;padding:0}
	.photo-texte.photo-texte--photo-mobile .photo-texte__photo .fenetre{--ratio:16/9;--anneau:0px;--trait:0px;width:100%;max-width:none}
	.photo-texte.photo-texte--photo-mobile .photo-texte__photo .fenetre__cadre{border-radius:14px}
}

/* ---------- Vignette de vidéo ---------- */
.vignette-video{position:relative;display:block;width:150px;height:266px;overflow:hidden;border-radius:14px;background:var(--vert-clair)}
.vignette-video__image{width:100%;height:100%;object-fit:cover;object-position:var(--cadrage,50% 50%)}
.vignette-video__lecture{position:absolute;right:10px;bottom:10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--blanc);color:var(--vert-fonce)}
.vignette-video__lecture .icone{width:16px;height:16px;fill:currentColor;stroke:none}
@media (min-width:960px){
	.vignette-video{width:auto;height:300px}
	.vignette-video__lecture{width:40px;height:40px}
	.vignette-video__lecture .icone{width:18px;height:18px}
}

/* ---------- Colonnes de lecture : au-delà de 1 280 px, elles gardent la largeur qu'elles ont à 1 280 px ----------
 * Le contenu s'élargit (grilles, bandeaux, photos) mais pas les lignes de texte courant : chaque valeur est la largeur mesurée à 1 280 px
 * sur chaque gabarit où la classe sert. Rien ne s'applique à 1 280 px ni en dessous. */
@media (min-width:1281px){
	.photo-texte:not(.photo-texte--sans-photo) .photo-texte__texte{max-width:620px;margin-inline:auto}
	.photo-texte--bilan:not(.photo-texte--sans-photo) .photo-texte__texte{max-width:580px}
	.photo-texte--deroule:not(.photo-texte--sans-photo) .photo-texte__texte{max-width:596px}
	.questions__reponse{max-width:678px}
	.bande--blanche .questions__reponse{max-width:550px}
	.venir__texte,.venir__questions .questions__reponse{max-width:524px}
	.cabinets-bandeau__texte,.cure-cabinets__texte,.methode-cartes__texte,.contact-ecrire__texte,.conteneur.bande>article{max-width:1120px}
	.bloc-lettre__texte{max-width:532px}
	.encadre__texte{max-width:483px}
	.methode-encadres--haut .encadre__texte{max-width:1055px}
	.formulaire--carte .formulaire__information{max-width:628px;margin-inline:auto}
	.formulaire--carte.formulaire--contact .formulaire__information{max-width:740px}
}