/* ============================================================
cascadeur.css — Feuille de style personnelle
Site : Le Jardin Des Tanneurs

ORGANISATION DU FICHIER :
1. Polices de caractères (déjà présentes)
2. Base du body et éléments généraux (déjà présents)
3. Administration SPIP (déjà présente)
4. En-tête (header)
5. Navigation principale
6. Blocs de contenu (rubriques 1 à 10)
7. Blocs photos pleine largeur
8. Pied de page (footer)
9. Responsive — adaptation smartphone
============================================================ */


/* ============================================================
1. POLICES DE CARACTÈRES
GothamL pour les textes, Oswald pour les titres
Les fichiers de polices sont dans css/fonts/
============================================================ */

@font-face {
font-family: 'GothamL';
src: url('fonts/gotham-light-webfont.eot');
src: url('fonts/gotham-light-webfont.eot?#iefix') format('embedded-opentype'),
 url('fonts/gotham-light-webfont.woff2') format('woff2'),
 url('fonts/gotham-light-webfont.woff') format('woff'),
 url('fonts/gotham-light-webfont.ttf') format('truetype'),
 url('fonts/gotham-light-webfont.svg#gothamlight') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Oswald';
src: url('fonts/oswald-regular-webfont.eot');
src: local('x'),
 url('fonts/oswald-regular-webfont.eot?#iefix') format('embedded-opentype'),
 url('fonts/oswald-regular-webfont.woff') format('woff'),
 url('fonts/oswald-regular-webfont.ttf') format('truetype'),
 url('fonts/oswald-regular-webfont.svg#oswaldbook') format('svg');
font-weight: normal;
font-style: normal;
}


/* ============================================================
2. BASE — BODY ET ÉLÉMENTS GÉNÉRAUX
============================================================ */

input[type="search"] {
-webkit-appearance: none;
}

body {
text-align: center;
background-color: #ffffff;
line-height: 20px;
color: #454545;
font-weight: normal;
overflow-x: hidden;
font: normal 14px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}

:focus {
outline: 0;
}

/* Couleur de sélection de texte (jaune doré du template) */
::selection {
background-color: #ecb31e;
color: #ffffff;
}
::-moz-selection {
background-color: #ecb31e;
color: #ffffff;
}

/* Suppression des marges et bordures par défaut sur tous les éléments */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}

/* Liens : jamais de bleu au survol, couleur héritée par défaut */
a {
color: inherit;
text-decoration: none;
}
a:hover,
a:focus,
a:visited {
color: inherit;
text-decoration: none;
}

/* Gras dans les textes SPIP */
strong, b {
font-weight: bold;
}

/* Images fluides par défaut */
img {
max-width: 100%;
height: auto;
display: block;
}

/* Listes : suppression des puces par défaut dans les blocs SPIP */
.texte-rubrique ul,
.texte-article ul,
.post-scriptum ul {
list-style: disc;
padding-left: 20px;
}
.texte-rubrique li,
.texte-article li,
.post-scriptum li {
margin-bottom: 6px;
}


/* ============================================================
3. ADMINISTRATION SPIP
Barre d'administration flottante en haut à droite
============================================================ */

.footer { clear: both; }

#spip-admin {
z-index: 10000000;
font: 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
position: fixed;
right: 0;
}

.spip-admin-float {
float: none;
}

#ecrire, #var_mode, #voir_article, #voir_rubrique, #statistiques {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
background-color: #fff;
border: 1px solid #000000;
color: #000000;
opacity: 1;
}

#ecrire:hover, #var_mode:hover, #voir_article:hover, #voir_rubrique:hover, #statistiques:hover {
background-color: #000000;
border: 1px solid #000000;
color: #fff;
}

.spip-admin-boutons {
background-color: #fff;
border: 1px solid #000000;
color: #000000;
font: 10px 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
margin: 0;
}


