/* sas-toitures.fr — feuille de style unique. Mobile d'abord (600 / 900 / 1100 px).
   Couleurs relevées sur le logo : bordeaux #88191f, vert d'eau #d7ecdd, beige #d1c3ba, gris #4f5a57.
   Contrastes contrôlés ≥ 4,5:1 (bordeaux sur blanc 9,4:1, gris sur blanc 7:1, blanc sur bordeaux 9,4:1). */
:root {
    --bordeaux: #88191f;
    --bordeaux-fonce: #5e1015;
    --vert: #d7ecdd;
    --vert-fonce: #2f5d43;
    --beige: #d1c3ba;
    --beige-clair: #f6f1ec;
    --gris: #4f5a57;
    --texte: #1f2422;
    --blanc: #fff;
    --rayon: 12px;
    --ombre: 0 6px 22px rgba(31, 36, 34, .09);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--texte);
    background: var(--blanc);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--bordeaux); text-underline-offset: 2px; }
a:hover { color: var(--bordeaux-fonce); }
:focus-visible { outline: 3px solid var(--bordeaux); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.2; color: var(--bordeaux-fonce); }
h1 { font-size: 1.9rem; margin: 0 0 .6em; }
h2 { font-size: 1.45rem; margin: 0 0 .6em; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.aller-contenu { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--bordeaux); color: var(--blanc); padding: 10px 14px; border-radius: 6px; }
.aller-contenu:focus { top: 8px; color: var(--blanc); }

/* ---------- En-tête et menu ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: var(--blanc); box-shadow: 0 2px 10px rgba(0, 0, 0, .07); }
.entete-int { max-width: 1160px; margin: 0 auto; padding: 8px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); }
.marque img { width: 52px; height: 52px; }
.marque-texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque-texte strong { font-size: 1.2rem; color: var(--bordeaux); }
.marque-texte small { font-size: .78rem; color: var(--gris); }
.bouton-menu {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
    border: 2px solid var(--bordeaux); border-radius: 8px; background: var(--blanc); color: var(--bordeaux);
    font: inherit; font-weight: 600; cursor: pointer;
}
.bouton-menu-barres, .bouton-menu-barres::before, .bouton-menu-barres::after {
    display: block; width: 18px; height: 2px; background: currentColor; position: relative; content: "";
}
.bouton-menu-barres::before { position: absolute; top: -6px; }
.bouton-menu-barres::after { position: absolute; top: 6px; }
/* Petits téléphones : icône seule (le bouton garde son aria-label) pour rester sur la ligne du logo */
@media (max-width: 419px) {
    .bouton-menu { padding: 8px 12px; }
    .bouton-menu-texte { display: none; }
    .marque-texte small { font-size: .72rem; }
}
.bouton-menu-barres { margin: 6px 0; }
.menu { flex-basis: 100%; display: none; }
.sans-js .menu, .menu.ouvert { display: block; }
.sans-js .bouton-menu { display: none; }
.menu ul { list-style: none; margin: 0; padding: 4px 0; }
.menu li a { display: block; padding: 12px 4px; text-decoration: none; color: var(--texte); font-weight: 600; border-bottom: 1px solid var(--vert); }
.menu li a[aria-current="page"] { color: var(--bordeaux); }
.menu-tel { display: block; margin: 10px 0 6px; padding: 12px; text-align: center; border-radius: 8px; background: var(--bordeaux); color: var(--blanc); font-weight: 700; text-decoration: none; }
.menu-tel:hover { color: var(--blanc); background: var(--bordeaux-fonce); }

/* ---------- Fil d'Ariane ---------- */
.fil { max-width: 1160px; margin: 0 auto; padding: 12px 16px 0; font-size: .9rem; color: var(--gris); }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.fil li + li::before { content: "›"; margin: 0 8px; }
.fil a { color: var(--gris); text-decoration: underline; }

/* ---------- Boutons ---------- */
.boutons { display: flex; flex-direction: column; gap: 12px; margin: 1.2em 0 0; }
.bouton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px;
    border: 2px solid var(--bordeaux); border-radius: 8px; background: var(--bordeaux); color: var(--blanc);
    font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color .3s ease, color .3s ease;
}
.bouton:hover { background: var(--bordeaux-fonce); border-color: var(--bordeaux-fonce); color: var(--blanc); }
.bouton-clair { background: var(--blanc); color: var(--bordeaux); }
.bouton-clair:hover { background: var(--vert); color: var(--bordeaux-fonce); }
.bouton:disabled { opacity: .75; cursor: wait; }
.lien-fleche { font-weight: 700; }
.lien-fleche::after { content: " →"; }

