/* Polices : chargées dans le <head> de chaque page (plus de @import, plus de Font Awesome) */

/* =====================================================================
   SCAPADE MARÉCHALERIE — main.css
   Basé sur Miniport by HTML5 UP (html5up.net | @ajlkn, licence CCA 3.0)
   Refactorisation complète : une seule définition par composant.

   SOMMAIRE
   01. Variables
   02. Reset
   03. Base (typographie, liens, listes)
   04. Mise en page (container, grille)
   05. Composants (boutons, formulaires, tableaux, images, box, icônes)
   06. Navigation
   07. Pop-ups (modales)
   08. Page d'accueil (sections)
   09. FAQ (accordéon)
   10. Page Actualités
   10b. Page Entretien (conseils, produits, commande)
   11. Responsive : ≤1280 / ≤980 / ≤736 / ≤480

   RÈGLE D'OR : pour modifier un élément, chercher sa section ci-dessus.
   Ne jamais ajouter un deuxième bloc pour le même sélecteur en bas
   du fichier : modifier le bloc existant.
   ===================================================================== */


/* =====================================================================
   01. VARIABLES
   ===================================================================== */

:root {
    --c-text: #1b404b;          /* texte et titres */
    --c-accent: #e1a13b;        /* doré du logo : boutons, survols */
    --c-nav: #1d3f4a;           /* bandeau de navigation */
    --c-border: #ddd;
    --c-input: #f2f2f2;

    --nav-h: 56px;              /* hauteur du bandeau */

    /* Ordre d'empilement : les pop-ups passent TOUJOURS au-dessus du menu */
    --z-nav: 1000;
    --z-modal: 2000;
}


/* =====================================================================
   02. RESET
   ===================================================================== */

html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: none; }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

mark {
    background-color: transparent;
    color: inherit;
}

input::-moz-focus-inner { border: 0; padding: 0; }

input, select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


/* =====================================================================
   03. BASE
   ===================================================================== */

html {
    /* Les ancres (#contact, #faq…) ne passent plus sous le bandeau fixe */
    scroll-padding-top: calc(var(--nav-h) + 10px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-top: var(--nav-h);   /* place réservée au bandeau fixe */
    overflow-x: hidden;
    background: #fff;
}

/* Miniport : pas d'animation pendant le chargement */
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
    animation: none !important;
    transition: none !important;
}

body, input, textarea, select {
    font-family: 'Open Sans', sans-serif;
    font-size: 13pt;
    font-weight: 300;
    line-height: 1.85em;
    color: var(--c-text);
}

a {
    color: var(--c-text);
    text-decoration: underline;
    transition: color .2s ease-in-out;
}

a:hover { color: var(--c-accent); }

/* Texte non sélectionnable, sauf dans les champs de formulaire */
body {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
}

/* Tout ce qui est cliquable : main au survol */
a, button, label[for], [data-popup], [data-add], .accordion-title, .qty-btn,
input[type="submit"], input[type="checkbox"], input[type="file"] { cursor: pointer; }

b, strong {
    font-weight: 600;
    color: var(--c-text);
}

i, em { font-style: italic; }

sub, sup {
    position: relative;
    font-size: 0.8em;
}
sub { top: 0.5em; }
sup { top: -0.5em; }

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text);
    margin: 0 0 0.75em 0;
    font-weight: 700;
    overflow-wrap: break-word;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}

h1 { font-size: 3.25em; font-weight: 300; letter-spacing: -0.025em; }
h2 { font-size: 2em;  letter-spacing: -0.015em; }
h3 { font-size: 1.5em; letter-spacing: -0.015em; }

p, li { overflow-wrap: break-word; }

p, ul, ol, dl, table { margin-bottom: 2em; }

hr {
    border: 0;
    border-top: solid 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.1);
    height: 1px;
    margin: 3em 0;
}

ul {
    list-style: disc;
    padding-left: 1em;
}
ul li { padding-left: 0.5em; }

ol {
    list-style: decimal;
    padding-left: 1.25em;
}
ol li { padding-left: 0.25em; }

header { margin: 0 0 3em 0; }
header > p { font-size: 1.25em; margin: 0; }

footer {
    margin: 0;
    padding: 20px 0;
    text-align: center;
}
footer > p { font-size: 1.25em; }

section, article { margin-bottom: 3em; }

section > :last-child,
article > :last-child,
section:last-child,
article:last-child,
body > article {
    margin-bottom: 0;
}

img {
    max-width: 100%;
    height: auto;
}

iframe { max-width: 100%; }

.justifier { text-align: justify; }

/* L'attribut hidden doit toujours masquer (sinon "form textarea { display:block }" l'emporte) */
[hidden] { display: none !important; }


