/* ==========================================================================
     AquaClean77 — styles des pages interieures (site multi-pages).

     Cette feuille se charge APRES style.css et ne redefinit aucune de ses
     regles : elle n'ajoute que les briques dont les pages de service ont
     besoin et qui n'existaient pas sur la page unique (banniere de titre,
     fil d'Ariane, corps de texte redactionnel, questions frequentes,
     bandeau d'appel final). Tout reprend les memes variables de couleur,
     les memes polices et les memes rayons que le reste du site : une page
     de service doit se lire comme la page d'accueil, pas comme un site voisin.
     ========================================================================== */

  /* ---------- fil d'Ariane ----------
     Discret par choix : il sert a se reperer et a donner a Google la
     hierarchie des pages, pas a attirer l'oeil. */
  .breadcrumb{
    font-size:13.5px; color:var(--ink-soft);
    padding-top:18px;
  }
  .breadcrumb ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center;}
  .breadcrumb li{display:flex; align-items:center; gap:8px;}
  .breadcrumb li + li::before{content:"›"; color:var(--line); font-size:16px;}
  .breadcrumb a{text-decoration:none; border-bottom:1px solid transparent;}
  .breadcrumb a:hover{border-bottom-color:var(--water);}
  .breadcrumb [aria-current]{color:var(--ink); font-weight:600;}

  /* ---------- banniere de titre ----------
     Remplace le hero de l'accueil sur les pages interieures : meme famille
     visuelle, mais une seule colonne et beaucoup moins haute — le visiteur
     arrive ici depuis une recherche precise, il doit voir tout de suite le
     titre, la promesse et le moyen d'appeler. */
  .page-hero{
    padding-top:34px; padding-bottom:40px;   /* jamais `padding:` : .wrap pose les cotes */
  }
  .page-hero h1{
    font-family:var(--display); font-weight:900; text-transform:uppercase;
    font-size:clamp(30px, 5.2vw, 52px); line-height:0.98; letter-spacing:-0.5px;
    margin:12px 0 0;
  }
  .page-hero h1 em{font-style:normal; color:var(--water);}
  .page-hero .page-baseline{
    font-family:var(--display); font-weight:600; text-transform:uppercase;
    letter-spacing:0.4px; font-size:clamp(17px, 2.4vw, 22px);
    color:var(--rust); margin:12px 0 0;
  }
  .page-hero .lede{max-width:66ch; margin-top:16px;}
  .page-hero .lede strong{color:var(--ink);}
  .page-actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px;}
  .page-price{
    display:inline-flex; align-items:baseline; gap:8px; margin-top:20px;
    background:var(--foam); border:1px solid var(--line); border-radius:var(--radius);
    padding:10px 16px; font-family:var(--display); text-transform:uppercase;
  }
  .page-price b{font-size:26px; font-weight:900; color:var(--water-dark); letter-spacing:-0.5px;}
  .page-price span{font-size:14px; font-weight:600; color:var(--ink-soft); letter-spacing:0.4px;}

  /* Variante sur fond bleu, pour la page dont le sujet est le camion laveur :
     c'est le service signature, il garde le fond fonce de l'accueil. */
  .page-hero.on-ink{background:var(--ink); color:var(--paper);}
  .page-hero.on-ink h1 em{color:var(--spark);}
  .page-hero.on-ink .page-baseline{color:var(--spark);}
  .page-hero.on-ink .lede{color:rgba(244,247,251,0.86);}
  .page-hero.on-ink .lede strong{color:var(--paper);}
  .page-hero.on-ink .breadcrumb{color:rgba(244,247,251,0.7);}
  .page-hero.on-ink .breadcrumb [aria-current]{color:var(--paper);}
  .page-hero.on-ink .page-price{background:rgba(244,247,251,0.08); border-color:rgba(244,247,251,0.22);}
  .page-hero.on-ink .page-price b{color:var(--spark);}
  .page-hero.on-ink .page-price span{color:rgba(244,247,251,0.75);}
  /* le fond fonce deborde la largeur de .wrap : on l'etend a toute la page */
  .hero-band{background:var(--ink);}
  .hero-band .page-hero{padding-bottom:46px;}

  /* ---------- corps redactionnel ----------
     Les pages de service sont d'abord du texte : titres, paragraphes, listes.
     `.prose` leur donne une largeur de lecture confortable et un rythme
     vertical regulier, sans avoir a styler chaque balise dans chaque page. */
  .prose{max-width:74ch;}
  .prose h2{
    font-family:var(--display); font-weight:900; text-transform:uppercase;
    font-size:clamp(24px, 3.4vw, 34px); line-height:1.02; letter-spacing:-0.3px;
    margin:0 0 14px;
  }
  .prose h2 em{font-style:normal; color:var(--water);}
  .prose h3{
    font-family:var(--display); font-weight:600; text-transform:uppercase;
    font-size:clamp(18px, 2.3vw, 22px); letter-spacing:0.2px;
    margin:26px 0 8px;
  }
  .prose p{margin:0 0 14px; color:var(--ink-soft); font-size:16.5px;}
  .prose p strong{color:var(--ink);}
  .prose > :last-child{margin-bottom:0;}

  .section-block{padding-top:44px; padding-bottom:44px; border-top:1px solid var(--line);}
  .section-block:first-of-type{border-top:0;}
  @media (max-width:560px){ .section-block{padding-top:34px; padding-bottom:34px;} }

  /* fond alterne : sur une page longue, il aere et separe les sujets */
  .band-soft{background:var(--paper-dim);}
  .band-soft .section-block{border-top:0;}

  /* ---------- liste a coches ----------
     Reprend la coche du hero d'accueil pour rester dans le meme vocabulaire. */
  .checklist{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px;}
  .checklist.two-cols{grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 28px;}
  @media (max-width:680px){ .checklist.two-cols{grid-template-columns:1fr;} }
  .checklist li{display:flex; gap:10px; align-items:flex-start; font-size:16px; color:var(--ink);}
  .checklist li::before{
    content:""; flex:0 0 20px; height:20px; margin-top:2px; border-radius:50%;
    background:var(--foam) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5AA8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
  }

  /* ---------- cartes de public vise ----------
     « Particuliers », « Copropriétés », « Restaurants »… : trois a quatre
     encadres courts, chacun avec son titre et son paragraphe. */
  .audience-grid{
    display:grid; gap:18px; margin-top:24px;
    grid-template-columns:repeat(auto-fit, minmax(258px, 1fr));
  }
  .audience-card{
    background:#fff; border:1px solid var(--line); border-radius:var(--radius);
    padding:22px 22px 24px; box-shadow:var(--shadow);
  }
  .audience-card h3{
    font-family:var(--display); font-weight:600; text-transform:uppercase;
    font-size:19px; letter-spacing:0.2px; margin:10px 0 8px;
  }
  .audience-card p{margin:0; color:var(--ink-soft); font-size:15.5px;}
  .audience-card p + p{margin-top:10px;}
  .audience-icon{
    width:42px; height:42px; border-radius:11px; background:var(--foam);
    display:grid; place-items:center;
  }
  .audience-icon svg{width:22px; height:22px; stroke:var(--water); fill:none; stroke-linecap:round; stroke-linejoin:round;}
  .audience-card .tarif{
    display:inline-block; margin-top:12px; font-family:var(--display); font-weight:600;
    text-transform:uppercase; letter-spacing:0.3px; font-size:15px; color:var(--water-dark);
  }

  /* ---------- questions frequentes ----------
     En <details> natif : ouvrable sans JavaScript, lisible par les lecteurs
     d'ecran, et le texte reste dans la page pour les moteurs de recherche. */
  .faq{margin-top:22px; max-width:78ch;}
  .faq details{
    border:1px solid var(--line); border-radius:var(--radius); background:#fff;
    margin-bottom:10px;
  }
  .faq summary{
    cursor:pointer; list-style:none; padding:16px 46px 16px 18px; position:relative;
    font-family:var(--display); font-weight:600; text-transform:uppercase;
    font-size:17px; letter-spacing:0.2px;
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:""; position:absolute; right:18px; top:50%; width:12px; height:12px;
    margin-top:-7px; border-right:2px solid var(--water); border-bottom:2px solid var(--water);
    transform:rotate(45deg); transition:transform .18s ease;
  }
  .faq details[open] summary::after{transform:rotate(-135deg); margin-top:-3px;}
  .faq details[open] summary{color:var(--water-dark);}
  .faq .faq-body{padding:0 18px 18px; color:var(--ink-soft); font-size:16px;}
  .faq .faq-body p{margin:0;}
  .faq .faq-body p + p{margin-top:10px;}

  /* ---------- liste de communes ----------
     Meme composant que la section « zone » de l'accueil, sorti ici pour
     pouvoir servir sur toutes les pages de service. */
  .city-cloud{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px;}
  .city-cloud li{
    background:#fff; border:1px solid var(--line); border-radius:999px;
    padding:7px 14px; font-size:14.5px; color:var(--ink);
  }
  .city-cloud li.is-home{background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600;}
  .city-note{margin-top:14px; color:var(--ink-soft); font-size:15px;}

  /* ---------- bandeau d'appel final ----------
     Chaque page se termine par la meme sortie : telephone, e-mail, devis. */
  .cta-band{background:var(--ink); color:var(--paper);}
  .cta-band .cta-inner{
    padding-top:46px; padding-bottom:46px;
    display:grid; grid-template-columns:1.25fr 1fr; gap:32px; align-items:center;
  }
  @media (max-width:820px){ .cta-band .cta-inner{grid-template-columns:1fr; gap:24px;} }
  .cta-band h2{
    font-family:var(--display); font-weight:900; text-transform:uppercase;
    font-size:clamp(26px, 4vw, 40px); line-height:1; letter-spacing:-0.4px; margin:10px 0 0;
  }
  .cta-band h2 em{font-style:normal; color:var(--spark);}
  .cta-band p{color:rgba(244,247,251,0.84); margin:14px 0 0; font-size:16.5px;}
  .cta-band .cta-actions{display:flex; flex-direction:column; gap:12px;}
  .cta-band .cta-actions .btn{justify-content:center;}
  .cta-contacts{
    list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px;
    font-size:16px;
  }
  .cta-contacts a{color:var(--spark); text-decoration:none; border-bottom:1px solid rgba(242,208,64,0.4);}
  .cta-contacts a:hover{border-bottom-color:var(--spark);}

  /* ---------- passerelles entre pages ----------
     Le maillage interne : depuis une page de service, on propose les deux ou
     trois autres. Utile au visiteur, et c'est ce qui fait tenir un site en
     plusieurs pages plutot qu'une pile de pages isolees. */
  .link-grid{
    display:grid; gap:16px; margin-top:22px;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  }
  .link-card{
    display:block; text-decoration:none; background:#fff; border:1px solid var(--line);
    border-radius:var(--radius); padding:20px 20px 22px; transition:transform .16s ease, box-shadow .16s ease;
  }
  .link-card:hover{transform:translateY(-3px); box-shadow:var(--shadow);}
  .link-card strong{
    display:block; font-family:var(--display); font-weight:600; text-transform:uppercase;
    font-size:18px; letter-spacing:0.2px; margin-bottom:6px;
  }
  .link-card span{display:block; color:var(--ink-soft); font-size:15px;}
  .link-card .go{
    display:inline-block; margin-top:12px; font-weight:600; font-size:14.5px; color:var(--water-dark);
  }

  /* ---------- figures avant / apres en pleine largeur ---------- */
  .proof-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); margin-top:24px;}
  .proof-grid figcaption{margin-top:10px; color:var(--ink-soft); font-size:15px;}

  /* ---------- cartes de metier cliquables (accueil) ----------
     Sur le site en plusieurs pages, les quatre cartes de la section services
     ne sont plus decoratives : chacune ouvre la page du metier. Elles passent
     donc de <div> a <a>, ce qui leur ferait heriter du soulignement des liens
     si on ne le retirait pas ici. */
  a.service-card{text-decoration:none; color:inherit;}
  a.service-card:hover .go{text-decoration:underline;}
  .service-card .go{
    margin-top:auto; padding-top:4px;
    font-weight:600; font-size:14.5px; color:var(--water-dark);
  }
  .service-card.accent .go{color:var(--rust-dark);}

  /* Les questions frequentes sont des titres de niveau 3 dans le texte de
     reference : le <h3> vit donc DANS le <summary>, qui reste le bouton
     d'ouverture. Il ne doit rien changer a l'apparence. */
  .faq summary h3{margin:0; font:inherit; color:inherit; display:inline;}

  /* Le bouton secondaire du site est bleu nuit sur fond clair. Dans une
     banniere `on-ink`, il devient invisible (bordure et texte de la meme
     couleur que le fond) : on reprend la variante claire utilisee par la
     section du camion laveur sur la page d'accueil. */
  .page-hero.on-ink .btn-outline{border-color:rgba(244,247,251,0.55); color:var(--paper); background:transparent;}
  .page-hero.on-ink .btn-outline:hover{background:rgba(244,247,251,0.12); color:var(--paper);}

  /* ---------- retour a l'accueil dans le menu ----------
     Sur un site en plusieurs pages, le logo suffit rarement : beaucoup de
     visiteurs cherchent une entree « Accueil » dans le menu, et sur mobile le
     logo disparait derriere le tiroir une fois celui-ci ouvert. Le lien est
     donc AJOUTE DANS LE HTML de chaque page interieure (jamais sur l'accueil
     lui-meme, ou il ne menerait nulle part) : le tiroir du burger recopie les
     liens du header, il le reprend donc tout seul.

     `main.js` retire la classe des liens qu'il clone dans le tiroir : le style
     de l'icone ne peut donc pas s'appuyer sur `.nav-home` la-bas, d'ou la
     seconde regle, qui vise le SVG par sa position. */
  .nav-home{gap:7px;}
  .nav-home svg,
  .nav-drawer nav a svg{
    width:17px; height:17px; flex:none;
    stroke:currentColor; fill:none; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
    /* sans ceci, un tap sur iOS vise le <svg> et Safari n'y synthetise
       aucun clic (meme piege que le bouton burger) */
    pointer-events:none;
  }
  .nav-drawer nav a{display:inline-flex; align-items:center; gap:8px;}