/* =========================
RESET
========================= */

body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#e6e6e6;
}

/* =========================
FOND GLOBAL
========================= */

body{
background:
linear-gradient(rgba(0,0,0,0.45),rgba(0,0,0,0.45)),
url("images/scene-flora-1.png") center/cover no-repeat fixed;
}

/* =========================
HEADER
========================= */

.header-center{
text-align:center;
padding-top:80px;
}

/* LOGO */

.logo{
font-size:3em;
letter-spacing:5px;

color:white;

text-shadow:
0 0 10px rgba(255,255,255,0.25),
0 2px 6px rgba(0,0,0,0.6),
0 0 30px rgba(255,255,255,0.15);
}

.logo a{
text-decoration:none;
color:white;

text-shadow:
0 0 20px rgba(255,255,255,0.6),
0 0 40px rgba(255,255,255,0.3),
0 2px 6px rgba(0,0,0,0.7);
}


/* =========================
MENU
========================= */

nav ul{
list-style:none;
padding:0;
margin-top:15px;
}

nav ul li{
display:inline-block;
margin:0 20px;
}

nav ul li a{
text-decoration:none;
color:#dcdcdc;
font-size:0.95em;
padding-bottom:4px;
border-bottom:1px solid transparent;
transition:0.3s;
}

nav ul li a:hover{
color:white;
border-bottom:1px solid white;
}

/* =========================
PAGE ACCUEIL
========================= */

.intro{
text-align:center;
padding-top:120px;
margin-bottom:60px;
font-style:italic;
font-size:1.15em;
}

.signature{
font-size:1.3em;
letter-spacing:2px;
font-style:italic;
opacity:0.9;
}

/* BLOCS VIDEO */

.spectacles{
display:flex;
justify-content:center;
gap:250px;
flex-wrap:wrap;
}


/* BLOCS */

.bloc{
width:600px;
text-align:left;
}
.bloc p{
line-height:1.3;
}

/* =========================
VIDEOS
========================= */

.video-thumb{
position:relative;
text-align:center;
}

.video-thumb img{
width:85%;
height:200px;
object-fit:cover;
border-radius:6px;
margin:auto;
display:block;
border:1px solid rgba(230,230,230,0.6);
}

.video-thumb a::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,0);
transition:0.3s;
border-radius:6px;
}

.video-thumb a:hover::after{
background:rgba(0,0,0,0.35);
}

.play-icon{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0.8);
font-size:40px;
color:white;
opacity:0;
transition:0.3s;
}

.video-thumb a:hover .play-icon{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}

.video-thumb img{
transition:0.4s;
}

.video-thumb img:hover{
transform:scale(1.04);
}

/* =========================
PRESENTATION
========================= */

.presentation{
max-width:700px;
margin:120px auto 60px auto;
text-align:center;
line-height:1.6;
font-size:0.95em;
font-style:italic;
}

/* =========================
STRUCTURE DES PAGES
========================= */

.page{
max-width:1100px;
margin:160px auto;
}

/* BLOC CONTENU UNIQUE */

.page-content{

color:white;

padding:60px;

border:1px solid rgba(255,255,255,0.6);
border-radius:6px;

background:rgba(0,0,0,0.35);

line-height:1.7;
font-size:1.05em;

}

/* TITRES */

.page-content h1{
text-align:center;
letter-spacing:3px;
margin-bottom:25px;
}

/* SIGNATURE */

.page-content .signature{
text-align:center;
color:#dddddd;
margin-bottom:40px;
}

/* PARAGRAPHES */

.page-content p{
margin-bottom:20px;
}

/* =========================
FORMULAIRE CONTACT
========================= */

.contact-intro{
text-align:center;
margin-bottom:40px;
color:#e6e6e6;
}