/* =====================================================================
   04. MISE EN PAGE
   ===================================================================== */

/* ----- Container ----- */

.container {
    width: 1200px;
    max-width: calc(100% - 50px);
    margin: 0 auto;
}
.container.medium { width: 900px; }

/* ----- Grille Miniport (gouttière 25px, 15px sur mobile) ----- */

.row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: -25px;
    margin-left: -25px;
}
.row > * { padding: 25px 0 0 25px; }
.row.aln-center { justify-content: center; }

.row > .col-1{width:8.33333%} .row > .col-2{width:16.66667%} .row > .col-3{width:25%} .row > .col-4{width:33.33333%} .row > .col-5{width:41.66667%} .row > .col-6{width:50%} .row > .col-7{width:58.33333%} .row > .col-8{width:66.66667%} .row > .col-9{width:75%} .row > .col-10{width:83.33333%} .row > .col-11{width:91.66667%} .row > .col-12{width:100%}
/* Les colonnes -large, -medium, -small sont dans la section 11 */


/* =====================================================================
   05. COMPOSANTS
   ===================================================================== */

/* ----- Boutons ----- */

.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    position: relative;
    display: inline-block;
    max-width: 24em;
    padding: 12px 20px;
    border: 0;
    border-radius: 8px;
    background-color: var(--c-accent);
    background-image: url("images/bg.png"), linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 2px 1px 0 rgba(255, 255, 255, 0.75);
    color: #fff;
    font-size: 1.1em;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    text-shadow: -1px -1px 0.5px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: background-color .2s ease-in-out;
}

.button:hover,
input[type="submit"]:hover { color: #fff; }

.button:active,
input[type="submit"]:active { top: 1px; }

/* Bouton d'envoi du formulaire : plus généreux */
input[type="submit"].button { padding: 1em 2.35em; }

/* ----- Listes d'actions (bouton du formulaire) ----- */

ul.actions {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.actions li { padding: 0; margin: 0; }

/* ----- Formulaires ----- */

form label {
    display: block;
    margin: 0 0 0.5em 0;
    font-weight: 700;
}

form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="password"],
form select,
form textarea {
    display: block;
    width: 100%;
    padding: 0.75em;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: var(--c-input);
    color: #000;
    font-size: 1em;
    transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
}

form input[type="text"]:focus,
form input[type="email"]:focus,
form input[type="tel"]:focus,
form select:focus,
form textarea:focus {
    outline: none;
    background: #fafafa;
    box-shadow: inset 0 0 2px 1px var(--c-accent);
}

form textarea { height: 15em; }

form input[type="file"] {
    max-width: 100%;
    font-size: 0.9em;
}

form ::placeholder { color: #555; opacity: 1; }

/* ----- Tableaux ----- */

table { width: 100%; }

.tarifs-table {
    margin-top: 20px;
    border-collapse: collapse;
}

.tarifs-table th,
.tarifs-table td {
    padding: 10px;
    border-bottom: 1px solid var(--c-border);
    text-align: left;
}

.tarifs-table th { font-weight: 600; }

.tarifs-table th:last-child,
.tarifs-table td:last-child {
    text-align: right;
    white-space: nowrap;
}

/* ----- Images Miniport ----- */

.image {
    display: inline-block;
    position: relative;
}
.image img { display: block; width: 100%; }
.image.fit { display: block; width: 100%; }

/* ----- Box ----- */

.box {
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 2em;
}

/* Box "Démarche" : hauteur minimale (et non fixe) pour ne jamais couper le texte */
.box.style1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 430px;
    height: 100%;
    padding: 3em 2em 3.5em 2em;
}
.box.style1 h3 { margin-bottom: 0.5em; }
.box.style1 p { text-align: justify; }

.box.style1 .image img {
    width: 100%;
    height: 180px;
    object-position: center;
}

/* ----- Icônes (SVG en ligne, sans Font Awesome) ----- */

.icon { text-decoration: none; }
.icon > .label { display: none; }

/* ----- Réseaux sociaux ----- */

ul.social {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

ul.social li {
    display: inline-block;
    margin: 0.25em;
    padding: 0;
}

ul.social li a {
    display: block;
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    color: var(--c-accent);
    text-decoration: none;
    transition: transform .2s ease-in-out;
}

ul.social li a svg {
    display: block;
    width: 26px;
    height: 26px;
    margin: 11px auto;
    fill: currentColor;
}

ul.social li a:hover { transform: scale(1.1); }


/* =====================================================================
   06. NAVIGATION
   Une seule structure pour toutes les pages :
   <nav id="nav-all"> logo-texte (mobile) + bouton burger (mobile) + <ul class="nav-menu">
   ===================================================================== */

#nav-all {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-nav);
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-nav);
}

