/* =============================================================================
   pages.css - dernière feuille des pages capturées (après legacy-base, legacy-shell,
   legacy-pages et coquille). Jamais chargée sur les écrans de l'application.
   Ne contient que des écarts mesurés contre la référence hors ligne, avec leur cause,
   et les deux règles de <main> que site.css porte ailleurs.
   ========================================================================== */

/* Styles en ligne de la capture, remplacés au rendu (App\Pages\Rendu::STYLES, Décision C). */
.tempo-italique { font-style: italic; }
.tempo-lien-bloc { display: inline-block; text-decoration: none; }
.tempo-1rem { font-size: 1rem; }

/* Titre des trois pages légales : capturé en <h2>, promu en <h1> au rendu (Rendu::TITRE_H1) pour qu'il y ait un seul
   <h1> par page. Mesuré contre la référence : le <h1> de legacy-base ferait 40 px, le <h2> 32 px. */
.elementor-1590 h1,
.elementor-1925 h1,
.elementor-1965 h1 { font-size: 2rem; }

/* <main> reçoit le focus du lien d'évitement : pas d'anneau autour de toute la page (site.css n'est pas chargé ici). */
.principal:focus { outline: none; }

/* Message flash sur une page capturée (formulaire de contact à la tâche 10) : .conteneur est dans site.css. */
.flashs {
  max-width: 1200px;
  margin: 1rem auto;
  padding-inline: 1rem;
}

/* Formulaire de contact (tâche 10) : `.elementor-field*` n'existe dans aucun bundle, les valeurs sont relevées sur la
   référence hors ligne à 1280 px (tests/outils/geometrie.js, formulaire de la page contact) :
   champs 40 px (zone de texte 96 px, 4 lignes), 15 px/21 px, bordure 1 px #69727d, rayon 5 px, texte #4669a3 ; libellés
   Lato 600 16 px #3d3d3d à 6 px du champ ; 15 px entre deux groupes ; consentement sur 24 px ; bouton pleine largeur, 40 px.
   Le <button> reste sous le kit (.elementor-kit-36 button) : il prend la couleur du site, seule sa taille est posée ici. */