/* ---------- Accueil : bandeau photo ---------- */
.hero { position: relative; background: var(--bordeaux-fonce); }
.hero-image { width: 100%; height: 300px; object-fit: cover; object-position: center 35%; }
.hero-texte { padding: 22px 16px 28px; background: var(--bordeaux-fonce); color: var(--blanc); }
.hero-texte h1 { color: var(--blanc); font-size: 1.8rem; }
.hero-texte p { font-size: 1.1rem; }
.hero .bouton { background: var(--vert); border-color: var(--vert); color: var(--bordeaux-fonce); }
.hero .bouton:hover { background: var(--blanc); border-color: var(--blanc); }
.hero .bouton-clair { background: transparent; border-color: var(--blanc); color: var(--blanc); }
.hero .bouton-clair:hover { background: var(--bordeaux); color: var(--blanc); }

/* ---------- Sections ---------- */
.bloc, .page { max-width: 1160px; margin: 0 auto; padding: 36px 16px; }
.page { max-width: 860px; }
.page-large { max-width: 1160px; }
.bloc-vert, .bloc-beige { max-width: none; }
.bloc-vert { background: var(--vert); }
.bloc-beige { background: var(--beige-clair); }
.bloc-vert > *, .bloc-beige > * { max-width: 1128px; margin-left: auto; margin-right: auto; }
.intro { font-size: 1.12rem; color: var(--gris); }
.deux-colonnes { display: grid; gap: 24px; align-items: center; }
.photo-arrondie { border-radius: var(--rayon); box-shadow: var(--ombre); width: 100%; }
.encadre { background: var(--vert); border-radius: var(--rayon); padding: 22px 20px; margin: 1.5em 0; }
.liste-coche { list-style: none; margin: 0; padding: 0; }
.liste-coche li { position: relative; padding-left: 30px; margin-bottom: .7em; }
.liste-coche li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--vert-fonce); font-weight: 700; font-size: 1.15rem; }
section + section { margin-top: 1.6em; }

/* ---------- Cartes de prestations ---------- */
.cartes { list-style: none; margin: 1.2em 0; padding: 0; display: grid; gap: 12px; }
.carte a {
    display: block; height: 100%; padding: 16px 18px; border-radius: var(--rayon); background: var(--blanc);
    border: 1px solid var(--beige); border-left: 5px solid var(--bordeaux); text-decoration: none; color: var(--texte);
    transition: box-shadow .3s ease, transform .3s ease;
}
.carte a:hover { box-shadow: var(--ombre); transform: translateY(-2px); color: var(--texte); }
.carte strong { display: block; color: var(--bordeaux); font-size: 1.08rem; }
.carte span { color: var(--gris); }

/* ---------- Prestations ---------- */
.sommaire { background: var(--beige-clair); border-radius: var(--rayon); padding: 16px 20px; margin: 1.2em 0 2em; }
.sommaire p { margin: 0 0 .4em; }
.sommaire ul { margin: 0; padding-left: 20px; }
.sommaire li { margin: .25em 0; }
.prestation { scroll-margin-top: 90px; padding-top: 1.2em; border-top: 2px solid var(--vert); }

