/* Retouches du lot 6, R10b et R18 (plus d'air, réponse de Vince du 2026-10-16) : page Contact (labo/contact-hero.html, validée par Vince). Hero en deux moitiés à la hauteur
   de l'écran : texte (titre, nous joindre, les trois entreprises, en rangées à filets d'evermind-contact-4) et photo
   pleine hauteur (cargo-contact-2) avec la carte de l'adresse posée en bas ; puis la carte Google ; puis le formulaire. */
.hero-contact_stoud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; min-height: 100svh; background: var(--_🎨-color--base---base--light-100); color: var(--_🎨-color--base---base--dark-100); }
.hero-contact_texte { padding: calc(var(--haut-collant, 159px) + var(--spacing--space-tiny)) var(--stoud-marge-laterale, 32px) var(--spacing--space-medium); display: flex; flex-direction: column; justify-content: space-between; gap: var(--spacing--space-medium); min-width: 0; }
.hero-contact_titre { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-tiny); }
.hero-contact_titre h1 { margin: 0; font-size: clamp(3rem, 5.6vw, 5.25rem); line-height: .95; letter-spacing: -.06em; }
.hero-contact_titre p { margin: 0; font-size: 1.25rem; max-width: 34ch; }
.rangees-contact { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--_🎨-color--base---base--dark-16); }
.rangee-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing--space-tiny); align-items: center; padding: var(--spacing--space-tiny) 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); }
.rangee-contact strong { display: block; font-weight: 500; font-size: 17px; }
.rangee-contact_sous { display: block; margin-top: 2px; font-size: 14px; color: var(--_🎨-color--base---base--dark-64); }
.rangee-contact_responsable { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.rangee-contact_responsable:hover { color: var(--_🎨-color--base---base--dark-100); text-decoration-color: currentColor; }
.rangee-contact_liens { margin-top: 8px; font-size: 14px; }
.rangee-contact_liens a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.rangee-contact_ico, .rangee-contact_logo { width: 2.5rem; height: 2.5rem; border-radius: var(--_🔘-radius---general--default); display: grid; place-items: center; flex: none; }
.rangee-contact_ico { background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); }
.rangee-contact_ico svg { width: 1.25rem; height: 1.25rem; }
.rangee-contact_logo { background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
/* La photo fait toujours la hauteur de l'écran et colle en haut : la carte de l'adresse reste au bas de l'écran pendant que la
   colonne de texte (plus aérée, R18) défile à côté quand elle est plus haute que l'écran. */
.hero-contact_photo { position: sticky; top: 0; align-self: start; height: 100vh; height: 100svh; overflow: hidden; min-height: 24rem; }
.hero-contact_photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Lot 11, R10 (Vince) : la photo à 110vh, coin en bas à gauche arrondi (rayon du site ; les autres coins restent carrés,
   M5). Elle colle à -10vh : après 10vh de défilement, son bas (le coin arrondi) reste visible pendant que la colonne de
   texte défile. La pastille de l'adresse garde sa place à l'écran au chargement (10vh au-dessus du bas de la photo). Au
   téléphone, la photo garde sa hauteur (80vh, 32rem au moins), avec le même coin arrondi. */
.hero-contact_photo { border-bottom-left-radius: var(--_🔘-radius---general--large); }
@media (min-width: 992px) {
  .hero-contact_photo { height: 110vh; height: 110svh; top: -10vh; top: -10svh; }
  .hero-contact_photo .carte-adresse_stoud { bottom: calc(10vh + var(--spacing--space-tiny)); bottom: calc(10svh + var(--spacing--space-tiny)); }
}
/* Lot 10, M6 (choix P5 : la pastille P2 sur verre sombre) : la carte de l'adresse devient une pastille sur une ligne, posée
   au bas de la photo : point jaune, la rue en blanc, la flèche ronde (« Voir sur la carte » gardé pour les lecteurs d'écran),
   sur un voile noir flouté. La ville et les heures sont dans la section de la carte. M5 : coins de la photo carrés. */
/* (Les règles de la pastille, .carte-adresse_*, sont dans stoud.css depuis le lot 11, R5 : /collectif s'en sert aussi.) */
/* Lot 10, M8 (version C, carte à gauche) : la carte Google remplit la moitié gauche jusqu'au bord de l'écran, arrondie du
   côté du texte ; à droite, le titre, une phrase, trois rangées à icônes (adresse, heures, courriel, tirés des Réglages) et
   le bouton de l'itinéraire. Sur téléphone : le texte au-dessus, la carte dessous. La carte garde son chargement au
   défilement et son filtre gris. */
.carte-contact_stoud { padding: var(--stoud-espace-section) var(--stoud-marge-laterale, 32px) var(--stoud-espace-section) 0; scroll-margin-top: var(--haut-collant, 159px); }
.carte-contact_grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--spacing--space-large); align-items: stretch; min-height: min(100vh, 52rem); }
.carte-contact_texte { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing--space-small); }
.carte-contact_titre { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing--space-xx-small); }
.carte-contact_titre h2, .carte-contact_titre p { margin: 0; }
.carte-contact_carte { order: -1; overflow: hidden; min-height: 22rem; border-radius: 0 var(--_🔘-radius---general--large) var(--_🔘-radius---general--large) 0; background: var(--_🎨-color--base---base--dark-4); }
.carte-contact_carte iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.05) brightness(1.03); }
/* Lot 10, P39 (Vince : « des tons de jaune dans la map ») : un voile jaune du Stoud en produit (multiply) sur la carte en
   gris : le fond devient crème, les rues et les textes restent lisibles. Le voile ne prend aucun clic. */
