/* Thème Lateulade — styles que theme.json ne peut pas exprimer.
Toutes les couleurs passent par les presets : un seul endroit à changer. */
/* WordPress ne pose pas de box-sizing global. Sans ça, tout élément qui
combine width:100% et du padding déborde de son conteneur. */
*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden est battu par n'importe quel display posé en CSS,
ce qui touche en premier lieu les boutons. On lui rend la priorité. */
[hidden] { display: none !important; }
/* ---------- en-tête ---------- */
/* L'en-tête est collant : sans cette marge, une ancre amène sa cible
sous la barre et le visiteur doit remonter à la main. */
#devis, #militaires, #references, #questions, #contact { scroll-margin-top: 6.5rem; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.lat-entete { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--wp--preset--color--trait); }
.lat-entete__barre { min-height: 78px; gap: 1.6rem; }
.lat-entete .wp-block-site-title a { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.42rem; color: var(--wp--preset--color--indigo); text-decoration: none; letter-spacing: .005em; }
.lat-nav a { font-family: var(--wp--preset--font-family--display); font-size: .83rem; font-weight: 600; color: var(--wp--preset--color--encre-2); text-decoration: none; }
.lat-nav a:hover { color: var(--wp--preset--color--indigo); }
/* ---------- vocabulaire commun ---------- */
.lat-marque { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--vert); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.lat-marque::before { content: ""; width: 26px; height: 2px; background: currentColor; flex: none; }
.lat-chapo { color: var(--wp--preset--color--brume); max-width: 60ch; }
/* La chapô a une mesure de lecture plus courte que la largeur de contenu.
Elle vit donc dans un groupe en flux (.lat-intro) : sans ça, WordPress
centrerait ce bloc plus étroit et le désaxerait de son titre. */
.lat-intro > * + * { margin-top: 1.1rem; }
/* Bandes foncées : le fond reste sombre, c'est un choix de composition. */
.lat-bande, .lat-bande :where(h1, h2, h3, h4) { color: #fff; }
.lat-bande .lat-marque { color: var(--wp--preset--color--vert-vif); }
.lat-bande .lat-chapo { color: #B4ABDA; }
/* ---------- estimateur de cubage ---------- */
.lat-calc { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--trait); border-radius: 18px; overflow: hidden; box-shadow: 0 2px 4px rgba(28,17,64,.08), 0 24px 48px -20px rgba(28,17,64,.34); }
.lat-calc__tete { padding: 1.35rem 1.5rem 1.15rem; border-bottom: 1px solid var(--wp--preset--color--trait); background: var(--wp--preset--color--surface-2); }
.lat-calc__corps { padding: 1.4rem 1.5rem 1.5rem; }
.lat-calc__lab { display: block; font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin-bottom: .6rem; }
.lat-calc__champ + .lat-calc__champ { margin-top: 1.3rem; }
.lat-segs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.lat-segs button { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .85rem; padding: .62rem .2rem; border-radius: 9px; border: 1px solid var(--wp--preset--color--trait); background: var(--wp--preset--color--surface); color: var(--wp--preset--color--encre-2); cursor: pointer; transition: .15s; }
.lat-segs button:hover { border-color: var(--wp--preset--color--trait-fort); }
.lat-segs button[aria-pressed="true"] { background: var(--wp--preset--color--indigo); border-color: var(--wp--preset--color--indigo); color: #fff; }
.lat-surf { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .55rem; }
.lat-surf__val { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.lat-calc input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; margin: 0; height: 6px; border-radius: 99px; background: var(--wp--preset--color--surface-2); border: 1px solid var(--wp--preset--color--trait); cursor: pointer; }
.lat-calc input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--vert); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(28,17,64,.32); }
.lat-calc input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--wp--preset--color--vert); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(28,17,64,.32); }
.lat-resultat { margin-top: 1.3rem; background: var(--wp--preset--color--encre); border-radius: 13px; padding: 1.2rem 1.3rem; display: grid; grid-template-columns: auto 1fr; gap: 1.2rem; align-items: center; }
.lat-cube b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 900; font-size: 3.3rem; line-height: .86; letter-spacing: -.04em; color: #fff; font-variant-numeric: tabular-nums; }
.lat-cube span { display: block; margin-top: .45rem; font-family: var(--wp--preset--font-family--display); font-size: .86rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--vert-vif); }
.lat-detail { border-left: 1px solid rgba(255,255,255,.16); padding-left: 1.2rem; display: grid; gap: .5rem; }
.lat-detail div { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; color: #B4ABDA; }
.lat-detail b { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.lat-note { font-size: .775rem; color: var(--wp--preset--color--brume); line-height: 1.5; margin-top: .85rem; }
/* ---------- garanties du hero ---------- */
.lat-garanties { list-style: none; margin: 2.5rem 0 0; padding: 1.7rem 0 0; border-top: 1px solid var(--wp--preset--color--trait); display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.5rem; }
.lat-garanties li { display: grid; grid-template-columns: auto 1fr; gap: .55rem; align-items: start; font-family: var(--wp--preset--font-family--display); font-size: .875rem; font-weight: 600; line-height: 1.35; color: var(--wp--preset--color--encre-2); }
.lat-garanties svg { width: 17px; height: 17px; color: var(--wp--preset--color--vert); margin-top: 1px; }
.lat-garanties a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--trait-fort); text-underline-offset: 3px; }
.lat-garanties a:hover { color: var(--wp--preset--color--vert); text-decoration-color: currentColor; }
@media (min-width: 901px) { .lat-garanties { grid-template-columns: repeat(2, 1fr); } }
/* ---------- bande de chiffres ---------- */
.lat-preuve b { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: clamp(1.75rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.lat-preuve span { display: block; margin-top: .5rem; font-size: .8rem; line-height: 1.35; color: #B4ABDA; }
/* ---------- cartes services ---------- */
.lat-service { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--trait); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(28,17,64,.06), 0 8px 24px -12px rgba(28,17,64,.18); transition: transform .18s ease, box-shadow .18s ease; }
.lat-service:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,17,64,.08), 0 24px 48px -20px rgba(28,17,64,.34); }
.lat-service figure, .lat-service .wp-block-image { margin: 0; }
.lat-service img { width: 100%; height: auto; aspect-ratio: 16/11; object-fit: cover; display: block; }
/* height:auto est indispensable : l'attribut height du ![]()
devient une hauteur
explicite, et aspect-ratio est ignoré tant qu'aucune dimension n'est auto. */
.lat-service__txt { padding: 1.15rem 1.25rem 1.35rem; }
.lat-service__lien { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .84rem; color: var(--wp--preset--color--vert); text-decoration: none; }
.lat-service__lien::after { content: " →"; }
/* ---------- étapes ---------- */
.lat-etapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; counter-reset: etape; }
.lat-etape { position: relative; padding-top: 2.6rem; }
.lat-etape::before { counter-increment: etape; content: counter(etape, decimal-leading-zero); position: absolute; top: 0; left: 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .85rem; letter-spacing: .08em; color: var(--wp--preset--color--vert); }
.lat-etape::after { content: ""; position: absolute; top: 1.55rem; left: 0; right: .6rem; height: 1px; background: var(--wp--preset--color--trait-fort); }
.lat-etape:last-child::after { right: 0; }
/* ---------- certification NF ---------- */
.lat-nf-carte { border-top: 1px solid var(--wp--preset--color--trait-fort); padding-top: 1.1rem; }
.lat-nf-carte b { font-family: var(--wp--preset--font-family--display); font-size: 1.02rem; color: var(--wp--preset--color--encre); }
/* ---------- témoignages ---------- */
.lat-temoin { background: var(--wp--preset--color--papier); border: 1px solid var(--wp--preset--color--trait); border-radius: 14px; padding: 1.5rem; }
.lat-etoiles { color: var(--wp--preset--color--vert); letter-spacing: .14em; }
.lat-secteurs { display: flex; flex-wrap: wrap; gap: .55rem; }
/* ---------- frise de références ---------- */
/* Mots-symboles typographiques en attendant l'accord des entreprises citées
pour l'usage de leurs logos. Monochromes et alignés, ils passent mieux en
petit format qu'un assortiment de logos aux couleurs disparates. */
.lat-frise { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--wp--preset--color--trait); }
.lat-frise__titre { font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin: 0 0 1.5rem; }
.lat-frise ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem 2.6rem; }
.lat-frise li {
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.02rem;
letter-spacing: .01em; color: var(--wp--preset--color--trait-fort);
transition: color .18s ease;
}
.lat-frise li:hover { color: var(--wp--preset--color--brume); }
@media (max-width: 720px) { .lat-frise ul { gap: .9rem 1.6rem; } .lat-frise li { font-size: .92rem; } }
.lat-secteurs span { font-family: var(--wp--preset--font-family--display); font-size: .79rem; font-weight: 600; padding: .42rem .8rem; border: 1px solid var(--wp--preset--color--trait); border-radius: 99px; color: var(--wp--preset--color--brume); background: var(--wp--preset--color--papier); }
/* ---------- fiche militaire ---------- */
.lat-fiche { background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.13); border-radius: 14px; padding: 1.6rem; }
.lat-fiche__ligne { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .9rem; color: #B4ABDA; }
.lat-fiche__ligne:last-of-type { border-bottom: 0; }
.lat-fiche__ligne b { font-family: var(--wp--preset--font-family--display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
/* ---------- pied ---------- */
.lat-pied__titre { font-family: var(--wp--preset--font-family--display); font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); }
.lat-pied__liste { list-style: none; padding: 0; }
.lat-pied__liste a, .lat-adresse a { color: var(--wp--preset--color--encre-2); text-decoration: none; }
.lat-pied__liste a:hover, .lat-adresse a:hover { color: var(--wp--preset--color--vert); text-decoration: underline; }
.lat-pied__bas { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--wp--preset--color--trait); color: var(--wp--preset--color--brume); }
/* ---------- adaptatif ---------- */
@media (max-width: 1080px) {
.lat-etapes { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 1.2rem; }
.lat-etape::after { display: none; }
}
@media (max-width: 720px) {
.lat-entete__barre { min-height: 66px; gap: .75rem; }
.lat-garanties { grid-template-columns: 1fr; gap: .75rem; }
.lat-segs { grid-template-columns: repeat(3, 1fr); }
.lat-etapes { grid-template-columns: 1fr; }
.lat-resultat { grid-template-columns: 1fr; gap: .9rem; }
.lat-detail { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding-left: 0; padding-top: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
* { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* ---------- bloc de marque ---------- */
/* Le logo original ne fait que 329 px de large : affiché à 176, il reste net
sur les écrans à haute densité. Ne pas l'agrandir sans vectoriel. */
.lat-logo { display: block; flex: none; line-height: 0; }
.lat-logo img { width: 176px; height: auto; display: block; }
.lat-pied .lat-logo { margin-bottom: 1.1rem; }
.lat-tel { display: flex; flex-direction: column; flex: none; line-height: 1.15; text-decoration: none; padding-left: 1.1rem; border-left: 1px solid var(--wp--preset--color--trait); }
.lat-tel small { font-family: var(--wp--preset--font-family--display); font-size: .63rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); }
.lat-tel b { font-family: var(--wp--preset--font-family--display); font-size: 1.02rem; font-weight: 800; color: var(--wp--preset--color--encre); font-variant-numeric: tabular-nums; }
.lat-cta-court { display: none; }
@media (max-width: 1080px) { .lat-tel { display: none; } }
@media (max-width: 720px) {
.lat-cta-long { display: none; }
.lat-cta-court { display: inline; }
}
/* ---------- article ---------- */
/* Pas de colonne étroite : le texte occupe les deux tiers de la largeur de
contenu, et le tiers restant porte la navigation et l'appel à l'action. */
.lat-art-meta { gap: .35rem 1rem; color: var(--wp--preset--color--brume); }
.lat-art-meta a { color: inherit; text-decoration: none; }
.lat-art-grille { gap: clamp(2rem, 5vw, 4.5rem) !important; }
.lat-art-corps .wp-block-post-content { line-height: 1.7; }
.lat-art-corps .wp-block-post-content > * + * { margin-top: 1.35em; }
.lat-art-corps .wp-block-post-content :where(h2) { margin-top: 2.2em; font-size: 1.7rem; }
.lat-art-corps .wp-block-post-content :where(h3) { margin-top: 1.8em; font-size: 1.22rem; }
.lat-art-corps .wp-block-post-content :where(ul, ol) { padding-left: 1.3em; }
.lat-art-corps .wp-block-post-content :where(li) + :where(li) { margin-top: .5em; }
.lat-art-corps .wp-block-post-content :where(blockquote) {
border-left: 3px solid var(--wp--preset--color--vert);
padding-left: 1.2rem; margin-left: 0; color: var(--wp--preset--color--encre-2);
}
.lat-art-corps .wp-block-post-content :where(img) { border-radius: 14px; }
.lat-art-tags { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--wp--preset--color--trait); color: var(--wp--preset--color--brume); }
/* ---------- colonne latérale ---------- */
.lat-aside__collant { position: sticky; top: 100px; display: grid; gap: 1.1rem; }
.lat-aside__titre {
font-family: var(--wp--preset--font-family--display); font-size: .7rem !important; font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume);
margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--wp--preset--color--trait);
}
.lat-aside__titre:first-child { padding-top: 0; border-top: 0; }
.lat-aside__liste, .lat-aside__cats { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lat-aside__liste li a, .lat-aside__cats li a {
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .93rem;
line-height: 1.35; color: var(--wp--preset--color--encre); text-decoration: none; display: block;
}
.lat-aside__liste li a:hover, .lat-aside__cats li a:hover { color: var(--wp--preset--color--vert); }
.lat-aside__liste time { display: block; margin-top: .2rem; font-size: .78rem; color: var(--wp--preset--color--brume); }
.lat-aside__cats li { font-size: .82rem; color: var(--wp--preset--color--brume); }
.lat-aside__cta { background: var(--wp--preset--color--encre); border-radius: 14px; padding: 1.5rem; margin-top: .6rem; }
.lat-aside__cta-sur { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.12rem; color: #fff; margin: 0 0 .6rem; line-height: 1.2; }
.lat-aside__cta-txt { font-size: .88rem; color: #B4ABDA; margin: 0 0 1.2rem; line-height: 1.55; }
.lat-aside__cta .wp-element-button { display: block; text-align: center; text-decoration: none; }
.lat-aside__tel { display: block; margin-top: .9rem; text-align: center; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; color: #fff; text-decoration: none; font-variant-numeric: tabular-nums; }
.lat-aside__tel:hover { color: var(--wp--preset--color--vert-vif); }
@media (max-width: 900px) {
.lat-aside__collant { position: static; }
.lat-aside { margin-top: 3rem; }
}
/* ---------- cartes d'articles ---------- */
.lat-liste__grille { gap: 1.15rem; }
.lat-carte-article {
background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--trait);
border-radius: 14px; overflow: hidden; height: 100%;
box-shadow: 0 1px 2px rgba(28,17,64,.06), 0 8px 24px -12px rgba(28,17,64,.18);
transition: transform .18s ease, box-shadow .18s ease;
}
.lat-carte-article:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(28,17,64,.08), 0 24px 48px -20px rgba(28,17,64,.34); }
.lat-carte-article__img img { width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; display: block; }
.lat-carte-article__txt { padding: 1.15rem 1.25rem 1.35rem; }
.lat-carte-article__txt > * + * { margin-top: .6rem; }
.lat-carte-article .wp-block-post-title a { text-decoration: none; }
.lat-carte-article .wp-block-post-title a:hover { color: var(--wp--preset--color--vert); }
.lat-carte-article .wp-block-post-excerpt { color: var(--wp--preset--color--brume); }
.lat-carte-article__date { color: var(--wp--preset--color--brume); }
.lat-pagination { gap: .5rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .88rem; }
.lat-pagination a { text-decoration: none; }
@media (max-width: 900px) { .lat-liste__grille { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 600px) { .lat-liste__grille { grid-template-columns: 1fr !important; } }
/* ---------- zone d'intervention ---------- */
.lat-zone-img { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(28,17,64,.08), 0 24px 48px -20px rgba(28,17,64,.34); }
.lat-zone-img img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; }
.lat-zone-listes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-top: 1.8rem; }
.lat-zone-listes h3 { font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin: 0 0 .7rem; }
.lat-zone-listes ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; }
.lat-zone-listes li { font-size: .925rem; display: flex; gap: .5rem; }
.lat-zone-listes li::before { content: "—"; color: var(--wp--preset--color--vert); flex: none; }
@media (max-width: 600px) { .lat-zone-listes { grid-template-columns: 1fr; } }
/* ---------- boutons posés hors des blocs core (dans les wp:html) ---------- */
.lat-btn-bloc { display: block; width: 100%; margin-top: 1.05rem; text-align: center; text-decoration: none; }
.lat-btn-fantome {
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .92rem;
padding: .85rem 1.45rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.42);
color: #fff; background: transparent; transition: background .15s;
}
.lat-btn-fantome:hover { background: rgba(255,255,255,.1); }
.lat-pied__legal { display: block; margin-top: .4rem; }
@media (min-width: 720px) { .lat-pied__bas { display: flex; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; } .lat-pied__legal { margin-top: 0; } }
/* ---------- hero ---------- */
/* Le hero peint un fond blanc : il doit couvrir toute la largeur, sinon le
« papier » de la page réapparaît sur les côtés et le bloc flotte en boîte. */
.lat-hero { position: relative; overflow: hidden; }
.lat-hero::after {
content: ""; position: absolute; inset: auto -10% -60% 55%; height: 520px;
background: radial-gradient(ellipse at center, rgba(98,193,58,.13), transparent 62%);
pointer-events: none;
}
.lat-hero > * { position: relative; z-index: 1; }
/* ---------- enchaînement des bandes ---------- */
/* WordPress insère un blockGap entre les régions de premier niveau (en-tête,
main, pied). Sur un site en bandes pleine largeur, ça laisse apparaître le
fond de page entre chaque section. Chaque bande gère son propre espacement
par son padding : on supprime ce gap-là, sans toucher au blockGap global
dont le corps des articles a besoin. */
.wp-site-blocks > * + * { margin-block-start: 0; }
.lat-sections > * + * { margin-block-start: 0; }
/* Sur les pages, les sections sont enfants de post-content et non de main :
il faut viser les deux, sinon la bande de fond réapparaît entre elles. */
.lat-sections .wp-block-post-content > * + * { margin-block-start: 0; }
/* Le bloc de marque du pied respire un peu plus que celui de l'en-tête. */
.lat-pied .lat-logo { margin-bottom: 1.1rem; }
/* ---------- formules ---------- */
.lat-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 3.4rem; }
.lat-formule { border-top: 2px solid var(--wp--preset--color--trait-fort); padding-top: 1.2rem; }
/* La formule la plus choisie se signale par un filet vert, pas par une boîte :
on marque la recommandation sans transformer la page en grille de tarifs. */
.lat-formule--phare { border-top-color: var(--wp--preset--color--vert); }
.lat-formule h3 { font-size: 1.24rem; margin: 0 0 .3rem; }
.lat-formule__quoi { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .92rem; color: var(--wp--preset--color--vert); margin: 0 0 1rem; }
.lat-formule ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lat-formule li { font-size: .92rem; display: grid; grid-template-columns: auto 1fr; gap: .6rem; color: var(--wp--preset--color--encre-2); }
.lat-formule li::before { content: "—"; color: var(--wp--preset--color--brume); }
@media (max-width: 900px) { .lat-formules { grid-template-columns: 1fr; gap: 2rem; } }
/* ---------- questions fréquentes ---------- */
.lat-faq { margin-top: 3.4rem; max-width: 800px; }
.lat-faq details { border-top: 1px solid var(--wp--preset--color--trait); }
.lat-faq details:last-child { border-bottom: 1px solid var(--wp--preset--color--trait); }
.lat-faq summary {
list-style: none; cursor: pointer; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.02rem;
color: var(--wp--preset--color--encre);
}
.lat-faq summary::-webkit-details-marker { display: none; }
.lat-faq summary:hover { color: var(--wp--preset--color--vert); }
/* Le chevron est dessiné en CSS : deux traits qui pivotent à l'ouverture. */
.lat-faq summary::after {
content: ""; position: absolute; right: .4rem; top: 1.5rem; width: 9px; height: 9px;
border-right: 2px solid var(--wp--preset--color--vert); border-bottom: 2px solid var(--wp--preset--color--vert);
transform: rotate(45deg); transition: transform .2s ease;
}
.lat-faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.lat-faq details p { margin: 0 0 1.4rem; max-width: 70ch; color: var(--wp--preset--color--encre-2); }
/* ---------- photos de section ---------- */
.lat-photo { margin: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 4px rgba(28,17,64,.08), 0 24px 48px -20px rgba(28,17,64,.34); }
.lat-photo img { width: 100%; height: auto; display: block; }
.lat-liste-vert { margin: 2rem 0 0; padding: 0; list-style: none; display: grid; gap: .8rem; }
/* Surtout pas de grid ni de flex ici : chaque bout de texte deviendrait une
cellule à part, et le se retrouverait séparé de la suite de sa phrase.
La puce est donc posée en absolu, et le texte reste du texte. */
.lat-liste-vert li { position: relative; padding-left: 1.35rem; font-size: .95rem; line-height: 1.55; color: var(--wp--preset--color--encre-2); }
.lat-liste-vert li::before { content: ""; position: absolute; left: 0; top: .52rem; width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--vert); }
.lat-liste-vert b { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--encre); }
/* ---------- comparatif ---------- */
.lat-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 3.4rem; }
.lat-compare__col { border-top: 2px solid var(--wp--preset--color--trait-fort); padding-top: 1.2rem; }
.lat-compare__col h3 { font-size: 1.24rem; margin: 0 0 .3rem; }
.lat-compare__quoi { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .92rem; color: var(--wp--preset--color--vert); margin: 0 0 1rem; }
.lat-compare ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .6rem; }
.lat-compare li { position: relative; padding-left: 1.1rem; font-size: .92rem; color: var(--wp--preset--color--encre-2); }
.lat-compare li::before { content: "—"; position: absolute; left: 0; color: var(--wp--preset--color--brume); }
@media (max-width: 900px) { .lat-compare { grid-template-columns: 1fr; gap: 2rem; } }
/* ---------- catégories de prestation ---------- */
.lat-cat { display: grid; gap: 0; margin-top: 3.4rem; }
/* Trois colonnes, donc trois enfants : le nom et son résumé sont groupés,
sinon la seconde liste retombe à la ligne suivante. */
.lat-cat__item {
display: grid; grid-template-columns: 15rem 1fr 1fr; gap: 2rem;
padding: 1.8rem 0; border-top: 1px solid var(--wp--preset--color--trait);
}
.lat-cat__item:last-child { border-bottom: 1px solid var(--wp--preset--color--trait); }
.lat-cat__item h3 { font-size: 1.14rem; margin: 0 0 .3rem; }
.lat-cat__resume { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .88rem; color: var(--wp--preset--color--vert); margin: 0; line-height: 1.4; }
.lat-cat__part h4 { font-family: var(--wp--preset--font-family--display); font-size: .68rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin: 0 0 .7rem; }
.lat-cat__part ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.lat-cat__part li { position: relative; padding-left: 1.05rem; font-size: .9rem; line-height: 1.5; color: var(--wp--preset--color--encre-2); }
.lat-cat__part li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--vert); }
.lat-cat__part--client li::before { background: var(--wp--preset--color--trait-fort); }
@media (max-width: 900px) {
.lat-cat__item { grid-template-columns: 1fr; gap: 1.2rem; }
.lat-cat__resume { margin-bottom: .4rem; }
}
/* ---------- coordonnées ---------- */
.lat-coord { display: grid; gap: 2rem; }
.lat-coord__bloc { border-top: 2px solid var(--wp--preset--color--trait-fort); padding-top: 1.1rem; }
.lat-coord__bloc h2 { font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin: 0 0 .8rem; }
.lat-coord__fort { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.5rem; color: var(--wp--preset--color--encre); text-decoration: none; font-variant-numeric: tabular-nums; }
.lat-coord__moyen { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1rem; color: var(--wp--preset--color--encre); text-decoration: none; }
.lat-coord__fort:hover, .lat-coord__moyen:hover { color: var(--wp--preset--color--vert); }
.lat-coord__bloc p, .lat-coord__bloc address { margin: .6rem 0 0; font-style: normal; font-size: .9rem; color: var(--wp--preset--color--brume); line-height: 1.65; }
.lat-coord__note { font-size: .84rem !important; }
/* ---------- formulaire ---------- */
/* Le pot de miel doit rester atteignable par les robots, donc pas de
display:none : il est simplement sorti du champ de vision et du parcours
clavier. Un robot le remplit, un humain ne le voit jamais. */
.lat-form__pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lat-form__champs { display: grid; gap: 1.2rem; }
.lat-form p { margin: 0; }
.lat-form__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.lat-form label { display: block; font-family: var(--wp--preset--font-family--display); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin-bottom: .45rem; }
.lat-form label b { color: var(--wp--preset--color--vert); }
.lat-form input, .lat-form textarea {
width: 100%; font-family: var(--wp--preset--font-family--texte); font-size: 1rem;
color: var(--wp--preset--color--encre); background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--trait-fort); border-radius: 10px;
padding: .75rem .9rem; transition: border-color .15s, box-shadow .15s;
}
.lat-form input:focus, .lat-form textarea:focus {
outline: none; border-color: var(--wp--preset--color--vert);
box-shadow: 0 0 0 3px rgba(98,193,58,.18);
}
.lat-form textarea { resize: vertical; min-height: 8rem; }
.lat-form__legal { font-size: .82rem; color: var(--wp--preset--color--brume); line-height: 1.55; }
.lat-form button { margin-top: 1.6rem; border: 0; cursor: pointer; }
.lat-form button:disabled { opacity: .55; cursor: progress; }
.lat-form__etat { margin-top: 1rem !important; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .92rem; }
.lat-form__etat--attente { color: var(--wp--preset--color--brume); }
.lat-form__etat--ok { color: var(--wp--preset--color--vert); }
.lat-form__etat--ko { color: #B3261E; }
.lat-form__noscript { border: 1px solid var(--wp--preset--color--trait-fort); border-left: 3px solid var(--wp--preset--color--vert); border-radius: 10px; padding: 1.2rem 1.3rem; }
.lat-form__noscript p { margin: 0 0 .5rem; font-size: .95rem; }
.lat-form__noscript p:last-child { margin: 0; }
/* ---------- plan ---------- */
/* Aucune requête ne part chez Google avant le clic : l'aperçu est du HTML,
l'iframe n'est créée qu'à la demande du visiteur. */
.lat-plan__boite { border-top: 1px solid var(--wp--preset--color--trait); background: var(--wp--preset--color--surface-2); }
.lat-plan__attente { max-width: 46rem; margin-inline: auto; padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 4vw, 2rem); text-align: center; }
.lat-plan__ou { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.28rem; color: var(--wp--preset--color--encre); margin: 0 0 .3rem; }
.lat-plan__adr { font-size: 1rem; color: var(--wp--preset--color--encre-2); margin: 0 0 1.6rem; }
.lat-plan__btn { border: 0; cursor: pointer; }
.lat-plan__avert { max-width: 48ch; margin: 1.6rem auto 0; font-size: .82rem; line-height: 1.55; color: var(--wp--preset--color--brume); }
.lat-plan__lien { margin: .9rem 0 0; font-size: .88rem; }
.lat-plan__lien a { color: var(--wp--preset--color--vert); }
.lat-plan__boite iframe { display: block; width: 100%; height: 460px; border: 0; }
@media (max-width: 700px) { .lat-plan__boite iframe { height: 320px; } }
/* ---------- pages légales ---------- */
/* Mesure de lecture confortable, alignée à gauche comme le reste du site.
Le groupe parent est en flux, sinon WordPress recentrerait ce bloc. */
.lat-legal { max-width: 74ch; }
.lat-legal h2 { font-size: 1.16rem; margin: 2.6rem 0 .8rem; }
.lat-legal h2:first-child { margin-top: 0; }
.lat-legal p { margin: 0 0 1rem; line-height: 1.7; }
.lat-legal a { color: var(--wp--preset--color--vert); }
/* Ce qui manque doit se voir dans l'éditeur, pas se deviner. */
.lat-legal__todo { border-left: 3px solid var(--wp--preset--color--vert); padding-left: .9rem; color: var(--wp--preset--color--brume); font-size: .92rem; }
/* ---------- avis Google ---------- */
/* Trustindex apporte ses propres styles : on se contente de lui donner sa place. */
.lat-avis { margin-top: 3.4rem; }
/* ---------- parcours en trois étapes ---------- */
.lat-pas { list-style: none; display: flex; gap: .3rem; margin: 1rem 0 0; padding: 0; }
.lat-pas li {
flex: 1; display: flex; align-items: center; gap: .45rem;
font-family: var(--wp--preset--font-family--display); font-size: .74rem; font-weight: 700;
color: var(--wp--preset--color--brume); padding-top: .6rem;
border-top: 2px solid var(--wp--preset--color--trait-fort);
}
.lat-pas li span {
width: 18px; height: 18px; border-radius: 50%; flex: none;
display: grid; place-items: center; font-size: .66rem;
background: var(--wp--preset--color--trait-fort); color: var(--wp--preset--color--surface);
}
.lat-pas .est-actif { color: var(--wp--preset--color--encre); border-top-color: var(--wp--preset--color--vert); }
.lat-pas .est-actif span { background: var(--wp--preset--color--vert); color: #fff; }
.lat-pas .est-fait { border-top-color: var(--wp--preset--color--vert); }
.lat-pas .est-fait span { background: var(--wp--preset--color--vert); color: #fff; }
.lat-rappel { margin: 0 0 1.3rem; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .82rem; color: var(--wp--preset--color--vert); }
.lat-rappel:empty { display: none; }
.lat-vue label { display: block; font-family: var(--wp--preset--font-family--display); font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--brume); margin-bottom: .4rem; }
.lat-vue label b { color: var(--wp--preset--color--vert); }
.lat-vue p { margin: 0; }
/* La règle ci-dessus remet toutes les marges à zéro dans le parcours :
la mention sous le bouton a besoin qu'on lui rende la sienne. */
.lat-vue .lat-note { margin-top: 1.1rem; }
.lat-vue .lat-form__legal { margin-top: 1rem; }
.lat-vue .lat-form__paire { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.lat-vue input:not([type=range]):not([type=hidden]), .lat-vue textarea {
width: 100%; font-family: var(--wp--preset--font-family--texte); font-size: .95rem;
color: var(--wp--preset--color--encre); background: var(--wp--preset--color--surface);
border: 1px solid var(--wp--preset--color--trait-fort); border-radius: 9px; padding: .6rem .75rem;
transition: border-color .15s, box-shadow .15s;
}
.lat-vue input:focus, .lat-vue textarea:focus { outline: none; border-color: var(--wp--preset--color--vert); box-shadow: 0 0 0 3px rgba(98,193,58,.18); }
.lat-vue textarea { resize: vertical; }
.lat-vue .wp-element-button { border: 0; cursor: pointer; }
.lat-nav { display: flex; gap: .8rem; align-items: center; margin-top: 1.5rem; }
.lat-nav .wp-element-button { flex: 1; text-align: center; }
.lat-retour {
background: none; border: 0; cursor: pointer; padding: .5rem .2rem;
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: .88rem;
color: var(--wp--preset--color--brume);
}
.lat-retour:hover { color: var(--wp--preset--color--encre); }
@media (max-width: 600px) { .lat-vue .lat-form__paire { grid-template-columns: 1fr; } }
/* Sur la page Contact, le titre du formulaire répéterait le H1 de la page. */
.lat-devis-seul .lat-calc__tete h2 { display: none; }
.lat-devis-seul .lat-calc__tete { padding-top: 1.4rem; }
/* ---------- réseau social ---------- */
.lat-social { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; text-decoration: none; color: var(--wp--preset--color--encre-2); font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: .88rem; }
.lat-social svg { width: 20px; height: 20px; color: var(--wp--preset--color--indigo); flex: none; }
.lat-social:hover { color: var(--wp--preset--color--vert); }
.lat-social:hover svg { color: var(--wp--preset--color--vert); }
/* ---------- hero en photo (essai du 26 août) ---------- */
/* Le fond blanc donnait au haut de page un air de logiciel en ligne. La photo
remet des déménageurs au travail derrière le formulaire. Le voile indigo
n'est pas décoratif : sans lui le titre blanc ne tient pas le contraste sur
le ciel et le trottoir. Il est plus dense à gauche, là où court le texte,
et s'allège à droite où la carte blanche du devis fait déjà écran. */
.lat-hero--photo {
background-color: var(--wp--preset--color--encre);
background-image:
linear-gradient(95deg, rgba(20,12,48,.90) 0%, rgba(26,15,60,.78) 38%, rgba(45,27,105,.52) 70%, rgba(53,32,124,.34) 100%),
url("../img/hero-demenagement.jpg");
background-size: auto, cover;
background-position: center, 50% 55%;
background-repeat: no-repeat;
}
/* La lueur verte du hero clair trouble la photo : elle n'a plus lieu d'être. */
.lat-hero--photo::after { display: none; }
.lat-hero--photo h1 { color: #fff; }
/* Le vert de marque est trop sombre sur l'indigo. Le !important vise le
style en ligne du , seul moyen de le reprendre sans toucher au
balisage partagé avec les autres gabarits. */
.lat-hero--photo h1 span { color: var(--wp--preset--color--vert-vif) !important; }
.lat-hero--photo .lat-marque { color: var(--wp--preset--color--vert-vif); }
.lat-hero--photo .lat-chapo { color: #D8D2EE; }
.lat-hero--photo .lat-garanties { border-top-color: rgba(255,255,255,.22); }
.lat-hero--photo .lat-garanties li { color: #EAE6F7; }
.lat-hero--photo .lat-garanties svg { color: var(--wp--preset--color--vert-vif); }
/* En écran étroit la bande devient haute : le cadrage « cover » se resserre sur
un quart de la largeur et tombe sur la haie. On le décale vers le déménageur
au diable, seul sujet lisible à cette échelle. */
@media (max-width: 900px) {
.lat-hero--photo { background-position: center, 42% 50%; }
}
/* ---------- bande de chiffres : repli en écran étroit ---------- */
/* La grille était figée à six colonnes dans un style en ligne. En dessous de
500 px chaque colonne tombait sous la largeur minimale de « 15 000 », les
pistes débordaient et toute la page se mettait à défiler latéralement.
minmax(0,1fr) autorise les colonnes à passer sous leur contenu, et le repli
se fait en trois puis deux colonnes. */
.lat-chiffres { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 980px) { .lat-chiffres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 1.4rem; } }
@media (max-width: 560px) { .lat-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.9rem 1.2rem; } }