/* ---------- Galeries ---------- */
.galerie { list-style: none; margin: 1em 0 0; padding: 0; display: grid; gap: 12px; }
.galerie a { position: relative; display: block; border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); text-decoration: none; }
.galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s ease; }
.galerie-seule img, .galerie img.photo-entiere { aspect-ratio: auto; }
.galerie li { align-self: start; }
.galerie a:hover img { transform: scale(1.03); }
.legende { display: block; padding: 10px 14px; background: var(--blanc); color: var(--bordeaux-fonce); font-weight: 700; }
.etiquette { position: absolute; top: 10px; left: 10px; padding: 3px 12px; border-radius: 999px; font-size: .85rem; font-weight: 700; }
.etiquette-avant { background: var(--blanc); color: var(--gris); }
.etiquette-apres { background: var(--bordeaux); color: var(--blanc); }
.etiquette-pendant { background: var(--vert); color: #1d3b2a; }
.chantier { scroll-margin-top: 90px; margin-top: 2.4em; }
.date { color: var(--gris); font-weight: 600; margin-top: -.4em; }

/* ---------- Vidéos ---------- */
.videos { list-style: none; margin: 1.2em 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.video a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--texte); background: var(--blanc); border-radius: var(--rayon); overflow: hidden; box-shadow: var(--ombre); }
.video-image { position: relative; display: block; }
.video-image img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.video-lecture { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(136, 25, 31, .92); }
.video-lecture::after { content: ""; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent var(--blanc); }
.video-duree { position: absolute; right: 8px; bottom: 8px; padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .78); color: var(--blanc); font-size: .82rem; font-weight: 600; }
.video-titre { display: block; padding: 10px 12px 2px; font-weight: 700; line-height: 1.3; }
.video-lien { display: block; padding: 4px 12px 12px; margin-top: auto; color: var(--bordeaux); font-size: .9rem; text-decoration: underline; }
/* Accueil : les 3 vidéos centrées dans leur bandeau (la 3e, seule sur sa ligne en 2 colonnes, au milieu) */
.bloc-beige .videos { margin-left: auto; margin-right: auto; }
.bloc-beige .video:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 7px); }
.bloc-beige h2, .bloc-beige .intro, .bloc-beige .lien-fleche { text-align: center; }
.bloc-beige .intro { max-width: 720px; }
.bloc-beige p:has(> .lien-fleche) { text-align: center; }

/* ---------- FAQ (accueil) ---------- */
#faq > * { max-width: 860px; }
.faq details { background: var(--blanc); border-radius: 10px; margin-bottom: 10px; box-shadow: 0 2px 8px rgba(31, 36, 34, .06); }
.faq summary { cursor: pointer; padding: 14px 44px 14px 16px; font-weight: 700; color: var(--bordeaux-fonce); position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--bordeaux); }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0; padding: 0 16px 16px; }

/* ---------- Appel à l'action ---------- */
.appel { background: var(--bordeaux); color: var(--blanc); }
.appel-int { max-width: 860px; margin: 0 auto; padding: 36px 16px; text-align: center; }
.appel h2 { color: var(--blanc); }
.appel-horaires { font-weight: 600; color: var(--vert); }
.appel .boutons { justify-content: center; align-items: center; }
.appel .bouton { background: var(--blanc); color: var(--bordeaux); border-color: var(--blanc); }
.appel .bouton:hover { background: var(--vert); border-color: var(--vert); color: var(--bordeaux-fonce); }
.appel .bouton-clair { background: transparent; color: var(--blanc); }
.appel .bouton-clair:hover { background: var(--bordeaux-fonce); color: var(--blanc); }