.nav-menu {
    display: flex;
    gap: 25px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-menu li { padding: 0; }

.nav-menu a {
    display: flex;
    align-items: center;
    height: var(--nav-h);
    padding: 0 1.25em;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a:focus-visible { color: var(--c-accent); }

/* Éléments visibles seulement sur mobile/tablette (voir section 11) */
.nav-brand,
.nav-toggle { display: none; }

.nav-brand {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
}
.nav-brand:hover { color: var(--c-accent); }

.nav-toggle {
    position: relative;
    width: 44px;
    height: 44px;
    margin-right: -8px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Les trois barres du burger */
.nav-toggle span {
    position: absolute;
    left: 10px;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }

/* Burger → croix quand le menu est ouvert */
#nav-all.is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-all.is-open .nav-toggle span:nth-child(2) { opacity: 0; }
#nav-all.is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* =====================================================================
   07. POP-UPS (MODALES)
   Structure HTML attendue :
   <div class="modal" id="…" aria-hidden="true">
     <div class="modal-content" role="dialog" aria-modal="true">
       <button class="modal-close">×</button>     ← ne défile jamais
       <div class="modal-body"> contenu </div>     ← seule zone qui défile
     </div>
   </div>
   ===================================================================== */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(0, 0, 0, 0.6);
}

.modal.is-open { display: flex; }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 48px);      /* navigateurs anciens */
    max-height: calc(100dvh - 48px);     /* tient compte des barres Safari/Chrome mobile */
    overflow: hidden;
    border-radius: 8px;
    background: #fff;
    color: var(--c-text);
    text-align: left;
    text-shadow: none;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: modalIn 0.3s ease;
}

.modal-body {
    flex: 1 1 auto;
    min-height: 0;                        /* indispensable pour que le flex puisse défiler */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;         /* le fond ne défile pas en même temps */
    padding: 44px 30px 30px;
}

.modal-body > :last-child { margin-bottom: 0; }

.modal-body h2 { padding-right: 20px; }

.modal-body hr { margin: 1.5em 0; }

.modal-close {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 1;
    width: 44px;                          /* zone tactile recommandée Apple/Google */
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    color: #333;
    font-family: inherit;
    font-size: 32px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.modal-close:hover,
.modal-close:focus-visible { color: var(--c-accent); }

@keyframes modalIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Blocage du défilement de la page quand une pop-up est ouverte
   (technique compatible iPhone : le JS fixe le body à la position courante) */
body.modal-open {
    position: fixed;
    left: 0;
    right: 0;
    overflow: hidden;
}

/* Image dans une pop-up (Stage) */
.popup-image-wrapper {
    margin-bottom: 20px;
    text-align: center;
}
.popup-image-wrapper img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 8px;
}

/* Deux images côte à côte (pop-up Fourchettes) */
.images-row {
    display: flex;
    gap: 15px;
    margin-top: 1em;
}
.images-row img {
    flex: 1 1 0;
    min-width: 0;
    width: 50%;
    height: auto;
    border-radius: 8px;
}

/* Éléments qui ouvrent une pop-up */
.popup-trigger { cursor: pointer; }


/* =====================================================================
   08. PAGE D'ACCUEIL
   ===================================================================== */

/* ----- Wrappers de section (Miniport) ----- */

.wrapper {
    margin-bottom: 0;               /* sections collées : pas de bande blanche entre elles */
    padding: 8em 0;
    text-align: center;
    background-image: url("images/bg.png");
    box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.05), inset 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}