.tempo-contact { margin: 0; padding-top: 16px; }   /* 16 px : l'étape masquée « Identité » du formulaire d'origine */
.tempo-contact__champ { margin: 0 0 15px; }
.tempo-contact__champ--message { padding-top: 16px; margin-bottom: 16px; }   /* l'étape masquée « suivant » avant le message (16 px), le bloc reCAPTCHA invisible après (1 px, arrondi) : les marges se superposeraient, d'où le remplissage */
.tempo-contact label {
  display: block;
  padding: 0 0 6px;
  font-family: Lato, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
  color: #3d3d3d;
}
.tempo-contact input[type="text"],
.tempo-contact input[type="email"],
.tempo-contact input[type="tel"],
.tempo-contact textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 8px 16px;
  font: inherit;
  font-size: 15px;
  line-height: 21px;
  color: #4669a3;
  background: #fff;
  border: 1px solid #69727d;
  border-radius: 5px;
}
.tempo-contact input[type="text"],
.tempo-contact input[type="email"],
.tempo-contact input[type="tel"] { height: 40px; }
.tempo-contact textarea { padding: 5px 14px; resize: vertical; }
.tempo-contact input:focus-visible,
.tempo-contact textarea:focus-visible,
.tempo-contact button:focus-visible { outline: 2px solid #4669a3; outline-offset: 2px; }
.tempo-contact input::placeholder,
.tempo-contact textarea::placeholder { color: #69727d; opacity: 1; }

/* Consentement : case et libellé sur une ligne de 24 px, libellé en graisse normale. */
.tempo-contact__consentement { display: flex; align-items: center; min-height: 24px; }
.tempo-contact__consentement input[type="checkbox"] { flex: none; width: 13px; height: 13px; margin: 0 4px 0 0; }
.tempo-contact__consentement label { display: block; padding: 0; font-family: inherit; font-weight: 400; }
.tempo-contact__consentement a { color: #cc3366; }

.tempo-contact__bouton { display: block; width: 100%; height: 40px; padding: 0 24px; font-size: 15px; line-height: 15px; border: 1px solid #fbfbfb; border-radius: 5px; cursor: pointer; }

/* Mobile : 16 px au moins dans les champs (iOS zoome la page sous 16 px), cibles tactiles de 44 px, case plus grande. */
@media (max-width: 767px) {
  .tempo-contact input[type="text"],
  .tempo-contact input[type="email"],
  .tempo-contact input[type="tel"],
  .tempo-contact textarea { font-size: 16px; }
  .tempo-contact input[type="text"],
  .tempo-contact input[type="email"],
  .tempo-contact input[type="tel"] { height: 44px; }
  .tempo-contact__consentement { align-items: flex-start; min-height: 44px; }
  .tempo-contact__consentement input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 8px 0 0; }
  .tempo-contact__consentement label { line-height: 24px; }
  .tempo-contact__bouton { height: 44px; font-size: 16px; }
}

/* Refonte, lot 1 : les boutons des pages capturées (accueil, contact) réagissent dès l'appui, comme ceux de l'application. */
.elementor-button { transition: transform 100ms ease-out; }
.elementor-button:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .elementor-button:active { transform: none; }
}

/* Refonte, lot 4 : pages légales (CGV, confidentialité, livraison et retours) à lire confortablement. Colonne de lecture
   d'environ 70 caractères au lieu de toute la largeur, corps 16 px, interligne aéré, titres d'articles détachés. Le texte
   capturé n'est pas touché (sélecteurs d'identifiant de page, pas de classe nouvelle). Attributs ajoutés pour passer
   devant le « max-width: 100% » des conteneurs du bundle. */
.elementor-1590 .elementor-widget-text-editor[data-id][data-widget_type],
.elementor-1925 .elementor-widget-text-editor[data-id][data-widget_type],
.elementor-1965 .elementor-widget-text-editor[data-id][data-widget_type],
.elementor-1590 .elementor-widget-heading[data-id][data-widget_type],
.elementor-1925 .elementor-widget-heading[data-id][data-widget_type],
.elementor-1965 .elementor-widget-heading[data-id][data-widget_type] {
  width: 100%;
  max-width: 72ch;
  margin-inline: auto;
}
.elementor-1590 .elementor-widget-text-editor,
.elementor-1925 .elementor-widget-text-editor,
.elementor-1965 .elementor-widget-text-editor {
  font-size: 1rem;
  line-height: 1.7;
  color: #3D3D3D;
}
.elementor-1590 .elementor-widget-text-editor p > strong:only-child,
.elementor-1925 .elementor-widget-text-editor p > strong:only-child,
.elementor-1965 .elementor-widget-text-editor p > strong:only-child {
  display: block;
  margin-top: 1.75em;
  color: #0B0B0B;
  letter-spacing: -0.005em;
}
.elementor-1590 .elementor-widget-text-editor li,
.elementor-1925 .elementor-widget-text-editor li,
.elementor-1965 .elementor-widget-text-editor li { margin-block: 0.35em; }
.elementor-1590 h1, .elementor-1925 h1, .elementor-1965 h1 { letter-spacing: -0.02em; line-height: 1.15; }

/* Liens du texte des pages légales et du contact : couleur d'accent du site, au lieu du rose (#c36) du thème WordPress
   d'origine (legacy-base), étranger à la charte. */
.elementor-1590 .elementor-widget-text-editor a,
.elementor-1925 .elementor-widget-text-editor a,
.elementor-1965 .elementor-widget-text-editor a,
.elementor-1795 .elementor-widget-text-editor a { color: #4669A3; text-underline-offset: 0.15em; }

/* =============================================================================
   Refonte, lot 3 : accueil (page capturée 1096). Même contenu, hiérarchie et lisibilité revues : principes
   « apple-design » (simplicité, une action principale, contraste). Sélecteurs d'identifiant de widget seulement ; les
   attributs en plus passent devant les règles du bundle (0,3,0).
   ========================================================================== */

/* Héros : un voile sombre à gauche, sous le texte, rend le titre lisible sur la photo (le visuel reste à droite). */
.elementor-1096 [data-id="ae6894f"][data-element_type="container"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, rgb(11 11 11 / 0.82) 0%, rgb(11 11 11 / 0.6) 42%, rgb(11 11 11 / 0.15) 72%, rgb(11 11 11 / 0) 100%);
  pointer-events: none;
}
.elementor-1096 [data-id="ae6894f"][data-element_type="container"] > .e-con-inner { position: relative; z-index: 1; }
.elementor-1096 [data-id="2ccad1d"][data-widget_type] .elementor-heading-title { letter-spacing: -0.02em; line-height: 1.08; }
.elementor-1096 [data-id="a85c887"][data-widget_type] .elementor-heading-title { letter-spacing: -0.01em; line-height: 1.2; }

/* Une seule action principale : « Questions fréquentes » devient un bouton secondaire (contour), comme « Demander un
   devis » en bas de page. */
.elementor-1096 [data-id="cafa651"][data-widget_type] .elementor-button,
.elementor-1096 [data-id="f8ee9f0"][data-widget_type] .elementor-button {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.elementor-1096 [data-id="cafa651"][data-widget_type] .elementor-button { color: #FFFFFF; }
.elementor-1096 [data-id="f8ee9f0"][data-widget_type] .elementor-button { color: #4669A3; }
.elementor-1096 [data-id="cafa651"][data-widget_type] .elementor-button:hover { background: rgb(255 255 255 / 0.12); }
.elementor-1096 [data-id="f8ee9f0"][data-widget_type] .elementor-button:hover { background: #EAF0F8; }

/* Téléphone : le titre du héros ne déborde plus sur les boutons (40 px figés auparavant). */
@media (max-width: 767.98px) {
  .elementor-1096 [data-id="2ccad1d"][data-widget_type] .elementor-heading-title { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .elementor-1096 [data-id="a85c887"][data-widget_type] .elementor-heading-title { font-size: clamp(1.25rem, 5.5vw, 1.5rem); }
  .elementor-1096 [data-id="ae6894f"][data-element_type="container"]::after {
    background: linear-gradient(180deg, rgb(11 11 11 / 0.55) 0%, rgb(11 11 11 / 0.78) 100%);
  }
}

/* Explication du tarif Tempo : centrée, colonne de lecture, au lieu d'un pavé collé à gauche sur la moitié de la page. */
.elementor-1096 [data-id="d2795fd"][data-element_type="container"] .elementor-widget-text-editor[data-id] {
  width: 100%;
  max-width: 68ch;
  margin-inline: auto;
  font-size: 1rem;
  line-height: 1.7;
}

/* « Pourquoi choisir » : six titres d'une même taille, sur deux lignes au plus, au lieu de tailles qui variaient. */
.elementor-1096 [data-id="7b9cb7a"][data-element_type="container"] .elementor-heading-title {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* Questions fréquentes : fond noir uni (celui de l'en-tête) au lieu de la photo de pièces derrière les questions. */
.elementor-1096 .e-con[data-id="9d48477"][data-element_type="container"][data-e-type="container"] {
  background-image: none;
  background-color: #0B0B0B;
}
.elementor-1096 [data-id="9d48477"][data-element_type="container"]::before { display: none; }

/* Audit « ui-ux-pro-max » (02/11/2026) : boutons de l'accueil et champs du contact à 44 px de haut au moins (41 et 40 px),
   « EDF Tempo » de l'accueil dans un rouge Tempo lisible (#CC3366 sur #F1F1F1 : 4,4:1 ; #B02757 : 5,7:1). */
.elementor-1096 .elementor-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.tempo-contact input[type="text"], .tempo-contact input[type="email"], .tempo-contact input[type="tel"],
.tempo-contact .tempo-contact__bouton { min-height: 44px; }
.elementor-1096 [data-id="d2795fd"] a, .elementor-1096 [data-id="d2795fd"] a strong { color: #B02757; }