/* ============================================================
4. EN-TÊTE (header)

Le header est en position fixe en haut de page.
Il existe en deux états :
- "large" : logo grand centré, affiché au sommet de la page
- "small" : logo réduit, affiché à gauche quand on scrolle

La transition est gérée par jQuery dans head.html
============================================================ */

.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background-color: #ffffff;

/* Transition fluide entre état large et small */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

/* Contenu intérieur centré du header */
.header-interieur {
width: 90%;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;

/* Transition sur le conteneur intérieur aussi */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

padding: 16px 0;
}

/* Logo du site */
.logo-site,
.logo-site--lien {
display: flex;
align-items: center;
justify-content: center;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

font-weight: normal; /* Pas de gras sur le h1 */
}

/* Image à l'intérieur du logo */
.logo-site img,
.logo-site--lien img {
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
height: 300px; /* Taille normale (état large) */
width: auto;
flex-shrink: 0; /* empêche flexbox de comprimer le logo sur les petits écrans */
}

/* Nom du site (texte à côté du logo image) */
.nom-site {
display: none; /* Masqué par défaut, le logo image suffit */
}


/* --- État LARGE : header au sommet de la page --- */
/* Appliqué par défaut (pas de classe JS) et via jQuery au sommet */
/* La classe .large est ajoutée/retirée par jQuery, mais le header commence sans classe */

/* --- État SMALL : header en scrollant --- */
/* jQuery ajoute la classe .small sur <header> quand on scrolle de plus de 100px */

.header.small {
}

/* En état small : le header-interieur bascule à gauche */
.header.small .header-interieur {
justify-content: flex-start;
padding: 8px 0;
}

/* En état small : le logo image se réduit de moitié */
.header.small .logo-site img,
.header.small .logo-site--lien img {
max-height: 150px; /* Moitié de 96px — valeur pour écran large, voir media queries pour le mode smartphone */
}

/* Bouton mail — icône enveloppe en CSS pur */
/* Positionné à droite du logo dans la barre de navigation */
.bouton-mail {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;

/* Pas de bleu au survol, transition de grossissement */
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;

background: #f5f5f5 url('img/mail.jpg') no-repeat center center;
background-size: contain;
color: #454545;
width: 60px;
height: 44px;
}

/* Grossissement léger au survol pour indiquer que c'est un lien */
.bouton-mail:hover {
transform: translateY(-50%) scale(1.2);
color: #ecb31e; /* Couleur dorée du site */
}

/* Espace en haut de page pour compenser le header fixe */
/* (valeur ajustée selon la hauteur réelle du header) */
.page {
padding-top: 350px; /* À ajuster selon la hauteur réelle de votre logo */
}


/* ============================================================
5. NAVIGATION PRINCIPALE
Barre de liens vers les rubriques, sous le header fixe
============================================================ */

/************* MENU MENU MENU *************/