/* ---------- Formulaire de devis ---------- */
.contact-grille { display: grid; gap: 28px; }
.formulaire-bloc { background: var(--beige-clair); border-radius: var(--rayon); padding: 22px 16px; }
.petit, .aide { font-size: .9rem; color: var(--gris); }
.aide { margin: .3em 0 0; }
.champ { margin-bottom: 16px; }
.champ-ligne { display: grid; gap: 0 16px; }
.champ label { display: block; font-weight: 600; margin-bottom: 4px; }
.champ input[type="text"], .champ input[type="tel"], .champ input[type="email"], .champ select, .champ textarea {
    width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #8a817b; border-radius: 8px;
    background: var(--blanc); font: inherit; color: var(--texte);
}
.champ textarea { resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--bordeaux); outline: 3px solid rgba(136, 25, 31, .25); outline-offset: 0; }
.piege { display: none; }
.calcul-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.calcul-ligne img { border-radius: 6px; border: 1px solid var(--beige); }
.calcul-ligne input { width: 90px !important; }
.bouton-texte { background: none; border: 0; padding: 8px 4px; color: var(--bordeaux); font: inherit; text-decoration: underline; cursor: pointer; }
.champ-case { display: flex; gap: 10px; align-items: flex-start; }
.champ-case input { width: 22px; height: 22px; margin-top: 3px; flex-shrink: 0; accent-color: var(--bordeaux); }
.champ-case label { font-weight: 400; }
.bouton-envoyer { width: 100%; }
.roue { display: none; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, .4); border-top-color: var(--blanc); border-radius: 50%; animation: tourner .8s linear infinite; }
.en-cours .roue { display: inline-block; }
@keyframes tourner { to { transform: rotate(360deg); } }
.message-form { padding: 14px 16px; border-radius: 8px; font-weight: 600; }
.message-erreur { background: #fde8e8; color: #7a1016; border: 1px solid #e6a7aa; }
.message-succes { background: var(--vert); color: #1d3b2a; border: 1px solid #9cc7aa; }
.coordonnees dl { margin: 0 0 20px; }
.coordonnees dl div { padding: 10px 0; border-top: 1px solid var(--vert); }
.coordonnees dt { font-weight: 700; color: var(--bordeaux); }
.coordonnees dd { margin: 2px 0 0; }

/* ---------- Pied de page ---------- */
.pied { background: #2a2f2d; color: #e8ece9; font-size: .95rem; }
.pied-int { max-width: 1160px; margin: 0 auto; padding: 34px 16px 10px; display: grid; gap: 22px; }
.pied h2 { color: var(--blanc); font-size: 1.05rem; margin-bottom: .5em; }
.pied a { color: #f3d9da; }
.pied a:hover { color: var(--blanc); }
.pied ul { list-style: none; margin: 0; padding: 0; }
.pied li { margin: .25em 0; }
.pied-marque { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; }
.pied-marque img { width: 56px; height: 56px; background: var(--blanc); border-radius: 50%; }
.pied-bas { margin: 0; padding: 14px 16px 18px; text-align: center; font-size: .85rem; color: #c3cbc7; border-top: 1px solid #3d4441; }
.pied-credit { display: block; margin-top: 4px; }
.pied-credit a { text-decoration: underline; }

/* ---------- Tablette ---------- */
@media (min-width: 600px) {
    h1 { font-size: 2.2rem; }
    .boutons { flex-direction: row; flex-wrap: wrap; }
    .hero-image { height: 380px; }
    .cartes { grid-template-columns: repeat(2, 1fr); }
    .galerie { grid-template-columns: repeat(2, 1fr); }
    .galerie-seule { grid-template-columns: 1fr; }
    .videos { grid-template-columns: repeat(3, 1fr); }
    .bloc-beige .videos { max-width: 860px; }
    .bloc-beige .video:last-child:nth-child(odd) { grid-column: auto; width: auto; }
    .champ-ligne { grid-template-columns: 1fr 1fr; }
    .formulaire-bloc { padding: 26px 24px; }
    .bouton-envoyer { width: auto; }
    .pied-int { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Ordinateur ---------- */
@media (min-width: 900px) {
    .bouton-menu { display: none; }
    .menu { display: flex !important; flex-basis: auto; align-items: center; gap: 18px; }
    .menu ul { display: flex; gap: 4px; padding: 0; }
    .menu li a { border-bottom: 3px solid transparent; padding: 8px 10px; }
    .menu li a:hover { border-bottom-color: var(--vert); }
    .menu li a[aria-current="page"] { border-bottom-color: var(--bordeaux); }
    .menu-tel { margin: 0; padding: 10px 16px; }
    .hero { display: grid; grid-template-columns: 1fr; }
    .hero-image { grid-area: 1 / 1; height: 520px; }
    .hero-texte {
        grid-area: 1 / 1; align-self: end; margin: 0 auto 36px; width: calc(100% - 64px); max-width: 1100px;
        background: rgba(94, 16, 21, .9); border-radius: var(--rayon); padding: 28px 32px;
    }
    .hero-texte h1 { font-size: 2.5rem; }
    .hero-texte p { max-width: 720px; }
    .bloc, .page { padding: 52px 24px; }
    .deux-colonnes { grid-template-columns: 1.3fr 1fr; gap: 40px; }
    .cartes { grid-template-columns: repeat(4, 1fr); }
    .galerie { grid-template-columns: repeat(3, 1fr); }
    .galerie-seule { grid-template-columns: 1fr; max-width: 760px; }
    .contact-grille { grid-template-columns: 1.6fr 1fr; align-items: start; }
    .coordonnees { position: sticky; top: 100px; }
    .pied-int { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}

/* ---------- Grand écran ---------- */
@media (min-width: 1100px) {
    .videos { grid-template-columns: repeat(4, 1fr); }
    .bloc-vert .videos, .bloc-beige .videos { grid-template-columns: repeat(3, 1fr); max-width: 860px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}