.wrapper.style1 { background-image: none; background-color: #fff; }
.wrapper.style2 { background-color: #fafafa; text-shadow: 1px 1px 0 #fff; }
.wrapper.style3 { background-color: #f4f4f4; text-shadow: 1px 1px 0 #fff; }

/* Titres de section et de cartes : écrits normalement dans le HTML (lisibles par Google),
   affichés en majuscules comme avant */
.wrapper header h2,
#interventions h3 { text-transform: uppercase; }

/* ----- HOME ----- */

.logo-oval {
    width: 350px;
    max-width: 100%;
    aspect-ratio: 35 / 22;
    margin: 0 auto 30px auto;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
}
.logo-oval img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.formations-list {
    width: 260px;               /* même largeur que les prestations en dessous */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-size: 16px;
    line-height: 1.8;
}
.formations-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    padding: 0;
}
.formations-list li img {
    width: 32px;
    height: 26px;
    object-fit: contain;
}

/* Titre principal : écrit normalement dans le HTML, affiché en majuscules */
#home h1 {
    font-size: 1.9em;
    font-weight: 300;
    line-height: 1.15;              /* espace entre les lignes du titre */
    text-transform: uppercase;
    margin: 0 0 0.9em 0;            /* ESPACE SOUS LE H1 : augmenter pour plus d'air */
}

/* "Bien-être • Précision • Équilibre" */
.tagline {
    margin-bottom: 35px;
    text-align: center;
    font-weight: 700;
}
.tagline span { color: var(--c-accent); }

.intro-text {
    margin-top: 35px;
    font-size: 18px;
    font-weight: 300;
}

/* Bouton "Appeler" : colonne de gauche, sous les prestations */
.cta-row {
    width: 260px;                   /* même largeur que les formations et les prestations */
    max-width: 100%;
    margin: 40px auto 0;            /* espace entre les prestations et le bouton */
}
.cta-appel {
    display: block;
    width: 100%;
    min-height: 48px;               /* facile à toucher avec le doigt */
    line-height: 48px;
    padding: 0 1em;
    font-size: 1em;
    white-space: nowrap;
}

/* Prestations : colonne de gauche, sous les formations */
.h1-services {
    width: 260px;                   /* même alignement que la liste des formations */
    max-width: 100%;
    margin: 45px auto 0;            /* espace entre les formations et le trait */
    padding-top: 30px;              /* espace entre le trait et les prestations */
    border-top: 1px solid var(--c-border);
    text-align: left;
    font-size: 15px;                /* taille des prestations : baisser pour plus petit */
    line-height: 1.5;
}
.h1-services p { margin: 0 0 0.8em 0; }   /* espace entre chaque prestation */
.h1-services p:last-child { margin-bottom: 0; }
.h1-services strong {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.map-container {
    width: 100%;
    margin-top: 50px;
    overflow: hidden;
}
.map-container iframe {
    display: block;
    width: 100%;
    height: 280px;
    border: 0;
    border-radius: 8px;
}

/* Communes d'intervention */
.zone-text {
    margin-top: 35px;
    text-align: center;
    font-size: 1.05em;
    font-style: normal;
    font-weight: 400;               /* 600 = plus gras */
    line-height: 1.6;
    letter-spacing: 0.01em;
    color: #2b2b2b;
}
.zone-text strong { font-weight: 600; }

/* ----- DÉMARCHE ----- */

/* Espace fixe entre la phrase et le bouton "Je remplis le questionnaire" */
#demarche footer header {
    margin: 1em 0 3em;
    text-align: center;
}
#demarche footer header p { display: inline-block; }

/* ----- INTERVENTIONS ----- */

#interventions .row > div { display: flex; }

#interventions .box.style2 {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

#interventions .image.featured {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 10px 0 1.5em;
}

#interventions .image.featured img {
    width: auto;
    max-width: 100%;
    height: 180px;
    object-fit: contain;
    border-radius: 8px;
}

#interventions h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
    margin-bottom: 0.25em;
}

#interventions .box.style2 p {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3em;
    margin-bottom: 0;
}

#interventions .box.style2:hover h3,
#interventions .box.style2:hover p,
#interventions .box.style2:focus-visible h3 { color: var(--c-accent); }

.interventions-intro { margin-bottom: 60px; }

.interventions-footer { margin-top: 2em; }
.interventions-footer p { margin: 0.5em 0 2em; }

.interventions-note {
    margin: 0 0 3em;
    font-size: 16px;
    font-style: italic;
}

/* ----- CONTACT ----- */

#contact {
    padding-bottom: 20px;
    background-color: #fff;
}
#contact .button { box-shadow: none; text-shadow: none; }

/* ----- PIED DE PAGE ----- */

#site-footer { padding: 15px 0; }

#copyright {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1em;
    line-height: 1em;
}
#copyright li {
    display: inline-block;
    margin: 0 0 0 1em;
    padding: 0 0 0 1em;
    border-left: solid 1px rgba(0, 0, 0, 0.5);
}
#copyright li:first-child {
    margin-left: 0;
    padding-left: 0;
    border: 0;
}
#copyright a { text-decoration: none; }
#copyright a:hover { color: var(--c-accent); }


/* =====================================================================
   09. FAQ (ACCORDÉON)
   ===================================================================== */

#faq { margin-top: 0; }

