/* ========================================================================== assets/css/contact.css -------------------------------------------------------------------------- Page « Contact » — 3 blocs (IDH · 2 · Marque & contact), charte --idh-* : .contact-infos [idh_coordonnees] — identité + coordonnées + réseaux .contact-form [idh_contact] — formulaire « Envoyer un message » .partenaires [idh_partenaires] — bande de logos Les deux cartes sont pensées pour vivre côte à côte (colonnes Elementor) ou seules ; hauteurs égales via align-items:stretch de la colonne parente. ========================================================================== */ /* ========================================================================== 1 · COORDONNÉES ========================================================================== */ /* Les deux cartes remplissent la hauteur de leur colonne. `height:100%` ne suffit pas : le widget « Shortcode » d'Elementor imbrique la sortie dans .elementor-widget-container > .elementor-shortcode, wrappers sans hauteur. On rend toute cette chaîne flex via :has() pour que la carte s'étire jusqu'au bas de la colonne la plus haute (align-items:stretch du conteneur). */ .elementor-widget-shortcode:has(.contact-infos), .elementor-widget-shortcode:has(.contact-form), .elementor-widget-shortcode:has(.contact-infos) > .elementor-widget-container, .elementor-widget-shortcode:has(.contact-form) > .elementor-widget-container, .elementor-widget-shortcode:has(.contact-infos) .elementor-shortcode, .elementor-widget-shortcode:has(.contact-form) .elementor-shortcode { display: flex; flex-direction: column; flex: 1 1 auto; align-self: stretch; height: 100%; min-width: 0; } /* Les deux cartes déposées dans le MÊME conteneur — [idh_coordonnees] puis [idh_contact] à la suite dans un seul widget « Shortcode », ou entourées d'un bloc .idh-contact-duo — forment UN encadré : largeur limitée, centré, filet --idh-line autour, coins arrondis, cartes jointives séparées d'un hairline. (L'autre méthode, un shortcode par colonne Elementor, reste couverte par la règle :has() ci-dessus.) */ /* Le widget « Shortcode » qui porte le duo doit occuper toute la largeur du conteneur Elementor (sinon, en largeur « Initial », Elementor lui met width:max-content et l'encadré ne peut pas se centrer). */ .elementor-widget-shortcode:has(.contact-infos):has(.contact-form), .elementor-widget-shortcode:has(.contact-infos):has(.contact-form) > .elementor-widget-container { width: 100%; max-width: 100%; } .elementor-shortcode:has(> .contact-infos):has(> .contact-form), .idh-contact-duo:has(.contact-infos):has(.contact-form) { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 1px; align-items: stretch; /* Gouttière latérale à toutes les largeurs < ~1290px : sans elle, min(100%, 1200px) collait l'encadré bord à bord dès qu'on passait sous 1200px (tablette surtout) — il ne se lisait plus comme un cadre. */ width: min(calc(100% - clamp(20px, 6vw, 72px)), 1200px); /* centrage : margin auto pour un parent bloc (.idh-contact-duo), align-self:center pour le parent flex-colonne posé par la règle « une carte par colonne » ci-dessus (sinon margin auto est ignoré). */ margin-inline: auto; align-self: center; justify-self: center; flex: 0 0 auto; background: var(--idh-line); border: 1px solid var(--idh-line); border-radius: var(--idh-radius); overflow: hidden; } /* Dans l'encadré, les cartes perdent leur propre filet / arrondi : c'est le cadre qui les porte. */ .elementor-shortcode:has(> .contact-infos):has(> .contact-form) > .contact-infos, .elementor-shortcode:has(> .contact-infos):has(> .contact-form) > .contact-form, .idh-contact-duo:has(.contact-infos):has(.contact-form) > .contact-infos, .idh-contact-duo:has(.contact-infos):has(.contact-form) > .contact-form { border: 0; border-radius: 0; } @media (max-width: 900px) { .elementor-shortcode:has(> .contact-infos):has(> .contact-form), .idh-contact-duo:has(.contact-infos):has(.contact-form) { grid-template-columns: 1fr; } } .contact-infos { height: 100%; flex: 1; display: flex; flex-direction: column; gap: clamp(24px, 3.5vh, 34px); padding: clamp(30px, 4vw, 46px); background: var(--idh-primary); color: var(--idh-on-primary); border-radius: var(--idh-radius); } .contact-infos--clair { background: var(--idh-bg-alt); color: var(--idh-ink); border: 1px solid var(--idh-line); } .contact-infos__identite .section-kicker { color: var(--idh-accent); margin-bottom: 10px; } .contact-infos__logo { max-height: 44px; width: auto; margin-bottom: 16px; object-fit: contain; object-position: left center; } /* Sur fond primaire, le logo (souvent sombre) est posé sur une pastille blanche pour rester lisible quelle que soit sa couleur. */ .contact-infos:not(.contact-infos--clair) .contact-infos__logo { max-height: 40px; box-sizing: content-box; padding: 9px 12px; background: #fff; border-radius: var(--idh-radius); } .contact-infos h2 { color: inherit; } .contact-infos--clair h2 { color: var(--idh-title); } /* Même couleur que le reste de la carte (couleur ACF « sur primaire » / « sur fond alt »), pas d'atténuation — juste l'italique pour la hiérarchie. */ .contact-infos__baseline { font-style: italic; margin: 8px 0 0; font-size: .98rem; max-width: 34ch; color: inherit; } /* Liens : sur le fond primaire, --idh-link (vert foncé) se confond avec le fond — on force la couleur du texte de la carte. */ .contact-infos:not(.contact-infos--clair) .lien { color: var(--idh-on-primary); } .contact-infos .lien:hover { opacity: .78; } .contact-infos--clair .lien { color: var(--idh-link); } .contact-infos__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: clamp(22px, 3vh, 30px); } .contact-infos--clair .contact-infos__liste { border-top-color: var(--idh-line); } .contact-infos__liste li { display: flex; align-items: flex-start; gap: 12px; font-size: .96rem; line-height: 1.5; } .contact-infos__liste svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--idh-accent); } .contact-infos__liste a { text-decoration: none; } .contact-infos__note { display: block; font-size: .82rem; opacity: .62; margin-top: 3px; } .contact-infos__delai { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 15px; border-radius: 999px; font-size: .85rem; font-weight: 500; color: var(--idh-accent); background: rgba(201, 146, 47, .14); border: 1px solid rgba(201, 146, 47, .4); } .contact-infos__delai svg { width: 15px; height: 15px; } .contact-infos__reseaux { margin-top: auto; padding-top: clamp(20px, 3vh, 26px); border-top: 1px solid rgba(255, 255, 255, .16); display: flex; gap: 10px; flex-wrap: wrap; } .contact-infos--clair .contact-infos__reseaux { border-top-color: var(--idh-line); } .contact-infos__reseaux a { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); transition: background-color .2s ease, border-color .2s ease, transform .2s ease; } .contact-infos--clair .contact-infos__reseaux a { background: #fff; border-color: var(--idh-line); } .contact-infos__reseaux a:hover { background: var(--idh-accent); border-color: var(--idh-accent); transform: translateY(-2px); } .contact-infos__reseaux svg { width: 17px; height: 17px; color: #fff; } .contact-infos--clair .contact-infos__reseaux svg { color: var(--idh-ink); } .contact-infos--clair .contact-infos__reseaux a:hover svg { color: #fff; } /* ========================================================================== 2 · FORMULAIRE ========================================================================== */ .contact-form { position: relative; height: 100%; flex: 1; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 46px); background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius); } .contact-form .section-kicker { margin-bottom: 10px; } .contact-form h2 { margin-bottom: 6px; } .contact-form__intro { color: var(--idh-ink-soft); font-size: .95rem; margin: 0 0 24px; max-width: 46ch; } /* Le formulaire occupe la hauteur restante ; la zone message absorbe le surplus quand la carte est étirée pour égaler celle des coordonnées. */ .contact-form__form { display: flex; flex-direction: column; gap: 15px; flex: 1; } .contact-form__form .champ:has(textarea) { display: flex; flex-direction: column; gap: 6px; flex: 1; } .contact-form__form .champ:has(textarea) textarea { flex: 1; } .contact-form__ligne { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } @media (max-width: 560px) { .contact-form__ligne { grid-template-columns: 1fr; } } .contact-form .champ { display: grid; gap: 6px; } .contact-form .champ > span { font-size: .8rem; font-weight: 500; letter-spacing: .01em; color: var(--idh-ink-soft); } .contact-form .champ > span em { font-style: normal; opacity: .7; font-weight: 400; } .contact-form input, .contact-form textarea { font: inherit; font-size: .95rem; width: 100%; box-sizing: border-box; padding: 12px 14px; color: var(--idh-ink); background: #fff; border: 1px solid var(--idh-line); border-radius: var(--idh-radius); transition: border-color .2s ease; appearance: none; -webkit-appearance: none; } .contact-form textarea { min-height: 130px; resize: vertical; } .contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--idh-accent); outline-offset: 1px; border-color: var(--idh-accent); } /*