.carte-contact_carte { position: relative; }
.carte-contact_carte::after { content: ""; position: absolute; inset: 0; background: var(--stoud-jaune, #fabd4a); mix-blend-mode: multiply; opacity: .32; pointer-events: none; }
/* Chantier K (Loi 25) : la carte ne se charge qu'au clic. Le bouton couvre le cadre, sur le fond crème du voile. */
.carte-contact_afficher { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--spacing--space-small); border: 0; background: transparent; color: var(--_🎨-color--base---base--dark-100); font: inherit; text-align: center; cursor: pointer; }
.carte-contact_pin { width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--stoud-jaune, #fabd4a); transition: transform .3s ease; }
.carte-contact_pin svg { width: 26px; height: 26px; }
.carte-contact_afficher:hover .carte-contact_pin { transform: scale(1.06); }
.carte-contact_afficher:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
.carte-contact_afficher-titre { font-weight: 500; font-size: 18px; }
.carte-contact_mention { font-size: 14px; opacity: .7; max-width: 22rem; }
@media (prefers-reduced-motion: reduce) { .carte-contact_pin { transition: none; } }
.carte-contact_rangees { list-style: none; margin: 0; padding: 0; }
.carte-contact_rangees li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--spacing--space-tiny); align-items: center; padding: var(--spacing--space-tiny) 0; border-bottom: 1px solid var(--_🎨-color--base---base--dark-16); }
.carte-contact_rangees li:first-child { border-top: 1px solid var(--_🎨-color--base---base--dark-16); }
.carte-contact_rangees strong { display: block; font-weight: 500; font-size: 17px; }
.carte-contact_rangees address, .carte-contact_rangees span, .carte-contact_rangees a { font-style: normal; color: var(--_🎨-color--base---base--dark-64); }
.carte-contact_rangees a { text-decoration: none; }
.carte-contact_rangees a:hover { color: var(--_🎨-color--base---base--dark-100); }
.carte-contact_ico { width: 2.5rem; height: 2.5rem; border-radius: var(--_🔘-radius---general--default); display: grid; place-items: center; background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); flex: none; }
.carte-contact_ico svg { width: 20px; height: 20px; display: block; }

/* Lot 10, M10 (version B, d'après algarve-contact-1 et aiaiaiai-contact-1 de BYQ) : le formulaire quitte la carte noire.
   Grand titre en deux tons sur toute la largeur ; en bas à gauche, courriel, adresse et le renvoi à la soumission ; à
   droite, champs à étiquettes en petites capitales, soulignés, deux par rangée ; sujets en cases sur deux colonnes ;
   bouton noir pleine largeur, consentement dessous. Variante « b » de FormulaireDemande (Réserver et Rejoindre inchangés). */