.accordion {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.accordion-item {
    padding: 10px 0;
    border-bottom: 1px solid var(--c-border);
}

.accordion-title {
    display: block;
    padding: 15px;
    color: var(--c-text);
    font-size: 18px;
    font-weight: 400;             /* questions en normal (rubriques en gras) */
    line-height: 1.4;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.3s;
}
.accordion-title strong { color: inherit; font-weight: 700; }
h3.accordion-title { margin: 0; letter-spacing: 0; }   /* les questions sont des titres H3 */

.accordion-title:hover,
.accordion-title:focus-visible { color: var(--c-accent); }

.accordion-content {
    display: none;
    padding: 15px;
    background: #fff;
    text-align: center;
}
.accordion-item.is-open .accordion-content { display: block; }

.accordion-content ul {
    margin-left: 20px;
    text-align: left;
    list-style: disc;
}
.accordion-content > :last-child { margin-bottom: 0; }

.accordion-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

/* Accueil : lien vers la page FAQ complète */
.faq-more { margin: 2em 0 0; text-align: center; }

/* Page FAQ : sommaire + un bloc par thème */
.faq-toc { font-size: 0.95em; line-height: 2; }
.faq-toc a {
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    border-bottom: none;
}
.faq-toc a:hover,
.faq-toc a:focus-visible { color: var(--c-accent); }
.faq-toc span { margin: 0 0.4em; color: var(--c-accent); }
.faq-group { margin: 3em 0 0; scroll-margin-top: 70px; }
.faq-group { text-align: center; }
.faq-group h2 {                     /* titre de rubrique : gras, plus grand, souligné en doré */
    display: inline-block;
    margin: 0 0 0.8em;
    padding-bottom: 0.3em;
    border-bottom: 3px solid var(--c-accent);
    font-size: 1.6em;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.faq-group .accordion { text-align: center; }


/* =====================================================================
   10. PAGE ACTUALITÉS
   ===================================================================== */

/* Haut de page : titre + introduction */
.news-top {
    margin: 4em 0 0;
    text-align: center;
}
.news-title {
    font-size: 2.2em;
    font-weight: 300;
    text-transform: uppercase;
    margin: 0 0 0.6em;
}

.news-intro {
    max-width: 760px;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
}

.news-section p,
.news-section li { text-align: justify; }

.news-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 6em 0 0;
    text-align: left;
}
.news-header h2 { margin: 0; }
#conference .news-header { margin-bottom: 1em; }

.news-header .button,
.news-buttons { margin-left: auto; flex-shrink: 0; }

.news-buttons {
    display: flex;
    gap: 15px;
}

.news-lead { font-size: 16px; }

/* Liens sans soulignement, dorés au survol */
.news-links a,
.link-pop {
    color: var(--c-text);
    text-decoration: none;
}
.news-links a:hover,
.link-pop:hover,
.link-pop:focus-visible { color: var(--c-accent); }

/* Titres de section : écrits normalement, affichés en majuscules */
.news-header h2 { text-transform: uppercase; }

/* Encadré de fin : retour vers les prestations */
.news-cta {
    margin: 6em 0 4em;
    padding: 2em 1.5em;
    border-top: 1px solid var(--c-border);
    text-align: center;
}
.news-cta p { margin: 0 0 1em; }
.news-cta .news-cta-tel { margin: 1em 0 0; font-size: 0.95em; }

/* Variante : question, bouton et téléphone sur une seule ligne (page Stage) */
.news-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.8em 1.2em;
}
.news-cta-row p,
.news-cta-row .news-cta-tel { margin: 0; font-size: 1em; }
.news-cta-row .button { width: auto; }

/* Intertitres dans une section (page Stage : Objectif, Programme, Tarif…) */
.news-section h3 { margin: 2em 0 0.6em; }
.news-header + h3 { margin-top: 2.5em; }   /* espace entre le titre de la section et le premier intertitre */


/* =====================================================================
   10 bis. PAGE ENTRETIEN (entretien.html : conseils, produits, commande)
   ===================================================================== */

/* Titre principal de la page : même rendu que les titres de section */
.page-title {
    font-size: 2em;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-transform: uppercase;
}

/* ----- Cartes conseils ----- */

.advice-group {
    margin: 2.5em 0 1em;
    color: var(--c-accent);
    font-size: 1.3em;
    text-align: left;
}
header + .advice-group { margin-top: 0; }

.advice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.advice-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 1.4em 1.2em;
    border: 1px solid var(--c-border);
    border-top: 4px solid var(--c-accent);
    border-radius: 10px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.advice-card:hover h4,
.advice-card:focus-visible h4 { color: var(--c-accent); }
.advice-card:hover,
.advice-card:focus-visible {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    outline: none;
}
.advice-card h4 {
    margin: 0 0 0.4em;
    font-size: 1.1em;
    font-weight: 700;
    line-height: 1.3;
}
.advice-card p {
    flex: 1;
    margin: 0 0 0.8em;
    font-size: 0.95em;
    line-height: 1.5;
}
.advice-more {
    color: var(--c-accent);
    font-size: 0.9em;
    font-weight: 700;
}