.navigation {
background-color: #333333;
width: 100%;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.navigation-interieur {
width: 90%;
max-width: 1200px;
margin: 0 auto;
}

.navigation-liste {
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding: 0;
margin: 0;
}

.navigation-item a {
display: block;
padding: 14px 18px;
color: #ffffff;
font-family: 'Oswald', Arial, sans-serif;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.navigation-item a:hover,
.navigation-item.on a {
color: #ecb31e; /* Doré au survol, pas de bleu */
}

/************* FIN MENU MENU MENU *************/


/* ============================================================
6. BLOCS DE CONTENU — STRUCTURE GÉNÉRALE

Chaque rubrique est une <section> avec :
- une bande pleine largeur (.bloc-rubrique)
- un conteneur intérieur centré (.bloc-interieur = 90% / max 1200px)
============================================================ */

#photo-salle {
background: #f5f5f5 url('img/salle.jpg') no-repeat left top;
width: 70%;
height: auto;
padding-bottom: 40%;
display: block;
background-size: cover;
background-position: center;
margin: 0 auto 50px auto;
background-color: #cccccc;
border: none;
-moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-top-left-radius: 15px 15px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-webkit-border-bottom-left-radius: 15px 15px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
behavior: url(/css/PIE.htc);
/*
position:relative;
hack pour IE < 9 pour PIE, à utiliser si l'élément n'apparait pas
*/
}


/* Bande pleine largeur (prend 100% de la fenêtre) */
.bloc-rubrique {
width: 100%;
padding: 0;
overflow: hidden;
}

/* Conteneur centré du contenu (texte ne déborde pas) */
.bloc-interieur {
width: 90%;
max-width: 1000px;
margin: 0 auto;
padding: 60px 0;
}

/* Fond image (pour les blocs avec background-X.png) */
/* L'image de fond est définie en inline style dans le HTML */
.bloc-fond-image {
background-size: cover;
background-position: bottom center;
background-repeat: no-repeat;
width: 100%;
}

/* --- Titres de rubriques (police Oswald) --- */
.titre-rubrique {
font-family: 'Oswald', Arial, sans-serif;
font-size: 40px;
line-height: 42px;
font-weight: normal;
margin-bottom: 20px;
color: inherit;
}

/* Titre centré (pour les rubriques à layout centré) */
.titre-rubrique-centre {
font-family: 'Oswald', Arial, sans-serif;
font-size: 42px;
line-height: 50px;
font-weight: normal;
text-align: center;
margin-bottom: 60px;
color: inherit;
}

/* Titre XXL pour la rubrique 10 "Réserver ou demander un devis" */
.titre-rubrique-xxl {
font-family: 'Oswald', Arial, sans-serif;
font-size: 54px;
line-height: 62px;
font-weight: normal;
text-align: center;
margin-bottom: 20px;
color: #333333;
}

/* --- Textes (police GothamL) --- */
.texte-rubrique,
.texte-article,
.post-scriptum {
font-family: 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
line-height: 22px;
color: inherit;
text-align: left;
}

.texte-rubrique strong,
.texte-article strong,
.post-scriptum strong{
font-family: 'Oswald', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
line-height: 22px;
color: inherit;
text-align: left;
}

.texte-rubrique-centre {
font-family: 'GothamL', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
font-size: 16px;
line-height: 22px;
text-align: left;
margin-bottom: 30px;
}

/* Texte d'article avec titre */
.titre-article {
font-family: 'Oswald', Arial, sans-serif;
font-size: 22px;
line-height: 26px;
font-weight: normal;
margin-bottom: 12px;
color: inherit;
}

/* Entête de rubrique centrée (titre + intro au centre) */
.bloc-rubrique-entete-centre {
text-align: center;
margin-bottom: 40px;
}


/* ============================================================
RUBRIQUE 1 — Fond bleu avec image background-1.png
Texte en blanc sur fond sombre
============================================================ */

.bloc-bleu {
background-color: #00a79d; /* Bleu de secours si l'image ne charge pas */
color: #ffffff;
}

/* Sur grand écran (>900px) : photo à gauche, texte à droite, côte à côte */
.bloc-bleu .bloc-interieur {
display: flex;
align-items: center;
gap: 40px; /* ← MODIFIABLE : espace entre la photo et le texte */
}

/* Colonne photo : largeur fixe à gauche sur grand écran */
.bloc-bleu #photo-salle {
flex: 0 0 40%; /* ← MODIFIABLE : largeur de la colonne photo sur grand écran */
width: 40%;
padding-bottom: 28%; /* ratio adapté à la colonne réduite, ajustable */
margin: 0;
}

/* Contenu de la rubrique 1 : colonne de texte à droite sur grand écran */
.bloc-bleu .bloc-rubrique-texte {
flex: 1;
width: auto;
}

/* Article de la rubrique 1 sous le texte principal */
.bloc-article-rubrique-1 {
margin-top: 30px;
padding-top: 20px;
}

