/**
 * Page CSS
 * Styles pour le template de page par defaut
 *
 * @package RR
 * @since 1.0.0
 */

/* ==========================================================================
   PAGE CONTENT
   ========================================================================== */

.page-header {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-6);
}

.page-content {
    padding: 0;
    padding-bottom: var(--spacing-8);
}

.page-article {
    max-width: var(--content-width, 800px);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

/* ==========================================================================
   PAGE BANNER - Full width
   ========================================================================== */

.page-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    margin-bottom: var(--spacing-8);
    overflow: hidden;
    /* Sortir du conteneur pour etre full-width */
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    width: 100vw;
}

/* Banner avec image a la une */
.page-banner--image {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.page-banner--image .page-banner__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.5) 100%
    );
}

.page-banner--image .page-title {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Banner avec gradient (sans image) */
.page-banner--gradient {
    background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary) 40%, var(--color-primary-hover) 100%);
}

.page-banner--gradient .page-title {
    color: #ffffff;
}

/* Contenu de la banner */
.page-banner__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--spacing-8) var(--spacing-4);
    max-width: var(--container-max, 1200px);
    width: 100%;
}

.page-title {
    /* --font-size-5xl = option « Taille h1 » (RR Options > Typographie).
       Deja fluide (clamp desktop/mobile) : pas de surcharge en media query. */
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    margin: 0;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide, 0.025em);
}

/* ==========================================================================
   PAGE BODY (Content from WordPress editor)
   ========================================================================== */

.page-body {
    color: var(--color-text);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
}

/* Headings */
.page-body h1,
.page-body h2,
.page-body h3,
.page-body h4,
.page-body h5,
.page-body h6 {
    color: var(--color-text);
    font-weight: var(--font-weight-bold);
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-4);
    line-height: 1.3;
}

/* Pas de surcharge de font-size ici : les titres du contenu heritent des regles
   globales de base.css, qui mappent h1..h6 sur --font-size-5xl..--font-size-lg,
   c-a-d exactement les options « Taille h1 »..« Taille h6 » du panneau
   Typographie (RR Options). Un cran de rabais ici rendrait le panneau inoperant
   sur les articles. Le responsive est deja gere par les clamp() (borne basse =
   valeur « mobile » du panneau) : pas de media query non plus. */

/* Paragraphs */
.page-body p {
    margin-bottom: var(--spacing-4);
}

/* Links
   Les boutons sont exclus : ce sont des liens, mais ils portent deja leur
   propre couleur de fond ET de texte. Sans cette exclusion, la couleur de
   lien s'imposait au libelle du bouton et donnait du texte de la couleur de
   marque sur un fond de la meme couleur (invisible), gris sur gris au survol.
   Le soulignement n'a pas davantage de sens sur un bouton. */
.page-body a:not([class*="rr-button"]):not(.btn) {
    color: var(--color-primary);
    text-decoration: underline;
    transition: color var(--transition-fast);
}

.page-body a:not([class*="rr-button"]):not(.btn):hover {
    color: var(--color-primary-hover);
}

/* Lists */
.page-body ul,
.page-body ol {
    margin-bottom: var(--spacing-4);
    padding-left: var(--spacing-6);
}

.page-body li {
    margin-bottom: var(--spacing-2);
}

.page-body ul li {
    list-style-type: disc;
}

.page-body ol li {
    list-style-type: decimal;
}

/* Images */
.page-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    margin: var(--spacing-4) 0;
}

.page-body figure {
    margin: var(--spacing-6) 0;
}

.page-body figcaption {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--spacing-2);
}

/* Blockquotes */
.page-body blockquote {
    border-left: 4px solid var(--color-primary);
    padding-left: var(--spacing-4);
    margin: var(--spacing-6) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Code */
.page-body code {
    font-family: var(--font-mono, monospace);
    background-color: var(--color-bg-muted);
    padding: var(--spacing-1) var(--spacing-2);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

.page-body pre {
    background-color: var(--color-bg-muted);
    padding: var(--spacing-4);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    margin: var(--spacing-4) 0;
}

.page-body pre code {
    background: none;
    padding: 0;
}

/* Tables */
.page-body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--spacing-6) 0;
}

.page-body th,
.page-body td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}

.page-body th {
    font-weight: var(--font-weight-semibold);
    background-color: var(--color-bg-muted);
}

/* Horizontal Rule */
.page-body hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--spacing-8) 0;
}

/* ==========================================================================
   WORDPRESS BLOCK EDITOR ALIGNMENTS
   ========================================================================== */

.page-body .alignleft {
    float: left;
    margin-right: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.page-body .alignright {
    float: right;
    margin-left: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.page-body .aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.page-body .alignwide {
    margin-left: calc(-1 * var(--spacing-8));
    margin-right: calc(-1 * var(--spacing-8));
    max-width: calc(100% + var(--spacing-8) * 2);
}

.page-body .alignfull {
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    width: 100vw;
}

/* ==========================================================================
   CONTACT FORM 7
   ========================================================================== */

.wpcf7 {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--spacing-8);
}

.wpcf7-form p {
    margin-bottom: var(--spacing-4);
}

.wpcf7-form label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    font-family: inherit;
    color: var(--color-text);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form input[type="url"]:focus,
.wpcf7-form input[type="number"]:focus,
.wpcf7-form input[type="date"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 34, 113, 177), 0.15);
}

.wpcf7-form textarea {
    min-height: 150px;
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-3) var(--spacing-8);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    font-family: inherit;
    color: var(--color-text-inverse, #fff);
    background-color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-primary-hover, var(--color-primary));
    transform: translateY(-1px);
}

/* Validation */
.wpcf7-not-valid {
    border-color: var(--color-error, #dc3545) !important;
}

.wpcf7-not-valid-tip {
    font-size: var(--font-size-xs);
    color: var(--color-error, #dc3545);
    margin-top: var(--spacing-1);
}

/* Response messages */
.wpcf7-response-output {
    margin: var(--spacing-4) 0 0 !important;
    padding: var(--spacing-3) var(--spacing-4) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--font-size-sm);
}

.wpcf7-mail-sent-ok {
    border-color: var(--color-success, #28a745) !important;
    background-color: rgba(40, 167, 69, 0.1);
    color: var(--color-success, #28a745);
}

/* Spinner */
.wpcf7-spinner {
    margin-left: var(--spacing-3);
}

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

@media (max-width: 768px) {
    .page-content {
        padding: 0;
        padding-bottom: var(--spacing-6);
    }

    .page-banner {
        min-height: 220px;
    }

    .page-banner__content {
        padding: var(--spacing-6) var(--spacing-4);
    }

    .page-body .alignleft,
    .page-body .alignright {
        float: none;
        margin-left: 0;
        margin-right: 0;
    }

    .page-body .alignwide {
        margin-left: calc(-1 * var(--spacing-4));
        margin-right: calc(-1 * var(--spacing-4));
        max-width: calc(100% + var(--spacing-4) * 2);
    }
}