.advice-warning {
    margin: 2.5em auto 0;
    max-width: 700px;
    font-size: 0.95em;
    font-style: italic;
}
.advice-links { margin: 1em 0 0; font-size: 0.95em; }

/* ----- Contenu d'une fiche conseil ----- */

.advice h3 {
    margin: 1.3em 0 0.4em;
    color: var(--c-accent);
    font-size: 1.05em;
}
.advice ul { margin-bottom: 0.8em; }
.advice li, .advice p { line-height: 1.6; }
.advice p { margin-bottom: 0.8em; }
.advice .advice-cause { font-weight: 600; }

.advice-product {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    margin: 0.6em 0;
    padding: 0.8em 1em;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fafafa;
    line-height: 1.5;
}
.advice-product span { font-size: 0.9em; opacity: 0.85; }

.advice-product .button {
    flex-shrink: 0;
    width: auto;
    padding: 8px 14px;
    font-size: 0.85em;
}
.advice-product .button.is-added { background-color: #3d8b5a; }

/* Les 3 étapes "comment commander" */
.shop-steps {
    display: flex;
    gap: 20px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    counter-reset: step;
    margin-top: 2em;
}
.shop-steps li {
    flex: 1 1 0;
    position: relative;
    padding: 3.2em 1.2em 1.2em;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fff;
    font-size: 0.95em;
    line-height: 1.6;
    counter-increment: step;
}
.shop-steps li:before {
    content: counter(step);
    position: absolute;
    top: 0.9em;
    left: 50%;
    transform: translateX(-50%);
    width: 1.8em;
    height: 1.8em;
    border-radius: 50%;
    background: var(--c-accent);
    color: #fff;
    font-weight: 700;
    line-height: 1.8em;
    text-align: center;
}

/* Grille de produits */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: 960px;
    margin: 0 auto;
    gap: 25px;
    text-align: center;
}

.product {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    transition: box-shadow .2s ease;
}

/* Produit sélectionné : liseré doré */
.product.is-selected {
    box-shadow: inset 0 0 0 2px var(--c-accent), 0 2px 6px 0 rgba(0, 0, 0, 0.12);
}

.product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 180px;
    margin-bottom: 1em;
    border-radius: 8px;
    background: #f4f4f4;
    overflow: hidden;
}
.product-image img {
    max-height: 100%;
    width: auto;
    object-fit: contain;
}
/* Image manquante : on garde un fond neutre */
.product-image.no-image img { display: none; }

.product h3 { margin-bottom: 0.25em; }

.product-desc {
    flex: 1;
    margin-bottom: 0.75em;
    font-size: 0.95em;
    line-height: 1.6;
}

.product-price {
    margin-bottom: 0.75em;
    color: var(--c-accent);
    font-size: 1.3em;
    font-weight: 700;
    text-shadow: none;
}