.bloc-bleu .titre-rubrique, .bloc-rubrique-4 .titre-rubrique {
text-align: center;
}
.bloc-mauve .titre-rubrique {
text-align: right;
}
/* ============================================================
RUBRIQUE 2 — Fond orange avec image background-2.png
Deux colonnes pour l'article (texte gauche, post-scriptum droite)
============================================================ */

.bloc-orange {
background-color: #e8834a; /* Orange de secours */
color: #ffffff;
}

/* Mise en page deux colonnes (article) */
.bloc-article-deux-colonnes {
display: flex;
gap: 40px;
align-items: flex-start;
}

.bloc-article-deux-colonnes .colonne-gauche {
flex: 1;
}

.bloc-article-deux-colonnes .colonne-droite {
flex: 1;
}

/* Post-scriptum légèrement différencié */
.post-scriptum {
background-color: rgba(255,255,255,0.12);
padding: 20px;
border-radius: 2px;
}


/* ============================================================
RUBRIQUE 3 — Fond rose pâle avec image background-3.png
Seulement titre et texte de la rubrique (pas d'article)
============================================================ */

.bloc-rose {
background-color: #f5d5d0; /* Rose pâle de secours */
color: #454545;
}


/* ============================================================
RUBRIQUE 4 — Titre à droite, texte à gauche
Deux colonnes inversées : texte | titre
============================================================ */