.contact-form{
max-width:500px;
margin:0 auto;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{

padding:10px;
font-size:1em;

border:1px solid rgba(255,255,255,0.5);
border-radius:4px;

background:rgba(255,255,255,0.9);

font-family:Arial, Helvetica, sans-serif;
}

.contact-form button{

margin-top:10px;
padding:12px;

background:#333;
color:white;

border:none;
border-radius:4px;

cursor:pointer;
font-size:1em;
}

.contact-form button:hover{
background:#555;
}


/* =========================
FOOTER
========================= */

footer{
text-align:center;
margin:80px 0 40px 0;
font-size:0.9em;
opacity:0.8;
}

footer p{
text-align:center;
margin:0;
}


/* =========================
LIENS
========================= */


.page-content a{
color:#f0f0f0;
}

a:hover{
color:white;
text-decoration:underline;
}


/* =========================
PAGE TÉMOIGNAGE
========================= */

.temoignage{
margin-bottom:45px;
font-size:1.1em;
}

.auteur{
display:block;
margin-top:6px;
margin-left:40px;
font-style:italic;
opacity:0.9;
}

.lien-livreor{
text-align:center;
margin-top:40px;
}


/* =========================
PAGE PRESSE — VERSION LIBRE PRO
========================= */

.presse-grid{
position:relative;
width:100%;
height:1100px; /* légèrement augmenté pour sécurité */
margin-top:40px;
}

/* PAVÉS PRESSE */

.article{
position:absolute;

padding:14px;

backface-visibility:hidden;

background:linear-gradient(#f3f3f3,#e4e4e4);
color:#111;

border:1px solid #b5b5b5;

font-size:0.95em;
line-height:1.35;

box-shadow:0 6px 14px rgba(0,0,0,0.45);

text-align:justify;

transition:transform 0.25s ease, box-shadow 0.25s ease;
}

/* TITRES */

.article strong{
display:block;
font-size:1.15em;
margin-bottom:6px;
letter-spacing:0.5px;
}

/* JOURNAL */

.journal{
display:block;
margin-top:10px;
font-style:italic;
font-size:0.9em;
color:#000;
text-align:right;
opacity:0.85;
}

/* HOVER */

.article:hover{
transform:translateY(-5px);
box-shadow:0 12px 22px rgba(0,0,0,0.55);
}

/* =========================
COMPOSITION MAGAZINE
========================= */

/* BLOC PRINCIPAL */

.a1{
width:480px;
top:0;
left:0;
z-index:2;
}

/* HAUT DROITE */

.a2{
width:300px;
top:20px;
left:650px;
}

/* ARTICLE IMPORTANT (OUEST-FRANCE) */

.a12{
width:390px;      
top:390px;
left:560px;         /* recentré dans la composition */
z-index:4;          /* mis en avant */
}

/* ZONE CENTRALE */

.a3{
width:300px;
top:180px;
left:505px;
z-index:3;
}

.a10{
width:340px;
top:580px;          /* légèrement descendu */
left:370px;
z-index:2;
}

/* GAUCHE */

.a4{
width:290px;
top:500px;
left:20px;
}

.a7{
width:235px;
top:670px;
left:0;             /* corrigé (plus de débord) */
z-index:2;
}

/* DROITE */

.a5{
width:150px;
top:520px;
left:820px;
}

/* BAS */

.a6{
width:320px;
top:740px;
left:660px;
z-index:1;
}

.a8{
width:340px;
top:780px;
left:250px;
z-index:1;
}

.a9{
width:340px;
top:940px;
left:50px;
}

.a11{
width:380px;
top:930px;
left:480px;
}

/* =========================
LIEN BAS
========================= */

.lien-presse{
text-align:center;
margin-top:50px;
font-weight:bold;
}


/* =========================
ARCHIVES PRESSE (CORRIGÉ)
========================= */

.archives-presse{
max-width:800px;
margin:40px auto;
}

/* CHAQUE ARTICLE */

.archive-item{
margin-bottom:28px;
padding:18px;

background:linear-gradient(#f3f3f3,#e4e4e4);
color:#111;

border:1px solid #b5b5b5;

box-shadow:0 4px 10px rgba(0,0,0,0.35);
}

/* TEXTE PRINCIPAL */

.archive-item p{
margin:0;
line-height:1.5;
color:#111;
}

/* JOURNAL */

.archive-item .journal{
display:block;
margin-top:10px;
text-align:right;

font-style:italic;
font-size:0.9em;

color:#333;
}


/* =========================
LIVRE D'OR
========================= */

.livre-or{
max-width:800px;
margin:40px auto;
}

.temoignage-item{
margin-bottom:35px;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,0.2);
}

.temoignage-item p{
margin:0;
font-size:1.05em;
line-height:1.6;
font-style:italic;
color:#eeeeee;
}

.temoignage-item .auteur{
display:block;
margin-top:8px;
text-align:left;
font-size:0.95em;
opacity:0.85;
}


/* =========================
RESPONSIVE MOBILE
========================= */

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

    /* HEADER */
    .header-center {
        padding-top:40px;
    }

    .logo {
        font-size:2em;
        letter-spacing:2px;
    }

    /* MENU */
    nav ul li {
        display:block;
        margin:10px 0;
    }

    /* INTRO */
    .intro {
        padding-top:60px;
        font-size:1em;
    }

    .signature {
        font-size:1.1em;
        letter-spacing:1px;
    }

    /* BLOCS SPECTACLES */
    .spectacles {
        flex-direction:column;
        gap:60px;
        padding:0 20px;
    }

    .bloc {
        width:100%;
    }

    .bloc h2 {
        text-align:center;
    }

    .bloc p {
        text-align:left;
    }

    /* VIDEOS */
    .video-thumb img {
        width:100%;
        height:auto;
    }

    /* PRESENTATION */
    .presentation {
        margin:80px 20px;
        font-size:0.9em;
    }

    /* STRUCTURE PAGES */
    .page {
        margin:120px 20px;
    }

    .page-content {
        padding:25px;
        font-size:1em;
    }

    /* CONTACT */
    .contact-form {
        padding:0 10px;
    }

}

nav ul {
    margin-top:25px;
}

nav ul li a {
    font-size:1.1em;
    display:inline-block;
}

.bloc {
    margin-bottom:10px;
}

.bloc p {
    line-height:1.5;
}

.play-icon {
    font-size:50px;
}

/* =========================
PRESSE RESPONSIVE
========================= */

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

    .presse-grid {
        position:static;
        height:auto;
        display:flex;
        flex-direction:column;
        gap:25px;
    }

    .article {
        position:static;
        width:100%;
    }

}

