/* ==========================================================================
   main.css — Réparation Pneu Camion
   reparationpneucamion.com — Réseau national de réparation de pneus PL
   Peau visuelle : Bleu routier (#14375B) + Orange sécurité (#E86607)
   ========================================================================== */

/* ---------- Material Symbols ---------- */
/* font-family est indispensable : sans elle, les ligatures (ex. « crash_report »)
   s'affichent telles quelles en texte brut au lieu de produire l'icône. */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* ---------- Accordions details/summary ---------- */
details > summary {
    list-style: none;
    cursor: pointer;
}
details > summary::-webkit-details-marker {
    display: none;
}
details > summary::marker {
    content: none;
}

/* ---------- Animations ---------- */
@keyframes kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes pulse-orange {
    0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.65); }
    70%  { box-shadow: 0 0 0 16px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.pulse-btn {
    animation: pulse-orange 2.4s infinite;
}

@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.reveal {
    opacity: 0;
}
.reveal.is-visible {
    animation: fade-up 0.6s ease-out forwards;
}

/* ---------- Accessibilité : respect des préférences utilisateur ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1; }
}

/* ---------- Saut de navigation (accessibilité) ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: #E86607;
    color: #14375B;
    padding: 0.75rem 1.25rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.skip-link:focus {
    left: 0;
}

/* ---------- Lien d'ancrage : offset sous l'en-tête ---------- */
/* L'en-tête n'est plus « sticky » : le décalage n'a besoin d'être que minimal. */
section[id], div[id] {
    scroll-margin-top: 24px;
}

/* ---------- Bouton d'appel fixe (pilule) : centré, plus large ---------- */
.call-pill {
    -webkit-tap-highlight-color: transparent;
    position: fixed;
    /* Pilule nettement plus large et plus haute, toujours centrée */
    width: min(92vw, 26rem);
    justify-content: center;
    padding: 0.9rem 1.5rem;
    min-height: 60px;
    text-align: center;
    /* La pastille ne doit JAMAIS bouger au survol : on neutralise tout
       déplacement hérité de .btn-call:hover ou des classes utilitaires
       inline (translate-x, active:scale-95). */
    transform: translateX(-50%) !important;
    transition: background-color .2s ease, border-color .2s ease,
                color .2s ease, box-shadow .2s ease;
    z-index: 95;
}
/* Halo pulsé sur un pseudo-élément : ne peut donc PAS écraser
   l'ombre de survol définie sur .call-pill:hover (contrairement à
   une animation sur box-shadow, qui toujours gagnerait). */
.call-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    pointer-events: none;
    box-shadow: 0 0 0 0 rgba(232, 102, 7, .55);
    animation: pill-halo 2.8s infinite;
}
@keyframes pill-halo {
    0%   { box-shadow: 0 0 0 0 rgba(232, 102, 7, .55); }
    70%  { box-shadow: 0 0 0 16px rgba(232, 102, 7, 0); }
    100% { box-shadow: 0 0 0 0 rgba(232, 102, 7, 0); }
}
/* Survol / focus / appui : couleur + ombre uniquement, ZÉRO mouvement.
   `!important` sur transform/translate : passe devant les utilitaires
   Tailwind inline (active:scale-95) et devant .btn-call:hover
   (translateY(-2px)). Sans cela la pastille se déplace au survol. */
.call-pill:hover,
.call-pill:focus-visible,
.call-pill:active {
    transform: translateX(-50%) !important;
    translate: none !important;
    scale: none !important;
    background: #C25205;
    border-color: #14375B;
    color: #FFFFFF;
    box-shadow: 0 8px 26px rgba(232, 102, 7, .45);
}
.call-pill:hover::before,
.call-pill:focus-visible::before {
    animation-play-state: paused;
    box-shadow: 0 0 0 0 rgba(232, 102, 7, 0);
}
@media (prefers-reduced-motion: reduce) {
    .call-pill::before { animation: none; }
}
.call-pill .call-pill-num {
    font-size: 1.15rem;
    line-height: 1.15;
}
.call-pill .call-pill-lbl {
    font-size: 0.75rem;
}
@media (max-width: 767px) {
    .call-pill {
        width: calc(100vw - 1.5rem);
        bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }
}
/* Très petits écrans : on garde le libellé court mais on garde le numéro lisible */
@media (max-width: 359px) {
    .call-pill {
        padding: 0.7rem 0.9rem;
        min-height: 54px;
    }
    .call-pill .call-pill-num { font-size: 1.05rem; }
    /* Sous 360px la pastille ne garde que le numero : le libelle
       "Depannage 24h/24" passerait sous 12px. Le nom accessible reste
       porte par aria-label sur le lien. */
    .call-pill .call-pill-lbl { display: none; }
}
@media (min-width: 768px) {
    .call-pill {
        width: auto;
        min-width: 22rem;
        padding: 0.85rem 1.75rem;
    }
}