.bloc-rubrique-4 {
background: #f9f6f0;
background: -moz-linear-gradient(-45deg,  #f9f6f0 0%, #f7ecd7 51%, #f9f6f0 51%, #f7ecd7 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f9f6f0), color-stop(51%,#f7ecd7), color-stop(51%,#f9f6f0), color-stop(100%,#f7ecd7));
background: -webkit-linear-gradient(-45deg,  #f9f6f0 0%,#f7ecd7 51%,#f9f6f0 51%,#f7ecd7 100%);
background: -o-linear-gradient(-45deg,  #f9f6f0 0%,#f7ecd7 51%,#f9f6f0 51%,#f7ecd7 100%);
background: -ms-linear-gradient(-45deg,  #f9f6f0 0%,#f7ecd7 51%,#f9f6f0 51%,#f7ecd7 100%);
background: linear-gradient(135deg,  #f9f6f0 0%,#f7ecd7 51%,#f9f6f0 51%,#f7ecd7 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f6f0', endColorstr='#f7ecd7',GradientType=1 );

color: #454545;
}

/* Disposition : texte à gauche, titre à droite */
.bloc-titre-droite-texte-gauche {
display: flex;
gap: 40px;
align-items: center;
}

.bloc-titre-droite-texte-gauche .colonne-texte-gauche {
flex: 1;
}

.bloc-titre-droite-texte-gauche .colonne-titre-droite {
flex: 1;
text-align: left;
}

/* Pour la rubrique 4 : le titre à droite est plus grand */
.bloc-titre-droite-texte-gauche .titre-rubrique {
font-size: 40px;
line-height: 48px;
}


/* ============================================================
RUBRIQUE 5 — Fond mauve, titre à gauche, texte à droite
Le texte peut contenir des passages en gras (strong)
============================================================ */

.bloc-mauve {
background-color: #c9b8d4; /* Mauve de secours */
color: #ffffff;
}

/* Disposition : titre à gauche, texte à droite */
.bloc-titre-gauche-texte-droite {
display: flex;
gap: 40px;
align-items: center;
}

.bloc-titre-gauche-texte-droite .colonne-titre-gauche {
flex: 1;
}

.bloc-titre-gauche-texte-droite .colonne-texte-droite {
flex: 1;
}

/* Gras dans le texte — stylistiquement différencié */
.bloc-mauve .texte-rubrique strong,
.bloc-mauve .texte-article strong {
font-weight: bold;
color: #ffffff;
}


/* ============================================================
RUBRIQUES 6 À 9 — Blocs supplémentaires alternés
Couleurs alternées + dispositions alternées (déjà gérées en HTML)
============================================================ */

#photo-acadiane {
background: #f5f5f5 url('img/acadiane.jpg') no-repeat left top;
width: 500px;
height: 300px;
display: block;
  background-size: cover;
  background-position: center;
  margin: 0 auto 50px auto;
background-color: #cccccc;
border: none;
-moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-top-left-radius: 15px 15px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-webkit-border-bottom-left-radius: 15px 15px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
behavior: url(/css/PIE.htc);
/*
position:relative;
hack pour IE < 9 pour PIE, à utiliser si l'élément n'apparait pas
*/
}

#photo-cave {
background: #f5f5f5 url('img/cave.jpg') no-repeat left top;
width: 500px;
height: 300px;
display: block;
  background-size: cover;
  background-position: center;
  margin: 0 auto 50px auto;
background-color: #cccccc;
border: none;
-moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-top-left-radius: 15px 15px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-webkit-border-bottom-left-radius: 15px 15px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
behavior: url(/css/PIE.htc);
/*
position:relative;
hack pour IE < 9 pour PIE, à utiliser si l'élément n'apparait pas
*/
}

#photo-degustation {
background: #f5f5f5 url('img/degustation.jpg') no-repeat left top;
width: 500px;
height: 300px;
display: block;
  background-size: cover;
  background-position: center;
  margin: 0 auto 50px auto;
background-color: #cccccc;
border: none;
-moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-top-left-radius: 15px 15px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-webkit-border-bottom-left-radius: 15px 15px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
behavior: url(/css/PIE.htc);
/*
position:relative;
hack pour IE < 9 pour PIE, à utiliser si l'élément n'apparait pas
*/
}

/* Couleur 1 : bleu clair (rubrique 6) */
.bloc-couleur-1 {
background-color: #dce9f5;
color: #2d5a8e;
}

/* Couleur 2 : orange clair (rubrique 7) */
.bloc-couleur-2 {
background-color: #faebd7;
color: #8b4513;
}

/* Couleur 3 : rose pâle (rubrique 8) */
.bloc-couleur-3 {
background-color: #f5e6e8;
color: #7a3a40;
}

/* Couleur 4 : mauve clair (rubrique 9) */
.bloc-couleur-4 {
background-color: #ede5f3;
color: #5c3a7a;
}

/* Gras dans les blocs supplémentaires */
.bloc-supplementaire .texte-rubrique strong {
font-weight: bold;
}


/* ============================================================
RUBRIQUE 10 — "Réserver ou demander un devis"
Titre XXL centré + bouton de contact noir/blanc
============================================================ */

.bloc-reserver {
background-color: #ffffff;
color: #333333;
}

/* Centrage du contenu */
.bloc-interieur-centre {
text-align: center;
}

/* Bouton "Nous contacter" — fond noir, texte blanc, grossit au survol */
.bouton-contacter {
display: inline-block;
margin-top: 30px;
padding: 16px 48px;
background-color: #333333;
color: #ffffff;
font-family: 'Oswald', Arial, sans-serif;
font-size: 16px;
letter-spacing: 2px;
text-transform: uppercase;
cursor: pointer;

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

/* Grossissement au survol (pas de bleu) */
.bouton-contacter:hover {
background-color: #000000;
color: #ffffff;
transform: scale(1.06);
}

#photo-devis {
background: #f5f5f5 url('img/devis.jpg') no-repeat left top;
display: block;
width: 350px;
height: 350px;
background-size: cover;
background-position: center;
margin: 0 auto 50px auto;
background-color: #cccccc;
border: none;
-moz-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
-webkit-border-top-left-radius: 15px 15px;
-webkit-border-top-right-radius: 15px 15px;
-webkit-border-bottom-right-radius: 15px 15px;
-webkit-border-bottom-left-radius: 15px 15px;
border-radius: 15px 15px 15px 15px / 15px 15px 15px 15px;
behavior: url(/css/PIE.htc);
/*
position:relative;
hack pour IE < 9 pour PIE, à utiliser si l'élément n'apparait pas
*/
}


/* ============================================================
7. BLOCS PHOTOS PLEINE LARGEUR

Bandes d'image entre les rubriques.
L'image s'adapte en largeur et prend toute la place disponible.
La hauteur est fixe, l'image est centrée et recadrée.
============================================================ */

.bloc-photo {
width: 100%;
height: 360px; /* Hauteur du bandeau photo */
overflow: hidden;
background-color: #cccccc; /* Couleur de remplacement si l'image ne charge pas */

-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

/* L'image à l'intérieur du bloc photo prend toute la largeur */
.bloc-photo img {
width: 100%;
height: 100%;
object-fit: cover;       /* Recadrage centré, image jamais déformée */
object-position: center center;
display: block;
}


/* ============================================================
8. PIED DE PAGE (footer)

Fond anthracite pleine largeur.
Contient : nom du site, téléphone, email, mentions légales.
============================================================ */

/* Bande pleine largeur anthracite */
.pied-de-page {
background-color: #2a2a2a; /* Anthracite */
color: #cccccc;
width: 100%;
}

.pied-de-page-bande {
width: 100%;
}

/* Contenu centré du pied de page */
.pied-de-page-interieur {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 50px 0 30px;
text-align: center;
}

/* Nom du site en grand */
.pied-nom-site {
font-family: 'Oswald', Arial, sans-serif;
font-size: 28px;
color: #ffffff;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 24px;
}

/* Bloc coordonnées */
.pied-coordonnees {
margin-bottom: 24px;
}

.pied-telephone,
.pied-email {
font-size: 14px;
line-height: 26px;
color: #aaaaaa;
}

.pied-label {
color: #ffffff;
font-weight: bold;
margin-right: 6px;
}

/* Liens dans le pied de page — jamais de bleu */
.pied-de-page a {
color: #aaaaaa;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}

.pied-de-page a:hover {
color: #ecb31e; /* Doré au survol */
}

/* Mentions légales SPIP (plan du site, connexion...) */
.pied-mentions {
font-size: 11px;
color: #666666;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #3d3d3d;
line-height: 20px;
}

.pied-mentions a {
color: #666666;
}

.pied-mentions a:hover {
color: #ecb31e;
}


/* ============================================================
9. RESPONSIVE — ADAPTATION SMARTPHONE

Points de rupture :
- Tablette : max-width 900px
- Smartphone : max-width 600px

Tous les blocs doivent s'adapter :
- Pas de texte trop petit, pas de texte trop grand
- Les colonnes passent en colonne unique
- Le header adapte sa taille
============================================================ */

/* --- MODE SMARTPHONE (jusqu'à 900px de large) --- */
@media screen and (max-width: 900px) {

/* En-tête : un peu plus compact */
.page {
padding-top: 150px; /* ← MODIFIABLE : à réajuster si vous changez la taille du logo ci-dessous */
}

.header-interieur {
padding: 12px 0;
}

/* Logo en mode smartphone */
.logo-site img,
.logo-site--lien img {
max-height: 110px; /* ← MODIFIABLE : taille du logo en mode smartphone (<900px) */
}

/* Logo réduit (état "small", quand on scrolle) en mode smartphone */
.header.small .logo-site img,
.header.small .logo-site--lien img {
max-height: 70px; /* ← MODIFIABLE : taille du logo réduit en mode smartphone */
}

/* Bouton mail en mode smartphone */
.bouton-mail {
width: 48px; /* ← MODIFIABLE : taille du bouton mail en mode smartphone (<900px) */
height: 48px;
}

/* Rubrique 1 : sur smartphone, on repasse en colonne (photo au-dessus du texte, comme avant) */
.bloc-bleu .bloc-interieur {
display: block;
}

.bloc-bleu #photo-salle {
width: 100%;
padding-bottom: 50%;
margin: 0 auto 50px auto;
}

.bloc-bleu .bloc-rubrique-texte {
width: 100%;
}

/* Titres un peu plus petits */
.titre-rubrique {
font-size: 28px;
line-height: 36px;
}

.titre-rubrique-centre {
font-size: 32px;
line-height: 40px;
}

.titre-rubrique-xxl {
font-size: 40px;
line-height: 50px;
}

/* Hauteur des blocs photos réduite */
.bloc-photo {
height: 260px;
}

/* Rubriques 4 et 7 : colonnes en colonne unique, titre (et photo pour la 7) au-dessus du texte */
.bloc-rubrique-4 .bloc-titre-droite-texte-gauche,
.bloc-couleur-2 .bloc-titre-droite-texte-gauche {
flex-direction: column;
gap: 20px; /* ← MODIFIABLE */
}

.bloc-rubrique-4 .colonne-titre-droite,
.bloc-couleur-2 .colonne-titre-droite {
order: -1; /* fait passer le titre (+ photo pour la rubrique 7) au-dessus du texte */
text-align: left;
}

/* Rubrique 4 uniquement : le bloc prend 80% de la largeur en mode smartphone */
.bloc-rubrique-4 .bloc-interieur {
width: 90%; /* ← MODIFIABLE */
}

/* Rubriques 6 et 8 : titre + photo déjà au-dessus du texte par défaut, on empile juste et on passe à 80% de largeur */
.bloc-couleur-1 .bloc-titre-gauche-texte-droite,
.bloc-couleur-3 .bloc-titre-gauche-texte-droite {
flex-direction: column;
gap: 20px; /* ← MODIFIABLE */
}

.bloc-couleur-1 .bloc-interieur,
.bloc-couleur-3 .bloc-interieur {
width: 90%; /* ← MODIFIABLE */
}

}

/* --- RUBRIQUE 5 : bascule spécifique en dessous de 700px --- */
@media screen and (max-width: 700px) {

/* Titre déjà au-dessus du texte par défaut (ordre HTML), on empile juste */
.bloc-mauve .bloc-titre-gauche-texte-droite {
flex-direction: column;
gap: 20px; /* ← MODIFIABLE */
}

.bloc-mauve .bloc-interieur {
width: 90%; /* ← MODIFIABLE */
}

}

/* --- RUBRIQUE 9 : bascule spécifique en dessous de 700px --- */
@media screen and (max-width: 700px) {

.bloc-couleur-4 .bloc-titre-droite-texte-gauche {
flex-direction: column;
gap: 20px; /* ← MODIFIABLE */
}

/* Le titre passe au-dessus du texte (ordre HTML inversé par rapport à la rubrique 5) */
.bloc-couleur-4 .colonne-titre-droite {
order: -1;
text-align: left;
}

.bloc-couleur-4 .bloc-interieur {
width: 90%; /* ← MODIFIABLE */
}

}

/* --- SMARTPHONE (jusqu'à 600px de large) --- */
@media screen and (max-width: 600px) {

/* En-tête compact, logo small par défaut */
.page {
padding-top: 110px; /* ← MODIFIABLE : à réajuster si vous changez la taille du logo ci-dessous */
}

.header-interieur {
padding: 8px 0;
justify-content: flex-start;
}

.logo-site img,
.logo-site--lien img {
max-height: 80px; /* ← MODIFIABLE : taille du logo sur très petit écran (<600px) */
}

/* Logo réduit (état "small", quand on scrolle) sur très petit écran */
.header.small .logo-site img,
.header.small .logo-site--lien img {
max-height: 50px; /* ← MODIFIABLE */
}

/* Bouton mail légèrement décalé */
.bouton-mail {
width: 40px; /* ← MODIFIABLE : taille du bouton mail sur très petit écran (<600px) */
height: 40px;
}

/* Navigation : liens plus petits, centrés */
.navigation-item a {
padding: 10px 10px;
font-size: 11px;
letter-spacing: 0.5px;
}

/* Blocs : padding réduit */
.bloc-interieur {
padding: 36px 0;
}

/* Titres adaptés smartphone */
.titre-rubrique {
font-size: 22px;
line-height: 30px;
}

.titre-rubrique-centre {
font-size: 26px;
line-height: 34px;
}

.titre-rubrique-xxl {
font-size: 30px;
line-height: 38px;
}

/* Textes lisibles sur petit écran */
.texte-rubrique,
.texte-article,
.post-scriptum {
font-size: 13px;
line-height: 20px;
}

/* Rubrique 1 : pleine largeur */
.bloc-bleu .bloc-rubrique-texte {
width: 100%;
}

/* Colonnes : toutes en colonne unique sur smartphone */
.bloc-article-deux-colonnes,
.bloc-titre-droite-texte-gauche,
.bloc-titre-gauche-texte-droite {
flex-direction: column;
gap: 24px;
}

/* Titres colonnes : alignés à gauche sur smartphone */
.bloc-titre-droite-texte-gauche .colonne-titre-droite,
.bloc-titre-gauche-texte-droite .colonne-titre-gauche {
text-align: left;
}

/* Photos : moins hautes sur smartphone */
.bloc-photo {
height: 180px;
}

/* Bouton contacter adapté */
.bouton-contacter {
padding: 14px 30px;
font-size: 14px;
}

/* Pied de page */
.pied-nom-site {
font-size: 20px;
}

.pied-telephone,
.pied-email {
font-size: 13px;
}

}









/************* GALERIE PHOTOS **********/
/************* GALERIE PHOTOS **********/
/************* GALERIE PHOTOS **********/

#nos-references {
clear: both;
position: relative;
display: block;
width: 100%;
padding: 90px 0 60px 0;
background-color: #ffffff;
}

#nos-references #cadre-references {
width: 90%;
position: relative;
max-width: 1120px;
margin: auto;
}

#nos-references h3 {
color: #000000;
font-family: 'Oswald', Arial, sans-serif;
font-size: 50px;
margin-bottom: 0;
text-align: center;
}