.formulaire-contact_stoud { padding: var(--stoud-espace-section) var(--stoud-marge-laterale, 32px); }
.formulaire-contact_titre { margin: 0 0 var(--spacing--space-large); max-width: 60rem; }
.formulaire-contact_titre > span + span { display: block; color: var(--_🎨-color--base---base--dark-48); }
.formulaire-contact_grille { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--spacing--space-large); }
.formulaire-contact_infos { align-self: end; display: flex; flex-direction: column; gap: var(--spacing--space-small); }
.formulaire-contact_info address { font-style: normal; }
.formulaire-contact_info a { color: inherit; text-decoration: none; }
.formulaire-contact_info a.formulaire-contact_lien { text-decoration: underline; text-underline-offset: 3px; }
.formulaire-contact_etiquette { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--_🎨-color--base---base--dark-64); margin-bottom: 6px; }
.formulaire-contact_etiquette::before { content: "("; }
.formulaire-contact_etiquette::after { content: ")"; }
/* (Le formulaire M10, .formulaire-b, .champs-b, .champ-b, .cases-b : dans stoud.css depuis le lot 11, E5 : /rejoindre s'en sert aussi.) */
/* Lot 10, M7 (version C épurée ; labo/lot10/M7/C2.html) : les trois entreprises, sous le hero. Grand titre en deux tons ;
   trois cartes numérotées : en haut le numéro et une flèche ronde (jaune et pivotée au survol) ; en bas le nom, les
   expertises sur une ligne, « Responsable » et « Site » en deux petites colonnes sous un filet. Au survol, la photo de
   l'entreprise remplit la carte ; sur un écran tactile, les photos sont toujours visibles. */