/* ==========================================================================
   LOGO : compact dans l'en-tête
   ==========================================================================
   Le logo d'origine est un bandeau très large (760x198, ratio ~3.84:1).
   Sans contrainte de largeur il s'étale et pousse le menu hors écran.
   On le bride en largeur ET on borne la hauteur, tout en gardant la
   lisibilité sur mobile (le nom du site reste entier). */
.site-logo {
    height: 2.25rem;            /* 36px — compact */
    width: auto;
    max-width: 150px;
    object-fit: contain;
    object-position: left center;
}
@media (min-width: 640px) {
    .site-logo { height: 2.5rem; max-width: 175px; }
}
@media (min-width: 1024px) {
    .site-logo { height: 2.75rem; max-width: 200px; }
}
/* Le logo du footer est transparent (logo-light.png) : le fond blanc de
   logo.png formerait un bloc blanc sur le fond marine. Il peut donc etre
   un peu plus grand que celui du header, qui reste sur fond blanc. */
.footer-logo { height: 2.75rem; max-width: 200px; }
@media (min-width: 640px) {
    .footer-logo { height: 3rem; max-width: 230px; }
}
@media (min-width: 1024px) {
    .footer-logo { height: 3.25rem; max-width: 250px; }
}
/* Le conteneur ne doit jamais forcer une largeur au logo */
.site-logo-link {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex-shrink: 0;
}

/* ==========================================================================
   BOUTONS TÉLÉPHONE : texte blanc sur fond orange + survol marqué
   ========================================================================== */