#nos-references #cadre-references #galerie {
position: relative;
display: block;
text-align: center;
margin-top: 30px;
}

#nos-references #cadre-references #galerie span{
position: relative;
display: inline-block;
background-color: #000000;
color: #ffffff;
}

#clear {
clear: both;
width: 100%;
}

#nos-references span {
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;

position: relative;
width: 150px;
height: 150px;
vertical-align: top;
margin: 0 15px 30px 15px;
}

@media screen and (max-width: 580px) {
#nos-references span {
width: 150px;
height: 150px;
overflow: hidden;
}
}

#nos-references .spip_logo, #nos-references .spip_logos {
position: relative;
float: none;
display: block;
}

#nos-references #cadre-references #galerie span span.vignette{
-webkit-transition:all .2s ease-in-out;
-moz-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;

z-index: 1;
position: absolute;
display: inline-block;
width: 100%;
height: 20px;
overflow: hidden;
top: 45%;
left: -15px;
font-family: 'Oswald', Arial, sans-serif;
font-size: 15px;
letter-spacing: 0.5px;
text-transform: uppercase;
background-color: transparent;
}

#nos-references #cadre-references #galerie span:hover span.vignette{
font-size: 40px;
transform:rotate(180deg)
translate(-40px)
rotate(180deg);
opacity: 0;
top: 0;
}

#cadre-references span img{
opacity: 0.7;
}

#cadre-references span img:hover{
opacity: 1;
}

div.pswp__caption__center {
position: relative;
bottom: 100px;
font: normal 19px 'LibelSuite', "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}