/* Sélecteur de quantité − 0 + */
.qty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.qty-btn {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--c-border);
    border-radius: 50%;
    background: #fff;
    color: var(--c-text);
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s, color .2s;
}
.qty-btn:hover,
.qty-btn:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.qty-input {
    width: 3em;
    padding: 0.35em 0;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fff;
    color: var(--c-text);
    font-size: 1em;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.product-brand {
    display: block;
    margin-top: 0.2em;
    font-size: 0.6em;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.7;
}

/* Encadré "Artimud ou Hoof-Stuff ?" */
.shop-tip {
    max-width: 700px;
    margin: 2em auto 0;
    padding: 1em 1.5em;
    border-left: 4px solid var(--c-accent);
    border-radius: 0 8px 8px 0;
    background: #fff;
    text-align: left;
    line-height: 1.7;
}
.shop-tip > strong:first-child {
    display: block;
    margin-bottom: 0.3em;
    color: var(--c-accent);
}

.shop-legal {
    margin: 2em 0 0;
    font-size: 0.9em;
    font-style: italic;
}

/* Récapitulatif de commande */
.order-summary {
    margin-bottom: 2em;
    padding: 1.2em 1.5em;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    background: #fafafa;
    text-align: left;
}
.order-summary .order-empty {
    margin: 0;
    font-style: italic;
    text-align: center;
}
.order-summary table { margin: 0; }
.order-summary td { padding: 6px 0; border-bottom: 1px solid var(--c-border); }
.order-summary td:last-child { text-align: right; white-space: nowrap; }
.order-summary tr.order-total td {
    padding-top: 10px;
    border-bottom: 0;
    font-weight: 700;
}

.order-form { text-align: left; }

.delivery-info {
    margin: 0;
    padding: 0.75em 1em;
    border: 1px solid var(--c-border);
    border-radius: 8px;
    background: #fafafa;
}

.delivery {
    padding: 0.75em 1em;
    border: 1px solid var(--c-border);
    border-radius: 8px;
}
.delivery legend {
    padding: 0 0.4em;
    font-weight: 600;
}
.delivery label,
.cgv-check {
    display: flex;
    align-items: flex-start;
    gap: 0.6em;
    margin: 0.3em 0;
    font-weight: 300;
    cursor: pointer;
}
.delivery .hint { opacity: 0.75; font-size: 0.9em; }

/* Cases et boutons radio (le reset Miniport les avait rendus invisibles) */
.order-form input[type="radio"],
.order-form input[type="checkbox"] {
    -webkit-appearance: auto;
    appearance: auto;
    flex-shrink: 0;
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.35em;
    accent-color: var(--c-accent);
}

.order-error {
    margin: 0 0 1em;
    color: #b3261e;
    font-weight: 600;
    text-align: center;
}

.order-note {
    margin: 1em 0 0;
    font-size: 0.9em;
    font-style: italic;
    text-align: center;
}

/* CGV : texte compact */
.cgv h3 { margin: 1.2em 0 0.3em; font-size: 1.1em; }
.cgv p  { margin-bottom: 0.8em; font-size: 0.95em; line-height: 1.6; }


/* =====================================================================
   11. RESPONSIVE
   ===================================================================== */

/* ---------- ≤ 1280px : grand écran portable ---------- */

@media screen and (max-width: 1280px) {

    body, input, textarea, select { font-size: 11pt; }

    header { margin: 0 0 4em 0; }

    .container { width: 960px; }
    .container.medium { width: 720px; }

    .wrapper { padding: 5em 0; }

    .row > .col-1-large{width:8.33333%} .row > .col-2-large{width:16.66667%} .row > .col-3-large{width:25%} .row > .col-4-large{width:33.33333%} .row > .col-5-large{width:41.66667%} .row > .col-6-large{width:50%} .row > .col-7-large{width:58.33333%} .row > .col-8-large{width:66.66667%} .row > .col-9-large{width:75%} .row > .col-10-large{width:83.33333%} .row > .col-11-large{width:91.66667%} .row > .col-12-large{width:100%}

    /* Menu complet sur une ligne : on resserre les liens */
    .nav-menu { gap: 0; }
    .nav-menu a { padding: 0 0.9em; }
}


/* ---------- ≤ 980px : tablette → menu burger ---------- */

@media screen and (max-width: 980px) {

    .container { width: 100%; }
    .container.medium { width: 75%; }

    .row > .col-1-medium{width:8.33333%} .row > .col-2-medium{width:16.66667%} .row > .col-3-medium{width:25%} .row > .col-4-medium{width:33.33333%} .row > .col-5-medium{width:41.66667%} .row > .col-6-medium{width:50%} .row > .col-7-medium{width:58.33333%} .row > .col-8-medium{width:66.66667%} .row > .col-9-medium{width:75%} .row > .col-10-medium{width:83.33333%} .row > .col-11-medium{width:91.66667%} .row > .col-12-medium{width:100%}

    /* ----- Navigation mobile (UNE seule version) ----- */

    #nav-all {
        justify-content: space-between;
        padding: 0 16px;
    }

    .nav-brand,
    .nav-toggle { display: block; }

    .nav-menu {
        display: none;
        position: absolute;
        top: var(--nav-h);
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        max-height: calc(100vh - var(--nav-h));
        max-height: calc(100dvh - var(--nav-h));
        overflow-y: auto;
        background: var(--c-nav);
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    }

    #nav-all.is-open .nav-menu { display: flex; }

    .nav-menu li { border-top: 1px solid rgba(255, 255, 255, 0.12); }

    .nav-menu a {
        height: auto;
        padding: 14px 20px;
        font-size: 16px;
    }
}


/* ---------- ≤ 736px : smartphone ---------- */