.entreprises-contact_stoud { padding: var(--stoud-espace-section) var(--stoud-marge-laterale, 32px) 0; }
.entreprises-contact_tete { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--layout-grid--gutter); align-items: end; margin-bottom: var(--spacing--space-large); }
.entreprises-contact_tete h2 { margin: var(--spacing--space-xx-small) 0 0; max-width: 52rem; }
.entreprises-contact_tete h2 > span + span { color: var(--_🎨-color--base---base--dark-48); }
.entreprises-contact_tete p { margin: 0; }
.entreprises-contact_grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); /* 3 entreprises : 3 colonnes ; 4 : 4 */ gap: var(--spacing--space-xx-small); }
.entreprise_carte { --trait: var(--_🎨-color--base---base--dark-12); --doux: var(--_🎨-color--base---base--dark-64); position: relative; overflow: hidden; min-height: 26rem; display: flex; flex-direction: column; justify-content: space-between; padding: var(--spacing--space-small); border-radius: var(--_🔘-radius---general--large); background: var(--_🎨-color--base---base--dark-4); color: var(--_🎨-color--base---base--dark-100); transition: color .5s ease; }
.entreprise_photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .5s ease, transform .8s ease; z-index: 0; }
.entreprise_carte::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, var(--_🎨-color--base---base--dark-32) 0%, var(--_🎨-color--base---base--dark-0) 35%, var(--_🎨-color--base---base--dark-88) 100%); opacity: 0; transition: opacity .5s ease; }
.entreprise_carte > div { position: relative; z-index: 1; }
.entreprise_carte:is(:hover, :focus-within) > .entreprise_photo { opacity: 1; transform: none; }
.entreprise_carte:is(:hover, :focus-within)::after { opacity: 1; }
.entreprise_carte:is(:hover, :focus-within) { color: var(--_🎨-color--base---base--light-100); --trait: var(--_🎨-color--base---base--light-24); --doux: var(--_🎨-color--base---base--light-64); }
.entreprise_haut { display: flex; justify-content: space-between; align-items: center; }
.entreprise_numero { font-size: 13px; letter-spacing: .04em; font-variant-numeric: tabular-nums; color: var(--doux); }
.entreprise_fleche { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--_🎨-color--base---base--dark-100); color: var(--_🎨-color--base---base--light-100); transition: transform .3s ease, background-color .3s ease, color .3s ease; }
.entreprise_fleche svg { width: 16px; height: 16px; display: block; }
.entreprise_fleche:focus-visible { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
.entreprise_carte:is(:hover, :focus-within) .entreprise_fleche { background: var(--stoud-jaune); color: var(--_🎨-color--base---base--dark-100); transform: rotate(-45deg); }
.entreprise_bas { display: flex; flex-direction: column; gap: var(--spacing--space-small); }
.entreprise_ident { display: flex; flex-direction: column; gap: 6px; }
.entreprise_ident h3, .entreprise_expertises { margin: 0; }
.entreprise_expertises { color: var(--doux); }
.entreprise_meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--spacing--space-tiny); padding-top: var(--spacing--space-tiny); border-top: 1px solid var(--trait); }
.entreprise_meta dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--doux); margin-bottom: 4px; }
.entreprise_meta dd { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.entreprise_meta a { color: inherit; text-decoration: none; }
.entreprise_meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (hover: none) {
  .entreprise_carte { color: var(--_🎨-color--base---base--light-100); --trait: var(--_🎨-color--base---base--light-24); --doux: var(--_🎨-color--base---base--light-64); }
  .entreprise_carte > .entreprise_photo { opacity: 1; transform: none; }
  .entreprise_carte::after { opacity: 1; }
}
/* Lot 11, R11 (Vince : la photo des cartes doit apparaître et disparaître en douceur) : site-easing.css (« .main-wrapper * »)
   écrasait ces transitions à poids égal, la photo et le voile passaient d'un coup. Redéclarées sous .main-wrapper, à la
   courbe du site : fondu de 0,6 s et léger zoom (1,06 → 1) sur 1,1 s, à l'aller comme au retour. */
.main-wrapper .entreprise_carte { transition: color .6s var(--stoud-courbe); }
.main-wrapper .entreprise_photo { transition: opacity .6s var(--stoud-courbe), transform 1.1s var(--stoud-courbe); }
.main-wrapper .entreprise_carte::after { transition: opacity .6s var(--stoud-courbe); }
.main-wrapper .entreprise_fleche { transition: transform .45s var(--stoud-courbe), background-color .45s var(--stoud-courbe), color .45s var(--stoud-courbe); }
@media (prefers-reduced-motion: reduce) { .main-wrapper .entreprise_carte, .main-wrapper .entreprise_photo, .main-wrapper .entreprise_carte::after, .main-wrapper .entreprise_fleche { transition: none; } }
@media (max-width: 991px) {
  .carte-contact_stoud { padding-left: var(--stoud-marge-laterale, 16px); }
  .carte-contact_grille, .formulaire-contact_grille, .entreprises-contact_tete, .entreprises-contact_grille { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .entreprise_carte { min-height: 20rem; }
  .carte-contact_carte { order: 0; min-height: 24rem; border-radius: var(--_🔘-radius---general--large); }
  .hero-contact_stoud { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-contact_photo { position: relative; order: -1; height: 80vh; height: 80svh; min-height: 32rem; }
  .hero-contact_texte { padding-top: var(--spacing--space-small); }
}

/* Lot 10, P40 (Vince) : toute la carte d'une entreprise mène à son site. Un seul lien par carte (la flèche, avec son nom
   accessible « Visiter le site de… ») dont la zone de clic couvre la carte ; le domaine n'est plus un lien à part. Survol
   plus doux (0,7 s, courbe du site) et flèche plus grande dans son rond. En mode édition, la zone de clic s'efface : les
   textes de la carte restent modifiables. */
.entreprise_carte.is-lien { cursor: pointer; }
/* Élément flex, la rangée du haut forme sa propre pile même sans position : elle passe au-dessus du bas de la carte pour
   que la zone du lien (::before de la flèche) le couvre. */
.entreprise_carte.is-lien > .entreprise_haut { position: static; z-index: 3; }
.entreprise_carte.is-lien .entreprise_fleche::before { content: ""; position: absolute; inset: 0; z-index: 2; }
.entreprise_carte.is-lien:has(.entreprise_fleche:focus-visible) { outline: 2px solid var(--stoud-jaune); outline-offset: 3px; }
.entreprise_carte.is-lien .entreprise_fleche:focus-visible { outline: none; }
html.unik-edition .entreprise_carte.is-lien .entreprise_fleche::before { display: none; }
.entreprise_carte { transition: color .7s var(--stoud-courbe); }
.entreprise_photo { transition: opacity .7s var(--stoud-courbe), transform 1.1s var(--stoud-courbe); }
.entreprise_carte::after { transition: opacity .7s var(--stoud-courbe); }
/* La rotation passe à l'icône : un transform sur la flèche ferait d'elle le repère de sa zone de clic (::before), qui
   rétrécirait au survol. */
.entreprise_fleche { width: 3rem; height: 3rem; transition: background-color .5s ease, color .5s ease; }
.entreprise_fleche svg { width: 1.625rem; height: 1.625rem; transition: transform .6s var(--stoud-courbe); }
.entreprise_carte:is(:hover, :focus-within) .entreprise_fleche { transform: none; }
.entreprise_carte:is(:hover, :focus-within) .entreprise_fleche svg { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) { .entreprise_carte, .entreprise_photo, .entreprise_carte::after, .entreprise_fleche, .entreprise_fleche svg { transition: none; } }

/* Lot 10, P41 (Vince) : le formulaire se détache : une carte blanche, un trait fin, une ombre douce et de grands
   coins, comme les cartes du site. Le bouton du hero y mène (#formulaire), sous le haut collant. */
.formulaire-contact_stoud { scroll-margin-top: var(--haut-collant, 159px); }
.hero-contact_titre .button-group { margin-top: var(--spacing--space-xx-small); }