/* ==========================================================================
   Armel Entreprise — feuille de style commune
   Palette dérivée du logo : cyan #5BBEDD, bleu d'enseigne #0082AB.
   Ancrage sombre marine #0C2A36, gris chauds « enduit », accent ocre brûlé.
   ========================================================================== */

:root { --nav-h: 68px; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 18px); }
body { font-family:'Source Sans 3',Segoe UI,Arial,sans-serif; color:#45555E; background:#fff; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,.font-display { font-family:'Archivo',Arial Black,sans-serif; color:#0C2A36; letter-spacing:-.018em; }
img { max-width:100%; }

/* Bande oblique reprise du parallélogramme du logo */
.skew-band { clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }

.eyebrow { font-family:'Archivo',sans-serif; font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow::before { content:''; display:inline-block; width:14px; height:3px; background:#B4652A; margin-right:.6rem; vertical-align:.28em; }
.eyebrow-light::before { background:#5BBEDD; }

/* Cartes : angles quasi droits, filet fin, pas d'ombre au repos */
.card { background:#fff; border:1px solid #E6DFD5; border-radius:3px; transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease; }
.card:hover { border-color:#82C9E4; transform:translateY(-3px); box-shadow:0 12px 28px -18px rgba(12,42,54,.45); }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:.55rem; font-family:'Archivo',sans-serif; font-weight:700; border-radius:3px; transition:background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn-clay { background:#B4652A; color:#fff; }
.btn-clay:hover { background:#9A5320; }
.btn-ghost { border:1.5px solid rgba(255,255,255,.42); color:#fff; }
.btn-ghost:hover { border-color:#5BBEDD; background:rgba(91,190,221,.12); }
.btn-outline { border:1.5px solid #0C2A36; color:#0C2A36; }
.btn-outline:hover { background:#0C2A36; color:#fff; }
.btn-white { background:#fff; color:#0C2A36; }
.btn-white:hover { background:#EEF8FC; }

/* Onglets de navigation */
.tab { position:relative; font-family:'Archivo',sans-serif; font-weight:600; font-size:.94rem; color:#1E4B5C; padding:.35rem 0; }
.tab::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:#B4652A; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.tab:hover::after { transform:scaleX(1); }
.tab.is-active { color:#0C2A36; }
.tab.is-active::after { transform:scaleX(1); }

/* Emplacements réservés aux photos que le client fournira */
.photo-slot { position:relative; background:#F3EFE9; border:1px dashed #D4C9B9; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.photo-slot > .ps-inner { text-align:center; padding:1rem; color:#B9AA95; }
.photo-slot .ps-label { font-family:'Archivo',sans-serif; font-weight:700; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:#B9AA95; }
.photo-slot .ps-caption { font-size:.78rem; line-height:1.35; margin-top:.35rem; color:#B9AA95; max-width:24ch; margin-inline:auto; }
.photo-slot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.photo-slot.dark { background:#16404F; border-color:rgba(255,255,255,.18); }
.photo-slot.dark .ps-label,.photo-slot.dark .ps-caption { color:rgba(255,255,255,.42); }

/* Cadre photo réelle : mêmes ratios que les emplacements, pour un remplacement sans casse */
.photo { position:relative; overflow:hidden; background:#F3EFE9; border-radius:3px; }
.photo img { width:100%; height:100%; object-fit:cover; display:block; }

/* Révélation au scroll (discrète) */
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1 !important; transform:none !important; transition:none; }
}

/* Filtres galerie */
.filter-btn { font-family:'Archivo',sans-serif; font-weight:600; font-size:.86rem; padding:.5rem 1rem; border:1px solid #E6DFD5; border-radius:3px; color:#45555E; background:#fff; transition:all .2s ease; }
.filter-btn:hover { border-color:#82C9E4; }
.filter-btn.is-active { background:#0C2A36; border-color:#0C2A36; color:#fff; }

/* FAQ */
.faq-panel { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-item.is-open .faq-panel { max-height:760px; }
.faq-item.is-open .faq-chev { transform:rotate(180deg); }
.faq-chev { transition:transform .3s ease; }

/* Comparateur avant / après */
.ba-wrap { position:relative; overflow:hidden; user-select:none; touch-action:pan-y; }
.ba-after { position:absolute; inset:0; width:50%; overflow:hidden; border-right:2px solid #5BBEDD; }
.ba-handle { position:absolute; top:0; bottom:0; left:50%; width:44px; transform:translateX(-50%); cursor:ew-resize; display:flex; align-items:center; justify-content:center; }
.ba-knob { width:44px; height:44px; border-radius:50%; background:#5BBEDD; color:#0C2A36; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(12,42,54,.35); }

/* Lightbox */
#lightbox { background:rgba(12,42,54,.94); }

/* Formulaire */
.field { width:100%; border:1px solid #D4C9B9; border-radius:3px; padding:.72rem .85rem; background:#fff; color:#0C2A36; font-size:.97rem; transition:border-color .18s ease, box-shadow .18s ease; }
.field:focus { outline:none; border-color:#5BBEDD; box-shadow:0 0 0 3px rgba(91,190,221,.22); }
.field.is-error { border-color:#B4652A; box-shadow:0 0 0 3px rgba(180,101,42,.16); }
.field-label { font-family:'Archivo',sans-serif; font-weight:600; font-size:.82rem; color:#0C2A36; display:block; margin-bottom:.32rem; }
.err-msg { display:none; color:#9A5320; font-size:.8rem; margin-top:.25rem; }
.err-msg.show { display:block; }

/* Accessibilité */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid #5BBEDD; outline-offset:2px; }
.skip-link { position:absolute; left:-9999px; }
.skip-link:focus { left:1rem; top:1rem; z-index:100; background:#0C2A36; color:#fff; padding:.6rem 1rem; border-radius:3px; }

/* Contenu rédactionnel (mentions légales, confidentialité) */
.prose h2 { font-size:1.15rem; font-weight:700; margin-top:2.25rem; margin-bottom:.6rem; }
.prose p,.prose li { line-height:1.7; font-size:.98rem; }
.prose p+p { margin-top:.85rem; }
.prose ul { margin-top:.6rem; padding-left:1.1rem; list-style:disc; }
.prose li { margin-top:.3rem; }
.prose a { color:#0F6A88; text-decoration:underline; text-underline-offset:2px; }

/* ==========================================================================
   MOTION
   Parti pris : du mouvement qui accompagne la lecture, pas qui la théâtralise.
   Rien ne rebondit, rien ne tourne, rien ne dure plus de 0,7 s. Tout est
   neutralisé par prefers-reduced-motion, en bas de ce bloc.
   ========================================================================== */

/* Arrivée de page — évite le « flash » sec entre deux pages du site */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
body { animation: page-in .45s cubic-bezier(.22,.61,.36,1) both; }

/* En-tête : gagne une ombre une fois qu'on a quitté le haut de page */
#site-header { transition: box-shadow .3s ease; }
#site-header.is-scrolled { box-shadow: 0 10px 30px -22px rgba(12,42,54,.55); }

/* Flèches des liens et des boutons : légère avancée au survol */
.btn > svg:last-child:not(:first-child),
main a:not(.btn) > svg:last-child:not(:first-child) { transition: transform .25s cubic-bezier(.22,.61,.36,1); }
.btn:hover > svg:last-child:not(:first-child),
main a:not(.btn):hover > svg:last-child:not(:first-child) { transform: translateX(3px); }

/* Galerie : la photo respire, un voile monte, la légende suit */
.gal-item .photo img { transition: transform .65s cubic-bezier(.22,.61,.36,1); }
.gal-item button:hover .photo img,
.gal-item button:focus-visible .photo img { transform: scale(1.045); }
.gal-item .photo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(12,42,54,.42), transparent 55%);
  opacity: 0; transition: opacity .4s ease;
}
.gal-item button:hover .photo::after,
.gal-item button:focus-visible .photo::after { opacity: 1; }
.gal-item figcaption { transition: transform .35s cubic-bezier(.22,.61,.36,1); }
.gal-item button:hover figcaption { transform: translateY(-3px); }

/* Photos éditoriales (services, à propos) : zoom très lent au survol */
.photo-zoom img { transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.photo-zoom:hover img { transform: scale(1.035); }

/* Méthode : le filet sous chaque numéro se trace quand l'étape apparaît */
.methode-ligne { transform: scaleX(0); transform-origin: left; transition: transform .7s cubic-bezier(.22,.61,.36,1) .18s; }
.reveal.is-in .methode-ligne { transform: none; }

/* Hero : très léger décalage de l'image de fond au défilement */
.hero-parallax { will-change: transform; }

/* Compteurs : pas de saut de largeur pendant le décompte */
[data-compteur] { font-variant-numeric: tabular-nums; }

/* Puces de la zone d'intervention : soulèvement discret */
#zone li, .zone-puce { transition: transform .2s ease, border-color .2s ease; }
#zone li:hover, .zone-puce:hover { transform: translateY(-2px); border-color: #82C9E4; }

/* Accordéon FAQ : la question glisse d'un cheveu à l'ouverture */
.faq-btn > span:first-child { transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.faq-item.is-open .faq-btn > span:first-child { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  .btn > svg, main a > svg, .gal-item .photo img, .gal-item figcaption,
  .photo-zoom img, .faq-btn > span:first-child, #zone li, .zone-puce { transition: none !important; transform: none !important; }
  .gal-item .photo::after { display: none; }
  .methode-ligne { transform: none !important; transition: none !important; }
  .hero-parallax { transform: none !important; }
}

/* Relais entre les deux logos de l'accueil.
   Tant que le grand logo du bandeau est à l'écran, celui de l'en-tête s'efface :
   afficher deux fois la même marque à quelques centimètres fait doublon.
   On masque sans retirer du flux, sinon la navigation se décalerait puis
   ressauterait au retour. */
#logo-entete { transition: opacity .25s ease; }
#logo-entete.est-efface { opacity: 0; visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  #logo-entete { transition: none; }
}

/* Texte fantôme des formulaires.
   Tailwind pose #9CA3AF à opacité pleine : sur fond blanc, « 06 12 34 56 78 »
   se lit comme une valeur déjà saisie, et le visiteur croit devoir l'effacer.
   Plus clair et en italique, l'indication ne peut plus être confondue avec
   sa propre réponse. */
.field::placeholder,
.field::-webkit-input-placeholder { color: #948E86; font-style: italic; opacity: 1; }
.field:focus::placeholder { color: #BDB7AF; }