.article {
    border-radius:6px;
}


/* =========================
HARMONISATION MOBILE
========================= */

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

    /* LARGEUR GÉNÉRALE */
    main {
        padding: 0 15px;
    }

    /* TEXTES */
    body {
        font-size:16px;
        line-height:1.5;
    }

    h1 {
        font-size:22px;
        margin-bottom:20px;
    }

    h2 {
        font-size:20px;
        margin-bottom:15px;
    }

    /* ESPACEMENTS GLOBAUX */
    section {
        margin-bottom:40px;
    }

    /* BLOCS CENTRAUX */
    .page-content {
        margin:0;
    }

    /* LIENS */
    a {
        padding:5px 0;
    }

}


/* =========================
MENU MOBILE AMÉLIORÉ
========================= */

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

    nav ul {
        margin-top:30px;
    }

    nav ul li {
        margin:8px 0;
    }

    nav ul li a {
        display:block;
        padding:10px;
        border:1px solid rgba(255,255,255,0.2);
        border-radius:4px;
    }

    nav ul li a:hover {
        background:rgba(255,255,255,0.1);
    }

}


/* =========================
FINITION MOBILE PRO
========================= */

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

    /* CENTRAGE GLOBAL PLUS PROPRE */
    body {
        text-align:center;
    }

    /* MAIS on garde le texte lisible */
    p {
        text-align:left;
    }

    /* TITRES PLUS ÉLÉGANTS */
    h1, h2 {
        text-align:center;
    }

    /* BLOCS PLUS AÉRÉS */
    .bloc {
        padding:0 5px;
    }

    /* ARTICLES PRESSE PLUS LÉGERS */
    .article {
        padding:12px;
        font-size:0.95em;
    }

    /* SIGNATURE PLUS DISCRÈTE */
    .signature {
        opacity:0.85;
    }

    /* FOOTER UN PEU PLUS RESPIRANT */
    footer {
        margin-top:60px;
        font-size:0.85em;
    }

}