.btn-call {
    background: #E86607;
    color: #FFFFFF;
    border: 2px solid #C25205;
    transition: background-color .2s ease, border-color .2s ease,
                transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.btn-call:hover,
.btn-call:focus-visible {
    background: #C25205;
    border-color: #14375B;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(232, 102, 7, .35);
}
.btn-call:active {
    transform: translateY(0) scale(.98);
    background: #9E4104;
}
.btn-call:focus-visible {
    outline: 3px solid #14375B;
    outline-offset: 2px;
}
/* L'animation pulse-orange anime box-shadow et écraserait l'ombre de survol :
   on met l'animation en pause au survol / focus pour que l'effet soit visible. */
.btn-call:hover,
.btn-call:focus-visible,
.call-pill:hover,
.call-pill:focus-visible {
    animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
    .btn-call:hover { transform: none; }
}

/* ==========================================================================
   FORMULAIRE : compact et entièrement visible sur un écran de téléphone
   ========================================================================== */
.form-compact label {
    margin-bottom: 0.25rem !important;
    font-size: 0.75rem !important;
}
.form-compact input,
.form-compact select,
.form-compact textarea {
    padding: 0.55rem 0.75rem !important;
    line-height: 1.35;
    /* 16px minimum : en dessous, iOS/Safari zoome automatiquement au focus */
    font-size: 16px !important;
    min-height: 44px;
}
.form-compact textarea {
    min-height: 76px;
}
.form-compact button[type="submit"] {
    padding: 0.8rem 1rem !important;
    min-height: 50px;
}
.form-compact > div + div,
.form-compact > div {
    margin-bottom: 0;
}
/* Espacement vertical resserré */
.form-compact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.form-compact .form-note {
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 0.15rem;
}

/* ==========================================================================
   BORDURES PROMINENTES
   ========================================================================== */
.border-strong {
    border: 2px solid #18446A;
}
.form-compact input,
.form-compact select,
.form-compact textarea {
    border: 2px solid #1C4A75 !important;
}
.form-compact input:focus,
.form-compact select:focus,
.form-compact textarea:focus {
    border-color: #E86607 !important;
}
.svc-card,
.trust-bar,
.zone-card {
    border: 2px solid #18446A;
}

/* ==========================================================================
   RESPONSIVE GLOBAL
   ========================================================================== */
/* Bloque le zoom automatique d'iOS/Safari sur les champs de formulaire
   (iOS zoome si font-size < 16px au focus). Volontairement NON global :
   l'appliquer à tous les boutons gonflerait les petites pilules. */
input, select, textarea {
    font-size: 16px;
}
@media (min-width: 640px) {
    /* Sur grand écran on rend la taille au texte du site */
    input, select, textarea {
        font-size: inherit;
    }
}
@media (max-width: 1023px) {
    /* Pas de .container sur ce site : on cible lesSections cadrées directement */
    .section-pad { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 639px) {
    /* Empêche tout débordement horizontal */
    html, body {
        max-width: 100vw;
        overflow-x: hidden;
    }
    /* Cibles tactiles minimales 44px (accessibilité mobile) */
    a, button, [role="button"] {
        min-height: 44px;
    }
    .call-pill a, .call-pill {
        min-height: 60px;
    }
    h1 { font-size: 1.75rem; line-height: 1.2; }
    h2 { font-size: 1.35rem; line-height: 1.25; }
    h3 { font-size: 1.1rem; }
}

/* ==========================================================================
   HERO / CTA — fonds image (WebP numéroté)
   ========================================================================== */
.hero-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background:
        linear-gradient(105deg, rgba(20, 55, 91, 0.95) 0%, rgba(20, 55, 91, 0.72) 55%, rgba(20, 55, 91, 0.92) 100%),
        url('../images/camion-sur-route.webp');
    background-size: cover;
    background-position: center;
    animation: kenburns 22s ease-out forwards;
    z-index: 0;
}

.cta-bg {
    background:
        linear-gradient(105deg, rgba(20, 55, 91, 0.94) 0%, rgba(20, 55, 91, 0.88) 100%),
        url('../images/reparation-pneu-camion-sur-place.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Fond de hero pour pages intérieures */
.page-hero {
    background:
        linear-gradient(105deg, rgba(20, 55, 91, 0.96) 0%, rgba(20, 55, 91, 0.78) 100%),
        url('../images/atelier-pneu-camion.webp');
    background-size: cover;
    background-position: center;
}

/* ==========================================================================
   BLOCS RÉUTILISABLES
   ========================================================================== */

/* Bandeau de statistiques / réassurance */
.trust-bar {
    font-variant-numeric: tabular-nums;
}

/* Mot-clé mis en avant dans le texte */
.kw {
    font-weight: 800;
    color: #E86607;
}

/* Puces « à faire / à éviter » */
.do-dont li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.65rem;
}
.do-dont li::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
}
.do-dont li.yes::before {
    content: '\2713';
    color: #15803D;
}
.do-dont li.no::before {
    content: '\2715';
    color: #7A1318;
}

/* Cartes services : soulignement animé au survol */
.svc-card {
    position: relative;
    overflow: hidden;
}
.svc-card::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 3px;
    width: 0;
    background: #E86607;
    transition: width 0.35s ease;
}
.svc-card:hover::after {
    width: 100%;
}

/* La pastille d'appel fixe occupe la bande du bas de l'ecran
   (bottom: 1rem + hauteur ~60px = 76px). On reserve cette bande sous
   le pied de page pour qu'aucun texte ne puisse passer dessous.
   !important car les utilitaires Tailwind (py-6 / py-8) Passent avant. */
footer {
    padding-bottom: 5.5rem !important; /* 88px > 76px */
}

/* Impression : masquer nav, CTA flottants */
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; color: #000 !important; }
    footer { padding-bottom: 0 !important; }
    .footer-mark { display: none !important; }
}

/* ---------------------------------------------------------------- FOOTER
   Le conteneur du pied de page est limite a max-w-7xl (1280px). Sur grand
   ecran (1600px et plus) il restait jusqu'a 640px de bleu nuit vide de part et
   d'autre du contenu, ce qui lisait "bord vide". On habille cette zone avec un
   halo radial tres discret et un immense filigrane diagonal, tous deux purely
   decoratifs (aria-hidden) et sans contrast impact sur le texte. */
.footer-mark {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(232, 102, 7, .10), transparent 60%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .022) 0 2px, transparent 2px 16px);
}

@media (min-width: 1536px) {
    .footer-mark::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -2%;
        width: 46rem;
        height: 46rem;
        transform: translateY(-50%) rotate(12deg);
        background: linear-gradient(135deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 62%);
        border-radius: 4rem;
    }
}

/* Bouton secondaire du pied de page : meme aspect que .btn-call mais en
   orange plein, pour equilibrer la colonne Contact. */
.btn-cta {
    background: #E86607;
    color: #fff;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-cta:hover,
.btn-cta:focus-visible {
    background: #C25205;
    color: #fff;
}
.btn-cta:active { transform: translateY(1px); }