@media screen and (max-width: 736px) {

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

    body, input, textarea, select {
        font-size: 10pt;
        line-height: 1.75em;
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: 1.25em;
        margin: 0 0 0.4em 0;
    }
    h1 { font-size: 2.25em; line-height: 1.25em; }

    header { margin: 0 0 2em 0; }
    footer { padding: 20px 0; }
    hr { margin: 1.5em 0 2em 0; }

    section, article { clear: both; }

    .container,
    .container.medium {
        width: 100%;
        max-width: calc(100% - 30px);
    }

    .row {
        margin-top: -15px;
        margin-left: -15px;
    }
    .row > * { padding: 15px 0 0 15px; }

    .row > .col-1-small{width:8.33333%} .row > .col-2-small{width:16.66667%} .row > .col-3-small{width:25%} .row > .col-4-small{width:33.33333%} .row > .col-5-small{width:41.66667%} .row > .col-6-small{width:50%} .row > .col-7-small{width:58.33333%} .row > .col-8-small{width:66.66667%} .row > .col-9-small{width:75%} .row > .col-10-small{width:83.33333%} .row > .col-11-small{width:91.66667%} .row > .col-12-small{width:100%}

    .wrapper { padding: 3em 0; }

    /* Boutons pleine largeur */
    .button,
    input[type="submit"] {
        width: 100%;
        font-size: 1.2em;
    }

    /* Box */
    .box {
        max-width: 32em;
        margin: 0 auto 20px;
        padding: 30px 20px;
    }
    .box.style1 { min-height: 0; }
    #demarche footer header { margin-bottom: 2em; }

    /* Accueil */
    #home h1 { font-size: 1.4em; line-height: 1.15; margin-bottom: 0.7em; }
    .cta-row { width: 100%; }
    .h1-services { text-align: center; }
    .map-container { margin-top: 30px; }
    .map-container iframe { height: 220px; }
    .justifier, .zone-text { text-align: left; }

    ul.social { padding: 1em 0.5em 0; }
    ul.social li { margin: 0.5em; }

    #copyright li {
        display: block;
        margin: 1em 0 0 0;
        padding: 0;
        border-left: 0;
    }
    #copyright li:first-child { margin-top: 0; }

    /* Tableaux de tarifs */
    .tarifs-table {
        font-size: 13px;
        table-layout: fixed;
    }
    .tarifs-table th,
    .tarifs-table td { padding: 8px 5px; }
    .tarifs-table th:last-child,
    .tarifs-table td:last-child {
        width: 34%;
        white-space: normal;
    }

    /* Pop-ups */
    .modal { padding: 12px; }
    .modal-content {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
    .modal-body { padding: 44px 18px 20px; }

    .images-row { flex-direction: column; }
    .images-row img { width: 100%; }

    /* FAQ */
    .accordion { padding: 0 10px; }
    .accordion-title {
        padding: 14px 8px;
        font-size: 15px;
        line-height: 1.35;
    }
    .accordion-content {
        padding: 12px 8px;
        font-size: 14px;
    }

    /* Entretien : fiches conseils */
    .page-title { font-size: 1.5em; }
    .advice-grid { grid-template-columns: 1fr; gap: 12px; }
    .advice-card { padding: 1em; }
    .advice-group { font-size: 1.15em; }
    .advice-product { flex-direction: column; align-items: stretch; text-align: left; }
    .advice-product .button { width: 100%; }

    /* Entretien : produits et commande */
    .shop-steps { flex-direction: column; gap: 12px; }
    .shop-steps li { padding: 1em 1em 1em 3.4em; text-align: left; }
    .shop-steps li:before { top: 50%; left: 1em; transform: translateY(-50%); }
    .product-grid { grid-template-columns: 1fr; gap: 16px; max-width: 420px; }
    .product { padding: 16px; }
    .product-image { height: 160px; }
    .qty-btn { width: 36px; height: 36px; }
    .order-summary { padding: 1em; }

    /* Actualités */
    .news-top { margin-top: 2em; }
    .news-title { font-size: 1.5em; }
    .news-intro {
        font-size: 16px;
        line-height: 1.5;
    }
    .news-cta { margin: 3em 0 2em; padding: 1.5em 0; }

    .news-section { padding: 0 5px; }

    .news-header {
        display: block;
        margin: 2.5em 0 15px;
        text-align: center;
    }
    .news-header h2 {
        margin: 0 0 15px;
        font-size: 19px;
        line-height: 1.35;
    }
    .news-header .button {
        display: inline-block;
        width: auto;
        margin: 0;
        padding: 10px 28px;
        font-size: 13px;
    }

    .news-buttons {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }
    .news-buttons .button { padding: 10px 14px; }

    .news-section p {
        font-size: 15px;
        line-height: 1.55;
        text-align: left;
    }
    .news-section li {
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 6px;
        text-align: left;
    }
}


/* ---------- ≤ 480px : petit smartphone ---------- */

@media screen and (max-width: 480px) {

    .tarifs-table { font-size: 12px; }
    .tarifs-table th,
    .tarifs-table td { padding: 7px 4px; }

    .modal-body { padding: 44px 15px 18px; }

    .map-container iframe { height: 200px; }
}


/* ---------- Accessibilité : animations réduites ---------- */

@media (prefers-reduced-motion: reduce) {
    .modal-content { animation: none; }
    .nav-toggle span { transition: none; }
}